このツールについて
カラーピッカーは、CSS が理解する各形式の間で色を対応付けます。このピッカーは HSV モデルを基盤としています。彩度／明度の正方形で色の鮮やかさと明るさを設定し、色相スライダーでカラーホイールを回転させ、アルファスライダーで不透明度を設定します。すべての変更は culori で 4 つの正規の文字列に変換されます。HEX（#rrggbb、アルファが 1 未満のときは #rrggbbaa）、rgb()/rgba()、hsl()/hsla()、そして知覚的に均一な oklch() です。これにより、同じ色をどのスタイルシートやデザイントークンにもそのまま使えます。
モックアップから正確な値を取得したり、デザイナーが送ってきた 16 進数コードをコードが求める rgb() や hsl() に変換したり、半透明のオーバーレイを調整して rgba() を読み取ったり、レガシーな色を広色域 CSS 向けの最新の oklch() に変換したりするのにお使いください。任意の CSS カラー文字列（16 進数コード、rebeccapurple のような名前付きカラー、または完全な rgb()/hsl() 式）を貼り付けると、ピッカー全体がそれに同期します。最近選んだ色はクリックできる行に残り、そのセッションの間ずっと使えます。
すべてがブラウザ内で実行されます。色がアップロードされることは決してなく、最近の色の行はメモリ内にのみ保持されるため、タブを閉じると消去されます。
よくある質問
HSL と OKLCH の違いは何ですか?
HSL は色を sRGB 空間における色相、彩度、明度で記述しますが、同じ明度の値でも明るさがまったく異なって見えることがあります。OKLCH は知覚的に均一なモデルを使用するため、その明度と彩度の値は目が実際に色を見る方法と一致し、色相をまたいでも一貫します。
16 進数の色で透明度を表すにはどうすればよいですか?
6 桁の 16 進数に 2 桁のアルファ値を追加すると #rrggbbaa になります。たとえば #ff000080 は約 50% の不透明度の赤です。この 8 桁の形式はすべての最新ブラウザでサポートされています。アルファが完全に不透明なときは、ピッカーはより短い #rrggbb を出力します。
rebeccapurple のような名前付き CSS カラーを貼り付けられますか?
はい。hex フィールドは有効な CSS カラー文字列なら何でも受け付けます。名前付きカラー、16 進数コード、rgb()/hsl()/oklch() 式に対応し、有効な入力をすると正方形、スライダー、すべての出力形式が即座に同期します。