HSV/HSLカラーピッカー

このツールでできること

色相（Hue）・彩度（Saturation）・明度（Value）をスライダーで直感的に操作し、色を選択できるカラーピッカーです。選んだ色は HEX・RGB・HSL・HSV・CMYK の各フォーマットで同時に表示され、ワンクリックでクリップボードにコピーできます。CSSでは通常HEXやRGBが使われますが、HSL/HSVは「色相だけ変えて同系色のバリエーションを作る」といった操作に強く、デザイン作業で便利です。

特徴

• HSVスライダー — 色相・彩度・明度をそれぞれ独立して調整できます。
• アルファ値対応 — 不透明度 0〜100% を設定でき、RGBA・HSLA で出力できます。
• 5フォーマット同時出力 — HEX / RGB / HSL / HSV / CMYK を同時に表示。
• 色相スライダーの視覚化 — 色相スライダーに虹色の背景が表示されます。
• リアルタイムプレビュー — スライダー操作と同時に大きな色面で確認できます。

HSV と HSL の違い

HSV は Hue（色相）・Saturation（彩度）・Value（明度）の略で、絵の具や照明のモデルに近く、色相と明るさを独立して扱えます。
HSL は Hue・Saturation・Lightness の略で、CSS で標準的にサポートされているモデルです。S=100%, L=50% が最も鮮やかな色になります。
CSSでそのまま使いたい場合は HSL を、直感的に色を選びたい場合は HSV を使うと便利です。

使い方

1. 色相スライダー（H）で大まかな色を選びます（赤→黄→緑→青→紫）。
2. 彩度スライダー（S）で鮮やかさを調整します。
3. 明度スライダー（V）で明るさを調整します。
4. 必要なら不透明度（A）も調整します。
5. 欲しいフォーマットの「コピー」ボタンでコードを取得します。

よくある質問

CMYK は印刷に使えますか？

本ツールのCMYKはRGBからの簡易変換です。実際の印刷ではプロファイルに基づく正確な変換が必要なため、印刷所の指定フォーマットに従ってください。

HEX から逆変換できますか？

本ツールはスライダー中心のピッカーです。HEXからの変換にはカラーコード変換ツールをご利用ください。

アルファ値付きのHEX (#RRGGBBAA) は？

アルファが100%未満の場合、HEX は #RRGGBBAA 形式で出力します。