37Signals の開発ブログで紹介されていた色の扱いの箇所を写経してみました。
Modern CSS patterns in Campfire
Playground | MDN で確認します。
順に暗くなる灰色を3色作ります。
・gray
・gray-dark
・gray-darker
色の指定には oklch() を使い、明度を変えます。
・明度： 0%〜100% の範囲の知覚的な明度。
・彩度：純粋なグレーから完全な彩度までの色の量、0～0.5。
・色相：カラーホイール上の色の角度、0～360 度。
・gray：96%
・gray-dark：92%
・gray-darker：75%
直感的で良いですね。
HTML
<div data-color="lch-gray"></div>
<div data-color="lch-gray-dark"></div>
<div data-color="lch-gray-darker"></div>CSS
div {
width: 50px;
height: 50px;
padding: 5px;
margin: 5px;
display: inline-block;
border: 1px solid black;
}
[data-color="lch-gray"] {
background-color: oklch(96% 0.005 96);
}
[data-color="lch-gray-dark"] {
background-color: oklch(92% 0.005 96);
}
[data-color="lch-gray-darker"] {
background-color: oklch(75% 0.005 96);
}
次に青をベースにした色を作ります。
・blue
・blue-light
・blue-dark
HTML
...
<hr>
<div data-color="lch-blue"></div>
<div data-color="lch-blue-light"></div>
<div data-color="lch-blue-dark"></div>
CSS
...
[data-color="lch-blue"] {
background-color: oklch(54% 0.23 255);
}
[data-color="lch-blue-light"] {
background-color: oklch(95% 0.03 255);
}
[data-color="lch-blue-dark"] {
background-color: oklch(80% 0.08 255);
}
透明度の変更も簡素で良いですね。
--lch-blue: 54% 0.23 255;
--color-link-50: oklch(var(--lch-blue) / 0.5);
以上です。
▼この記事がいいね！と思ったらブックマークお願いします
