カラーピッカー — HEX・RGB・HSL・HSV・CMYKを即座に

このツールの機能

カラーピッカーは、5つの一般的な色形式（HEX、RGB、HSL、HSV、CMYK）間を変換します。ネイティブのカラースウォッチで視覚的に色を選ぶか、サポート形式でカラーコードを入力—ツールが即座に5形式すべてで相当コードを表示。1クリックで任意の値をコピー。デザイナー、開発者、さまざまなツールやシステムで色コードを扱う人に最適です。

使い方

1. 視覚的に色を選ぶ — カラースウォッチをクリックしてシステムのネイティブカラーピッカーを開く。色を選択すると、ツールが全形式コードを自動更新。
2. またはカラーコードを入力 — サポート形式で色を貼り付けまたは入力：
   • HEX：#ff6b6b または #f66
   • RGB：rgb(255, 107, 107)
   • HSL：hsl(0, 100%, 71%)
   • HSV：hsv(0, 58%, 100%)
   • CMYK：cmyk(0%, 58%, 58%, 0%)
3. 必要なものをコピー — 各形式の横のコピーボタンでクリップボードにコピー。
4. 双方向同期 — スウォッチを変更するとテキストが更新；有効なコードを入力するとスウォッチと他形式が更新。

動作の仕組み

5形式すべては単一のRGBタプル（赤、緑、青、各0–255）を正規の中間表現として導出。色を入力すると：

1. パース — ツールが各形式のパーサー（HEX、RGB、HSL、HSV、CMYK）を順に試行して成功するまで実行。
2. RGBに変換 — 入力を整数RGBタプルに変換。
3. 全形式を生成 — RGBから、ツールがHEX、RGB文字列、HSL、HSV、CMYKを並行計算。
4. 表示 — 5形式すべてのコードがコピーボタン付きで表示。

無効な入力はインラインエラーを表示；空の入力は何もしない（エラーなし、変更なし）。ネイティブカラーピッカーは常に有効な6桁小文字HEXを返すため、視覚的な経路ではパースエラーは発生しません。

すべての処理はブラウザ内で実行されます。データはサーバーに送信されません。

使用例とサンプル

• Web開発 — デザインの色（例：印刷のCMYK）をCSS用のHEXやRGBに変換。
• デザインハンドオフ — 単一のピックから複数形式コードを開発者に提供。
• アクセシビリティ — 輝度や彩度（HSL/HSV）を調整してコントラスト要件を満たす。
• 印刷準備 — 画面の色（RGB）を印刷ワークフロー用のCMYKに変換。
• ブランド一貫性 — Web、アプリ、印刷で同じ色が正しく使われるようにする。

制限と既知の制約

• 精度 — RGBは整数（0–255）を使用するため、変換で±1チャネルの丸めが発生する場合あり。標準的で一般的な用途には十分。
• 色域 — CMYKはRGBでは表現できない色を含む場合あり；CMYKからRGBへの変換は近似。
• ネイティブピッカー — 視覚的ピッカーの機能はOSとブラウザに依存。
• 空の入力 — フィールドをクリアしても表示コードはクリアされず；最後の有効な色が表示されたまま。