Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

Sassで色相差が等間隔のカラバリn個を作る(色相環だけ回すver)

イッテンの色彩論にあるDyad,Complementary,Triad,Tetrad,Pentad,Hexadを関数で得られないかな、とやってみた。

基準色から色相環360度を2,3,4,5,6,,,n等分した時の色をつくる。

@function Colors($color, $part, $nth:null) {

  // $colorを基準に$partの数だけ色相を等分割して色の配列を作る
  $val: $color;
  @for $i from 1 through $part - 1 {
    $val: append($val, adjust-hue($color, 360deg / $part * $i), comma);
  }
  $colors: $val;

  @if $nth==null {
    // $nthの指定がなければリストで返して
    @return $colors;
  }
  @else {
    //$nthの指定があれば指定番目の色を返す
    @return nth($colors, $nth);
  }
}

// ex) Colors(#d39, 6) -> #d39, #d73, #9d3, #3d7, #39d, #73d
// ex) Colors(#d39, 6, 2); -> #d73

体感だと緑系が似た色に見えちゃう。
綺麗に等分された感を出すには明度や彩度も加味した方がいいかもしれない。
89403a68-1789-6c81-02b6-2003d3cc2393.png

感想

  • 期待したほど見た目が綺麗に等分されないので実用性は謎。

  • append()の使い方を一つ学べた。

    • 調和名を引数にしてadjust-hue($color, 360deg / $part * $i)を分割する数だけ書いたところで、規則性あるんだからforで回して配列にすればいいんだ。。。と気付いた。

課題

社内ドラフトのタイミングで、モヤっとしてたところを分かりやすく指摘してもらった。

カラーには元から明度/彩度の違いがあって、純色でも黄色が一番鮮やかで青紫が一番暗くなります。
単純に色相環を回転させた時に出る違和感はこれが原因です。
この違和感を克服するために作成されたのが「トーン」で、人間の知覚に馴染むよう明度・彩度を調整してあります。

2d81d0d0-3c32-5472-23a0-810321089ab0.png

ひとまず彩度だけ調整。
知覚的に彩度落ち気味の色は上げて逆は下げる、みたいな記述追加すればいいんですかね。

「知覚的に彩度落ち気味の色は上げて逆は下げる」をうまく組み込みたい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?