Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?