カラーコード変換
#RRGGBB形式。CSSで最も一般的
赤、緑、青（0-255）
色相、彩度、明度。直感的な色調整
色相、彩度、明度。グラフィックツールで使用
知覚的に均一な最新のCSSカラースペース
アルファ（透明度）チャンネルを含む
カラーピッカー(Color Picker)は、様々なカラーモデル間のコード変換と、視覚的な色選択ができるオンラインツールです。Web開発、UI/UXデザイン、グラフィックデザインなどでは正確なカラーコードが不可欠です。本ツールはHEX、RGB、HSL、HSV、OKLCHなど主要な色形式をすべてサポートし、直感的なカラースライダーとパレットで色を探索してコードを即座にコピーできます。アルファ(透明度)チャンネルにも対応しており、半透明色の作業も可能です。
カラーを選択
カラースライダーをドラッグするか、カラーエリアをクリックして希望のカラーを選択します。または、直接HEXコードなどを入力することもできます。
フォーマットを確認
選択したカラーがHEX、RGB、HSL、HSV、OKLCHなどすべてのフォーマットに自動変換されて表示されます。
透明度を調整
アルファタブで透明度を0〜100%の範囲で調整して半透明カラーを作成できます。
コードをコピー
必要なカラーフォーマットの値をクリックするとクリップボードに自動コピーされます。CSS、デザインツールなどにすぐに貼り付けてください。
HEXは#RRGGBB形式の16進数表記で、CSSで最も一般的に使用されます。RGBは赤(0-255)、緑(0-255)、青(0-255)の組み合わせでカラーを表現します。HSLは色相(Hue, 0-360)、彩度(Saturation, 0-100%)、明度(Lightness, 0-100%)で表現し、人間の直感に最も近いです。
OKLCHは知覚的に均一な(perceptually uniform)最新のCSSカラースペースです。従来のHSLでは同じ彩度/明度でもカラーによって明るさが違って見える問題がありましたが、OKLCHはこれを解決して一貫性のあるパレットを生成するのに有利です。CSS Color Level 4標準に含まれています。
アルファ値は0（完全に透明）から1（完全に不透明）の間の値でカラーの透明度を表します。CSSではrgba(59, 130, 246, 0.5)のように使用し、HEXでは#3B82F680のように後ろに2桁を追加します。オーバーレイ、シャドウ、背景などに活用されます。
WCAG 2.1ガイドラインによると、テキストと背景の間の明度コントラスト比が通常のテキスト4.5:1、大きいテキスト3:1以上である必要があります。カラーを選択する際、背景色とのコントラストを確認して視覚障害者も読めるよう配慮することが重要です。
Figma、SketchなどのデザインツールからコピーしたHEXコードを本ツールに入力すると、RGB、HSLなどCSSで使用可能なフォーマットに自動変換されます。CSS変数で管理するとテーマ変更時に効率的で、HSLフォーマットは明度/彩度の調整が容易です。