カラーピッカー

カラーピッカーは、モダンな CSS の知覚的な色空間である OKLCH で動作します。エリアの横方向では、彩度がグレーからその明度で画面が表示できる最大値まで変化するため、どの点も使える色になり、色相を回してもつまみは動きません。

入力欄は色名を含むあらゆる CSS の色を受け付け、形式ボタンは値を hex、rgb()、hsl()、oklch()、color(display-p3) のいずれかで書き出します。形式の色域から外れる色は、CSS と同じ方法で明度と色相を保ったまま色域内に収められます。

swatches で選択用の色を追加し、contrastWith で背景に対する色のコントラストを WCAG 2 の基準で確認できます。ブラウザーがスポイトに対応していれば、ボタンで画面上の色を拾えます。