このツールの機能
カラーピッカーは、5つの一般的な色形式（HEX、RGB、HSL、HSV、CMYK）間を変換します。ネイティブのカラースウォッチで視覚的に色を選ぶか、サポート形式でカラーコードを入力—ツールが即座に5形式すべてで相当コードを表示。1クリックで任意の値をコピー。デザイナー、開発者、さまざまなツールやシステムで色コードを扱う人に最適です。
使い方
- 視覚的に色を選ぶ — カラースウォッチをクリックしてシステムのネイティブカラーピッカーを開く。色を選択すると、ツールが全形式コードを自動更新。
- またはカラーコードを入力 — サポート形式で色を貼り付けまたは入力：
- HEX：
#ff6b6bまたは#f66 - RGB：
rgb(255, 107, 107) - HSL：
hsl(0, 100%, 71%) - HSV：
hsv(0, 58%, 100%) - CMYK：
cmyk(0%, 58%, 58%, 0%)
- HEX：
- 必要なものをコピー — 各形式の横のコピーボタンでクリップボードにコピー。
- 双方向同期 — スウォッチを変更するとテキストが更新；有効なコードを入力するとスウォッチと他形式が更新。
動作の仕組み
5形式すべては単一のRGBタプル（赤、緑、青、各0–255）を正規の中間表現として導出。色を入力すると：
- パース — ツールが各形式のパーサー（HEX、RGB、HSL、HSV、CMYK）を順に試行して成功するまで実行。
- RGBに変換 — 入力を整数RGBタプルに変換。
- 全形式を生成 — RGBから、ツールがHEX、RGB文字列、HSL、HSV、CMYKを並行計算。
- 表示 — 5形式すべてのコードがコピーボタン付きで表示。
無効な入力はインラインエラーを表示；空の入力は何もしない（エラーなし、変更なし）。ネイティブカラーピッカーは常に有効な6桁小文字HEXを返すため、視覚的な経路ではパースエラーは発生しません。
すべての処理はブラウザ内で実行されます。データはサーバーに送信されません。
使用例とサンプル
- Web開発 — デザインの色（例：印刷のCMYK）をCSS用のHEXやRGBに変換。
- デザインハンドオフ — 単一のピックから複数形式コードを開発者に提供。
- アクセシビリティ — 輝度や彩度（HSL/HSV）を調整してコントラスト要件を満たす。
- 印刷準備 — 画面の色（RGB）を印刷ワークフロー用のCMYKに変換。
- ブランド一貫性 — Web、アプリ、印刷で同じ色が正しく使われるようにする。
制限と既知の制約
- 精度 — RGBは整数（0–255）を使用するため、変換で±1チャネルの丸めが発生する場合あり。標準的で一般的な用途には十分。
- 色域 — CMYKはRGBでは表現できない色を含む場合あり；CMYKからRGBへの変換は近似。
- ネイティブピッカー — 視覚的ピッカーの機能はOSとブラウザに依存。
- 空の入力 — フィールドをクリアしても表示コードはクリアされず；最後の有効な色が表示されたまま。