CSS COLOR SYSTEM
OKLCH Palette Scale Generator
Tailwind CSSなどの命名に合わせて、1つの基準色から、最も淡い50〜最も濃い950までの11色を作ります。
CSS oklch()対応
GENERATED SCALE
50〜950を一度に確認
SELECTED500
OUT OF sRGB0
METHOD COMPARISON
明るさだけを変える場合と比較
HSLLightnessだけを変更
OKLCH明度・彩度・色相を分離
USAGE PREVIEW
UIで使って確認
500
BEST TEXT
WHITE
4.50:1 AA
New palette
Design tokens that feel even.
選択した段階色を、背景・文字・border・buttonへ展開して確認します。
CSS VARIABLES
そのまま実装へ