Posted at

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

More than 1 year has passed since last update.

配色を調べてると「マンセル色相環」「PCCS色相環」「オストワルト色相環」...と色相にもいくつか種類があって奥深さに慄きます。

ここではPCCSの調和配色に基づき、色相差による調和配色パターンを@functionを使って作ります。


6つの色彩調和

色相環を24等分割し15度を色相差1としたときの調和形式(でいいのか?語彙に自信がない)

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と決まってるので一まとめにしたいのですが、

可変長引数使ってるせいで目が滑るため、人間が扱いやすいように2段階に分けました。

// 隣接色相:色相差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: ();


    • 知らなかった。クソコードしか書けなくても数こなせば得るものがあるんだなあと。



  • 色の濁りが気になる。次はトーンの調整できないかやってみる。