選択した色はサーバーに送信されますか？

いいえ。HEX→RGB、RGB→HSLの計算はすべてブラウザ内で実行されます。ネットワークリクエストは発生せず、選択内容が記録されることもありません。

対応している入力・出力形式は何ですか？

入力は6桁のHEXコード（#RRGGBB）で、テキスト入力かネイティブのカラーピッカーで指定します。出力はHEX・rgb(r, g, b)・hsl(h, s%, l%)の3表記です。

RGBではなくHSLを使う利点は何ですか？

HSLは色相・彩度・明度が分離されているため、関連色を作りやすいのが利点です。色相を固定して明度だけ変えればホバー用の色、色相をずらせばアクセント色が得られます。RGBは3チャンネルに情報が混在します。

カラーピッカー — HEX・RGB・HSL

概要

開発では色の表記変換が頻繁に発生します。デザイナーからはHEXで受け取り、 CSSではHSLが好まれるようになり、canvasや画像処理はRGBで扱います。本ツールは 1つの色 — ピッカーで選ぶかHEXコードで入力 — を3表記で並べて表示し、プレビュースウォッチで実際の色も確認できます。デザインツールとスタイルシートの間を電卓なしで行き来できます。

使い方

Pick colorスウォッチをクリックしてブラウザのカラーピッカーを開くか、テキスト欄に #0060c0 のようなHEXコードを入力します。
同期されたHEX・RGB・HSLの値と、Previewスウォッチの実際の色を確認します。
6桁の有効なコードでない場合は Enter a valid #RRGGBB hex color と表示され、修正するまで値は出ません。

使用例

#0060c0 → rgb(0, 96, 192) / hsl(210, 100%, 38%)
#ffffff → rgb(255, 255, 255) / hsl(0, 0%, 100%)

注意事項

パースされるのは6桁の #RRGGBB 形式のみです。短縮形（#fff）やアルファ付き8桁（#RRGGBBAA）には対応していません。HSL値はCSSでの一般的な書き方に合わせて整数に丸められます。