カラーピッカー

用途

色を選ぶ、または HEX / rgb() / hsl() の値を貼り付けるだけで、よく使われるすべての記法で即座に確認できます。HEX（3 桁、アルファ付き 8 桁）、RGB(A)、HSL(A)、HSV、CMYK に対応。ある色空間で値を持っているのに別の空間が必要なとき、CSS / デザインツール / 印刷でブランドカラーを揃えたいとき、不透明度を変えながら結果を確認したいときに便利です。

各色空間の使いどころ

• HEX / RGB — CSS、デザインツール、メールテンプレート。どこでもサポートされています。
• HSL — 読みやすいパレット作り。色相・彩度・明度を独立に調整しても、他の軸での色のズレが起きにくい。
• HSV — Photoshop や Figma などのデザインソフトで陰影付け。「この色をもう少し明るく」という多くのカラーピッカーの考え方と一致します。
• CMYK — 印刷向けの出力。あくまで近似値です。画面は RGB であり、プリンタごとにカラープロファイルも異なります。

よくある注意点

• アルファのエンコードは色空間ごとに異なります。 CSS は rgba()、hsla()、8 桁 HEX（#RRGGBBAA）に対応します。古いメールテンプレートや一部のデザインツールは #RRGGBBAA を解釈できないため、その場合は rgba() を使ってください。
• HSL の色相は度数です。 0 = 赤、120 = 緑、240 = 青。CSS では turn、rad、grad も使えますが、ここでの出力は度数です。
• CMYK 変換は素朴な近似です。 実際の印刷では ICC プロファイル（sRGB → CMYK、レンダリングインテント付き）が必要です。本ツールの出力はブランドデックのモックには十分ですが、印刷入稿用ファイルには適しません。
• OKLCH と OKLAB（モダンで知覚的に均一な色空間）はここには表示しません。新しく、まだ広くはサポートされていません。デザインシステムのツールでは当面 HSL/HSV を中心に使うのが無難です。