🎨 カラーピッカー
色を選んでHEX、RGB、HSL値を即座に取得。
このツールとは？
カラーピッカーは、ビジュアルパレットから色を選択し、ウェブで最も一般的に使用される3つのカラー形式（HEX、RGB、HSL）でその値を即座に確認できるユーティリティです。デザイナー、開発者、アーティストは、異なるツールやコンテキストが異なる形式を期待するため、これらの表現間を絶えず移動します。CSSスタイルシートは多くの場合3つのいずれかを受け入れますが、FigmaやPhotoshopなどのデザインソフトウェアはデフォルトでHEXを表示する場合があり、データ可視化ライブラリは多くの場合RGBまたはHSLタプルを要求します。このツールは、3つの値を並べて表示し、色を調整する際に同期を保つことで、そのギャップを埋めます。そのため、別のコンバーターを探す必要がありません。組み込みのカラー入力は、オペレーティングシステムのネイティブピッカーを開き、スペクトル全体で細かい選択をサポートします。一方、手動のHEXフィールドでは、既存のコードを貼り付けて検査や変換ができます。大きなプレビュースウォッチは、正確に判断できる十分なサイズで正確な色を表示し、ワンクリックのコピーボタンは各値をクリップボードに送信し、スタイルシート、コンポーネントライブラリ、またはデザインファイルに貼り付ける準備が整います。変換は標準的な色空間の計算で実行されるため、値は正確でブラウザー間で一貫しています。ブランドパレットの構築、ボタンのアクセントカラーの選択、デザイナーのHEXコードをグラフライブラリが必要とするHSLに変換するなど、このツールは摩擦なく正しい形式で正しい値を提供します。仕組み
ツールは現在の色の単一の真実のソースを維持し、ソースが変更されるたびに形式間で変換します。ビジュアルカラー入力を使用すると、ブラウザーは#3b82f6のようなHEX文字列を返し、ツールはそれを読み取り、16進数のペアを解析して赤、緑、青のコンポーネントに分割します。これら3つの値（それぞれ0から255まで）が、表示されるRGBタプルを形成します。HSL表現を生成するために、ツールはRGBチャンネルを0から1の範囲に正規化し、明度を計算するために最大値と最小値を見つけ、それらの差から彩度を導き出し、最後にどのチャンネルが最大かに基づいて色相を色相環上の角度として計算します。HEXコードを手動で入力すると、ツールは入力を検証し、先頭の#の有無に関わらずコードを受け入れ、3桁の短縮形を展開し、同じ変換パイプラインを実行してRGBおよびHSL出力を即座に更新します。カラープレビュースウォッチは、その背景を現在のHEX値に設定することで更新され、選択した色の正確でフルサイズのレンダリングを提供します。すべての変換はJavaScriptでローカルに発生するため、ツールは高速でプライベートであり、オフラインで動作し、計算にネットワーク呼び出しは必要ありません。使い方
色の選択と変換は一瞬で終わります。
- 色のついた四角形をクリックして、システムのネイティブカラーピッカーを開き、視覚的に任意の色を選択します。または、HEX入力フィールドに6桁のHEXコードを入力します（先頭の#の有無に関わらず）。
- 色を変更すると、プレビュースウォッチが即座に更新され、HEX、RGB、HSL値がリアルタイムで再計算されます。
- プレビューの下に表示される3つの値を確認します。それぞれがCSSやデザインツールにそのまま貼り付けられる正確な形式で表示されます。
- 必要な形式の横にあるコピーボタンをクリックしてその値をクリップボードに送信し、スタイルシート、コンポーネント、またはドキュメントに貼り付けます。好きなだけ色を切り替えることができ、すべての値は完璧に同期されたままです。
よくある質問
よくある質問
HEX、RGB、HSLの違いは何ですか？
HEXは色を#FF5733のような6桁の16進数文字列として表現し、各桁のペ��は赤、緑、青のチャンネルを表します。RGBは同じ3つのチャンネル値を0から255までの10進数としてリストします（例：rgb(255, 87, 51)）。HSLは色相、彩度、明度で色を表現し、多くの場合より直感的です。なぜなら、単一の値を調整するだけで色を暗くしたり彩度を上げたりできるからです。
HEXコードを手動で入力できますか？
はい。HEXフィールドに先頭の#の有無に関わらず、有効な6桁のHEXコードを入力すると、ツールは即座にプレビューを更新し、対応するRGBとHSL値を表示します。#3b5のような3桁の短縮形も受け入れられ、6桁形式に展開されます。
CSSではどの形式を使うべきですか？
3つの形式はすべて現代のCSSで有効なので、選択は主に利便性によります。HEXはコンパクトでスタイルシートで広く使用されています。RGBはrgba()記法で不透明度を調整する必要がある場合に明確です。HSLは同じ色相の色合いやシェードを作成したい場合に特に便利です。なぜなら、色相と彩度を固定したまま明度だけを変更できるからです。
変換された値は正確ですか？
はい。変換は標準的な色空間の計算を使用するため、HEX、RGB、HSLの値は正確でブラウザー間で一貫しています。これらの形式はすべて同じsRGB色空間を記述しているため、間の変換で情報が失われることはありません。
ヒントとアドバイス
カラーパレットを構築する際、単一のブランドカラーから始め、HSLの読み取り値を使用して、色相を一定に保ちながら明度と彩度を調整することで調和のとれたバリエーションを生成します。これにより、一体感のある色合いやシェードが生まれます。アクセシブルなインターフェースの場合、選択した色とその上のテキストや背景のコントラスト比を常に確認してください。印象的に見える色でも読みやすさの基準を満たさない場合があるからです。HSLの明度50%は知覚的明るさと同じではないことに注意してください。したがって、同じHSL明度でも、非常に明るい黄色と非常に暗い青色は全く異なって見える場合があります。色を開発者に引き継ぐ場合、HEXコードを標準値として提供し、RGBとHSLの等価値を参考として含めてください。最後に、最終パレットを共有のトークンファイルに保存して、すべてのチームメンバーが同じ値を参照するようにします。これにより、あるツールから別のツールに目でコピーした際に生じる微妙なズレを防ぐことができます。