基準色から計算して色を出す

基準色から色相、彩度、明度を計算する Sass の関数をつくった。

@function calc-color($color, $hue, $saturation, $lightness) {
  @if $lightness < 0 { // 明度の指定が負の値なら darken() 関数を使う
    @return darken(desaturate(adjust-hue($color, $hue), $saturation), abs($lightness)) // abs() でマイナスを削除して数値の絶対値を返す
  }

  @else { // 明度の指定が正の値なら lighten() 関数を使う
    @return lighten(desaturate(adjust-hue($color, $hue), $saturation), $lightness)
  }
}

ポイントはこの関数を使うときに、明度の指定が負の値だった場合は darken() 関数を使うところ。これは他でも応用が効きそう。

$base-color: #0000ff;

$white: calc-color($base-color, 0, 100, 100);  // calc-color(元になる色, 色相, 彩度, 明度)
$black: calc-color($base-color, 0, 100, -32); // 明度が負の値のときは darken() 関数をつかう
$gray: calc-color($base-color, 0, 100, 30); // 明度が正の値のときは darken() 関数をつかう
$light-gray: calc-color($base-color, 0, 100, 46);
$dark-gray: calc-color($base-color, 0, 100, 5);
$theme-color: $base-color;
$theme-sub-color: calc-color($base-color, -76, 0, 10);
$code-color: calc-color($base-color, 82, 0, 5);
$highlight-color: calc-color($base-color, -180, 0, 0);

$base-color を変えればあとは触らなくてもなんとかなるといいなーってつくったけど、そんなことはなかった。コントラスト比がまったくとれないし、見た目も良くない。ただの夢だった。

まぁでも、基準色からどういう変更を加えたかがコードから読み取れるようになったから、この calc-color 関数自体はつくってよかった。