カラーピッカー
カラーコード変換
色を選択
R
G
B
カラー値
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
カラーパレット
クリックで選択・コピーカラーフォーマット
HEX
#RRGGBB形式。CSSで最も一般的
RGB
赤、緑、青（0-255）
HSL
色相、彩度、明度。直感的な色調整
HSV/HSB
色相、彩度、明度。グラフィックツールで使用
OKLCH
知覚的に均一な最新のCSSカラースペース
RGBA/HSLA
アルファ（透明度）チャンネルを含む
カラーピッカーとは？
カラーピッカー(Color Picker)は、様々なカラーモデル間のコード変換と、視覚的な色選択ができるオンラインツールです。Web開発、UI/UXデザイン、グラフィックデザインなどでは正確なカラーコードが不可欠です。本ツールはHEX、RGB、HSL、HSV、OKLCHなど主要な色形式をすべてサポートし、直感的なカラースライダーとパレットで色を探索してコードを即座にコピーできます。アルファ(透明度)チャンネルにも対応しており、半透明色の作業も可能です。
- HEX、RGB、HSL、HSV、OKLCH 5つのカラーフォーマット相互変換
- 直感的なカラースライダーおよびカラーエリア選択
- アルファ（透明度）チャンネル調整をサポート
- ワンクリックでカラーコードをコピー
- ランダムカラー生成機能
- 基本/高度カラーパレットを提供
使い方
- 1
カラーを選択
カラースライダーをドラッグするか、カラーエリアをクリックして希望のカラーを選択します。または、直接HEXコードなどを入力することもできます。
- 2
フォーマットを確認
選択したカラーがHEX、RGB、HSL、HSV、OKLCHなどすべてのフォーマットに自動変換されて表示されます。
- 3
透明度を調整
アルファタブで透明度を0〜100%の範囲で調整して半透明カラーを作成できます。
- 4
コードをコピー
必要なカラーフォーマットの値をクリックするとクリップボードに自動コピーされます。CSS、デザインツールなどにすぐに貼り付けてください。
よくある質問
活用のヒント
- HSLフォーマットは明度(L)だけを調整すれば同じカラーの明るい/暗いバリエーションを簡単に作成できるため、テーマカラー作業に有利です
- ランダムカラー機能でインスピレーションを得た後、カラースライダーで微調整すると創造的なパレットを作成できます
- CSS custom property（変数）と一緒に使用すると、ダークモード/ライトモードのカラー切り替えが簡単です
- カラーパレットでよく使用するカラーをクリックすると素早くコードをコピーできます
- OKLCHフォーマットを活用すると、彩度と明度が知覚的に一貫したカラーシステムを設計できます