Sassでカラーパレットを作る

Sassでカラーパレットを作りたくなったので自分用メモ．
ベースとなる色(3色+グレー)について，その明るさを変化させた色を，css変数として利用できるようにします．

(細かい用語などの間違いはご愛嬌ということで…)

コード全体

global.scss

@use 'sass:color';
:root {
  // color palette
  // based on https://www.colordic.org/w

  // primary: AZUKI
  $primary: #96514d;
  // secondary: KOGANE
  $secondary: #e6b422;
  // tertiary: MOEGI
  $tertiary: #006e54;
  // neutral: gray
  $neutral: #808080;

  // create color palette
  $color-step: 0, 2, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 98, 100;
  @each $i in $color-step {
    --color-primary-#{$i}: #{color.scale($primary, $lightness: (($i - 50) * 2%))};
    --color-secondary-#{$i}: #{color.scale($secondary, $lightness: (($i - 50) * 2%))};
    --color-tertiary-#{$i}: #{color.scale($tertiary, $lightness: (($i - 50) * 2%))};
    --color-neutral-#{$i}: #{color.scale($neutral, $lightness: (($i - 50) * 2%))};
  } 
}

やっていること

Sassには，色調を変化させる関数scale()が用意されているので，これを利用します．

1. sass:colorの読み込み

scale()は，sass:colorというビルトインモジュールを読み込むことで，利用可能になります．

@use 'sass:color';

2. scale()関数の利用

scale()関数の引数はいくつかありますが，今回は明度(Lightness)のみを変化させます．

scale()関数の引数のうち，色($color)のみは，引数名を指定する必要はありませんが，それ以外の引数は$引数名: 値の形式で記述する必要があります．

明度などの各パラメータは，-100%から100%までの値を設定することができます．今回は，パラメータを不等間隔で設定する都合上，あらかじめSass変数として数値の配列を作っておいて，@eachで繰り返し処理を行います．

@each $i in $color-step {
  --color-primary-#{$i}: #{color.scale($primary, $lightness: (($i - 50) * 2%))};
  --color-secondary-#{$i}: #{color.scale($secondary, $lightness: (($i - 50) * 2%))};
  --color-tertiary-#{$i}: #{color.scale($tertiary, $lightness: (($i - 50) * 2%))};
  --color-neutral-#{$i}: #{color.scale($neutral, $lightness: (($i - 50) * 2%))};
}

参考

公式ドキュメント: https://sass-lang.com/documentation/modules/color/#scale