色を選択
フォーマット
HEX
RGB
HSL
CMYK
色履歴
まだ色が選択されていません
#5E6AD2
カラー値
HEX
#5E6AD2
RGB
rgb(94, 106, 210)
HSL
hsl(234, 56%, 60%)
CMYK
cmyk(55%, 49%, 0%, 18%)
カラーピッカー ツールとは？
視覚的に色を選び、HEX、RGB、HSL、CMYK 間で変換できます。任意の形式をワンクリックでコピーし、ブラウザー上で値を直接微調整できます。
カラーピッカー ツールの使い方
- HEX 値を入力するか、ビジュアルピッカーで色を選択します。
- 以下に表示される変換後の RGB、HSL、CMYK 値を確認します。
- 色がデザインまたはコードのターゲットに一致するまで、入力値を微調整します。
- 必要な形式をワンクリックでコピーします。
クイックガイド
カラー形式リファレンス HEX、RGB、HSL、CMYK を比較し、CSS、デザイン、印刷ワークフローに適した形式を選べます。
カラーピッキングを理解する ▾
例
入力
#FF5733
出力
RGB(255, 87, 51) · HSL(11°, 100%, 60%) · CMYK(0%, 66%, 80%, 0%)
一般的な使用例
- CSS やデザイントークン用に正確な UI カラーを選択
- HEX、RGB、HSL 値をフロントエンドコードにコピー
- デザイン QA 中に色を検査して比較
- 選択した1色から小さなパレットを作成
よくある質問
対応している色形式は？
HEX、RGB、RGBA、HSL、HSLA、CMYK。任意の形式フィールドをクリックすると値をコピーできます。
スポイトで画面から色を取得できますか？
EyeDropper API（Chrome 95+）に対応しているブラウザでは可能です。スポイトアイコンをクリックすると、画面上の任意の場所から取得できます。
HSL と HSB/HSV の違いは何ですか？
HSL（Hue、Saturation、Lightness）と HSB/HSV（Hue、Saturation、Brightness/Value）はどちらも円筒形のカラーモデルですが、第3軸の定義が異なります。HSL では 50% の明度が「純粋な」色です。HSB では 100% の明るさが最大の明るさを意味し、アーティストが鮮やかだと考える色に近くなります。CSS は HSL を使用し、Photoshop と Figma は HSB を使用します。
WCAG の色コントラスト確認に使えますか？
このツールは色の値と変換を表示します。背景色に対するアクセシビリティのコントラスト確認（WCAG AA/AAA 比）には、専用のコントラストチェッカーツールを使用してください。