Edited at

CSSだけで色相環作ろうとしたけれど失敗しました(+改良版)

More than 3 years have passed since last update.


色相環を作りたい

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


作れたのか

無理でした。

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部分ががんばってくれました)。