色を明るく・暗くする

色を「20%明るくする」ことは簡単そうですが、ツールによって意味が違います。Sassの lighten() はHSLの明度に20ポイントを足し、color.scale() は白の明度までの距離の20%だけ動かし、ティントは白を20%混ぜ、OKLCHは人が実際に感じる明度を変えます。このツールは、明るく・暗く・鮮やかに・くすませる・グレー化のそれぞれについて4つの方法をすべて計算し、結果をHEX、RGB、HSL、OKLCHで表示し、対応するSassと最新のCSSのコードを示し、10%刻みの結果をすべて並べます。

使い方

1. CSSのどの形式でも色を入力します。
2. より明るく、より暗く、より鮮やか・くすみ、よりグレーのいずれかと、量を選びます。
3. コードベースに合う方法を選びます：SassのHSL、Sassのscale、白・黒との混色、OKLCHのいずれかです。
4. HEX、CSS（HEXの代替行と、相対色またはcolor-mix()の行）、Sassの呼び出しをコピーします。

計算式

HSL add: L′ = L + a · HSL scale: L′ = L + (100 − L) × a · mix: c′ = c + (t − c) × a · OKLCH: L′ = L + a, C′ = C × (1 ± a) · luma: Y′ = 0.2126 R + 0.7152 G + 0.0722 B

aは量です（HSLの加減算ではポイント、それ以外では割合）。cはRGBの各チャンネル、tは混ぜる白・黒・グレーです。暗くする・くすませるは対応する引き算を使います。混色によるグレー化には、CSSの filter: grayscale() と同じ重みのRec. 709輝度のグレーを使います。sRGBの範囲外になったOKLCHの結果は彩度（chroma）が下がり、その場合のCSSの行には合わせた色が出ます。

計算例

Sassの lighten(#6b717f, 20%) はHSLの明度を45.9%から65.9%に上げて #A1A5AF になり、darken(#b37399, 20%) は #7C4465 になります。#3366CC に白を20%混ぜると #5C85D6（51 + 204 × 0.2 = 91.8 → 92、ほかも同様）になり、同じ割合の lighten() よりやわらかな段になります。#3366CC の輝度グレーは 0.2126 × 51 + 0.7152 × 102 + 0.0722 × 204 = 98.5 なので、混色によるグレー化は #636363 です。