プリセット
#3B82F6royal blue
#3B82F6
HTML / CSS カラー
rgb(59, 130, 246)
°
%
%
hsl(217, 91%, 60%)
°
%
%
hsv(217, 76%, 96%)
%
%
%
%
cmyk(76%, 47%, 0%, 4%)
機能の説明
カラーピッカー & コンバーターは、任意の色を選択すると、その色を 5 つの形式 - HEX、RGB、HSL、HSV、CMYK - でライブプレビューと並んで即座に表示します。どの形式の値を編集しても、他のすべての形式が同一の真実の源から更新されるため、値が食い違うことは決してありません。さらに、最も近い CSS カラー名を表示し、その上で黒文字と白文字のどちらが読み取れるか(WCAG AA/AAA)を判定し、最近使った色を記憶します。選択方法は、ネイティブのカラースクエア、HEX コードの入力、HSL スライダーのスクラブ、ランダム生成、そして Chromium 系ブラウザーならスポイトで画面から直接色を拾うこともできます。すべて 100% クライアント側で動作します。選んだ色がブラウザーの外に出ることはありません。
使い方
- 起点となる色を選びます: ネイティブのカラースクエア、HEX フィールド、画面スポイト(Chromium のみ)、HSL スライダー、またはランダム。
- ライブプレビューのスウォッチ(最も近いカラー名付き)と 5 つの形式カードが連動して更新される様子を確認します。
- 別の色空間から変換するには、R/G/B、H/S/L、H/S/V、C/M/Y/K の各フィールドを直接編集します - 数値を入力してタブで抜ける(または Enter を押す)と確定します。
- テキストの読みやすさで、この色の上で黒または白の文字が WCAG AA/AAA を満たすかと、正確なコントラスト比を確認します。
- 最近のスウォッチをクリックすると、たった今使った色に戻れます。
- カードごとのコピーでその形式の文字列(
#3B82F6、rgb(59, 130, 246)、…)を、共有リンクをコピーで同じ色をそのまま誰かに送れます。
例
青のプライマリ → 全形式
#3b82f6 を選択:
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
HSV: hsv(217, 76%, 96%)
CMYK: cmyk(76%, 47%, 0%, 4%)
Name: royal blue
Text: #000000 (5.71:1 - AA pass)
HSL を HEX に変換する
H 0, S 0%, L 50% を入力 → ニュートラルグレー:
HEX: #808080
RGB: rgb(128, 128, 128)
色を共有する
色を選ぶと URL が …/tools/color-picker?c=3b82f6 になります - どこで開いてもまったく同じ色に到達できます。
補足事項
- 単一の真実の源: すべての編集は 1 つの正規化された RGB に集約されるため、HEX/RGB/HSL/HSV/CMYK は常に一致します。HSL、HSV、CMYKは劣化を伴う表現のため、入力した値が最も近い整数に丸めて表示されることがあります - これはバグではなく想定された動作です。
- カラー名は近似です: 「最も近いカラー名」は厳選されたよく知られた CSS 名のサブセットと照合されるため、通常ではない色合いは近隣の名前にスナップすることがあります。
- スポイト: 画面ボタンはブラウザーの EyeDropper API を使用します。Chromium 系ブラウザー(Chrome、Edge、Arc)で利用できます。非対応の環境では非表示になります。
- 共有可能: 選んだ色は URL(
?c=…)にエンコードされ、最近の色はブラウザーのローカルに保存されます - サーバーに送信されることはありません。 - プライベート: すべての変換はローカルで行われます。
- 関連ツール: Palette Generator、Color Contrast Checker、CSS Animation Playground。