Reference 2026-04-23
カラーシステム: RGB, HSL, OKLCH
2026年のデザインシステムでOKLCHがHSLを置き換える理由。
数十年間ウェブ開発者はhexとRGBを使ってきました。HSLが人間に優しい色相/彩度/明度を提供し、現在OKLCHが知覚的均一性を提供しています。
RGB
color: #ff6633;
HSL
color: hsl(15, 100%, 60%);
明度が知覚的に均一でない。
OKLCH
color: oklch(0.7 0.18 30);
同じLの2色は人間の目に同じ明るさ。
重要性
--brand-500: oklch(0.65 0.18 250);
体系的な色生成が機能。
ブラウザサポート
2023年以降すべてのエバーグリーンブラウザ。