カラーピッカーとコンバーター

機能の説明

カラーピッカー & コンバーターは、任意の色を選択すると、その色を 5 つの形式 - HEX、RGB、HSL、HSV、CMYK - でライブプレビューと並んで即座に表示します。どの形式の値を編集しても、他のすべての形式が同一の真実の源から更新されるため、値が食い違うことは決してありません。さらに、最も近い CSS カラー名を表示し、その上で黒文字と白文字のどちらが読み取れるか（WCAG AA/AAA）を判定し、最近使った色を記憶します。選択方法は、ネイティブのカラースクエア、HEX コードの入力、HSL スライダーのスクラブ、ランダム生成、そして Chromium 系ブラウザーならスポイトで画面から直接色を拾うこともできます。すべて 100% クライアント側で動作します。選んだ色がブラウザーの外に出ることはありません。

使い方

1. 起点となる色を選びます: ネイティブのカラースクエア、HEX フィールド、画面スポイト（Chromium のみ）、HSL スライダー、またはランダム。
2. ライブプレビューのスウォッチ（最も近いカラー名付き）と 5 つの形式カードが連動して更新される様子を確認します。
3. 別の色空間から変換するには、R/G/B、H/S/L、H/S/V、C/M/Y/K の各フィールドを直接編集します - 数値を入力してタブで抜ける（または Enter を押す）と確定します。
4. テキストの読みやすさで、この色の上で黒または白の文字が WCAG AA/AAA を満たすかと、正確なコントラスト比を確認します。
5. 最近のスウォッチをクリックすると、たった今使った色に戻れます。
6. カードごとのコピーでその形式の文字列（#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。