CSSだけで色相環作ろうとしたけれど失敗しました（＋改良版）

色相環を作りたい

私は色相環が好きなので色相環を作りたい。つくるのは難しいので失敗の覚悟が必要です。

作れたのか

無理でした。

jsfiddleのアドレスはっつけ忘れてました→https://jsfiddle.net/lovalotta/xfweu8nf/

実情

無理ながらも色相環っぽい何かを作ってみました。コードが鬼多くなるのを防ぐために、currentColorを変数的に使い、background-imageの定義を圧縮しました。

うまい感じに色相環が作れる人がいたらめちゃ尊敬します。尊敬したうえに尊敬する。特上尊敬大盛りです。

作りたかった色相環はこういうやつ→http://www.kish.in.net/?p=1093

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <b></b>
</div>

div,div>div{
    position:relative;
    width:300px;
    height:300px;
}
div>div{
    position:absolute;
    border-radius:100%;
    background-size:70% 70%;
    background-position:center 20%;
    background-repeat:no-repeat;
    background-image:radial-gradient(
        currentColor 40%,
        rgba(0,0,0,0) 60%);
}
div>:nth-child(1){ color:hsl(  0,100%,50%); transform:rotate(0deg); }
div>:nth-child(2){ color:hsl( 30,100%,50%); transform:rotate(30deg); }
div>:nth-child(3){ color:hsl( 60,100%,50%); transform:rotate(60deg); }
div>:nth-child(4){ color:hsl( 90,100%,50%); transform:rotate(90deg); }
div>:nth-child(5){ color:hsl(120,100%,50%); transform:rotate(120deg); }
div>:nth-child(6){ color:hsl(150,100%,50%); transform:rotate(150deg); }
div>:nth-child(7){ color:hsl(180,100%,50%); transform:rotate(180deg); }
div>:nth-child(8){ color:hsl(210,100%,50%); transform:rotate(210deg); }
div>:nth-child(9){ color:hsl(240,100%,50%); transform:rotate(240deg); }
div>:nth-child(10){ color:hsl(270,100%,50%); transform:rotate(270deg); }
div>:nth-child(11){ color:hsl(300,100%,50%); transform:rotate(300deg); }
div>:nth-child(12){ color:hsl(330,100%,50%); transform:rotate(330deg); }

body>div:after{
    content:'';
    position:absolute;
    top:25%;
    left:25%;
    display:block;
    width:50%;
    height:50%;
    border-radius:100%;
    background-image:radial-gradient(
        #fff 60%,
        rgba(0,0,0,0) 62%);
}

改良版も作ってみた

悔しいのでなんとかそれっぽくしたかった。したかったけれど、ちからが及ばない。
https://jsfiddle.net/lovalotta/ray5wub6/

やったこと:

• box-shadowを使って、輪郭がもやもやとした円弧を描く。
• 円弧のまわりはもやもやしすぎちゃうので、親要素でクリッピング。
• まんなかもやはりもやもやしてるので、とりあえず白サークルで塗りつぶす。
• このやり方だと色の合成（box-shadowのもやもやが加算される）重視で薄い色になっちゃうので、無理やり3倍濃縮にした（HTML部分ががんばってくれました）。