Sassで色相環24色の色彩調和パターンを作ってみる

配色を調べてると「マンセル色相環」「PCCS色相環」「オストワルト色相環」...と色相にもいくつか種類があって奥深さに慄きます。
ここではPCCSの調和配色に基づき、色相差による調和配色パターンを@functionを使って作ります。

6つの色彩調和

色相環を24等分割し15度を色相差１としたときの調和形式（でいいのか？語彙に自信がない）
PCCSを用いた色彩調和の形式 - 財団法人日本色彩研究所

• 隣接色相: 色相差1 (+-15deg)
• 類似色相: 色相差2,3 (+-30deg, +-45deg)
• 中差色相: 色相差4,5,6,7 (+-60deg,+-75deg,+-90deg,+-105deg)
• 対照色相: 色相差8,9,10 (+-120deg,+-135deg,+-150deg)
• 隣接補色色相: 色相差11 (+-165deg)
• 補色色相: 色相差12 (180deg)

function

まず色彩調和の色をリストにします。
基準色を$colorに、出したい色相差1-12を$arg...の可変長引数にいれます。

@function ColorHarmony($color, $arg...) {
  $slice: 24;
  $part: 360deg / $slice;
  
  $diffs1: ();
  $diffs2: ();
  @each $j in $arg {
    $diffs1: append($diffs1, $part * $j, comma);
  }
  @each $k in $arg {
    $diffs2: join(360 + (- $part * $k) , $diffs2);
  }
  $diffs: join(0, join($diffs1, $diffs2));
  
  $colors: ();
  @each $i in $diffs {
    $val: append($val, adjust-hue($color, $i), comma);
  }
  @return $colors;
}

色の並び順を綺麗にしたかったので、プラス値とマイナス値で分けてます。
面倒くさいことになってます。

次にリストから特定の色を指定できるようにします。
色相差も1-12と決まってるので一まとめにしたいのですが、
可変長引数使ってるせいで目が滑るため、人間が扱いやすいように２段階に分けました。

// 隣接色相:色相差1(+-15deg)
@function adjacentColor($color,$nth:null){
  $val: ColorHarmony($color,1);
  @return if($nth == null, $val, nth($val,$nth));
}

// 類似色相:色相差2,3(+-30deg, +-45deg)
@function analogyColor($color,$nth:null){
  $val: ColorHarmony($color,2,3);
  @return if($nth == null, $val, nth($val,$nth));
}

// 中差色相:色相差4,5,6,7(+-60deg 〜 +-105deg)
@function intermediateColor($color,$nth:null){
  $val: ColorHarmony($color,4,5,6,7);
  @return if($nth == null, $val, nth($val,$nth));
}

// 対照色相:色相差8,9,10(+-120deg 〜 +-150deg)
@function contrastColor($color,$nth:null){
  $val: ColorHarmony($color,8,9,10);
  @return if($nth == null, $val, nth($val,$nth));
}

// 隣接補色色相:色相差11(+-165deg)
@function split-complementaryColor($color,$nth:null){
  $val: ColorHarmony($color,11);
  @return if($nth == null, $val, nth($val,$nth));
}

// 補色色相:色相差12(180deg)
@function complementaryColor($color,$nth:null){
  //ここは+-一緒だからcomplement($color)で。
  $val: $color,complement($color);
  @return if($nth == null, $val, nth($val,$nth));
}

// color: intermediateColor(#d39);
// -> #d39, #d73, #dda233, #dc3, #c4dd33, #336edd, #34d, #4c33dd, #73d

https://jsfiddle.net/32fw8fog/7/

円周配置したい。三角比どうしよう。

感想

• 空の変数作れた！！！ $diffs1: ();
  • 知らなかった。クソコードしか書けなくても数こなせば得るものがあるんだなあと。
• 色の濁りが気になる。次はトーンの調整できないかやってみる。