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.

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

配色を調べてると「マンセル色相環」「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/
d9abd210-5f9d-a394-bfda-52686b7c2bd7.png

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

感想

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