🎨
無料カラーピッカー＆パレット生成
色を選択し、HEX/RGB/HSL の間で変換し、調和のとれたパレットを生成します。
読み込み後はオフラインでも動作
HEX
HSV
h217°
s76%
v96%
表示のみRGB
r
g
b
HSL
H
S
L
その他の形式
HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)
WCAG コントラスト
最も近い色名: dodgerblue · ここでは黒い文字のほうが読みやすいです(5.71:1)
白い背景のテキスト3.68:1AA大
黒い背景のテキスト5.71:1AA
#ffffff上の文字3.68:1AA大
濃淡と明暗(50〜950)
カラーパレット
補色
#3b82f6
#f6af3c
三色配色
#3b82f6
#f63c83
#83f63c
類似色
#3ce0f6
#3b82f6
#523cf6
単色
#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd
主な用途
- ウェブデザイン向けカラーピッカーウェブサイト向けに色を選択・生成 — HEX・RGB・HSL値とハーモニーパレット取得。
- ブランディング向けカラーピッカーブランドカラーパレット構築 — プライマリー・セカンダリー・アクセントカラーで統一感。
- ソーシャルメディア向けカラーピッカーSNS投稿・ストーリー・プロフィールデザイン用に魅力的なカラーパレット作成。
- 印刷デザイン向けカラーピッカー印刷物向けに色選択 — チラシ・名刺・パンフレット — 正確な色プレビュー付き。
- プレゼン向けカラーピッカースライドカラースキーム設計 — 読みやすいテキスト色・グラフパレット・統一的なアクセント色選択。
使い方
すべて手書きの変換演算を使ってブラウザ内で直接動作します — 色ライブラリもサーバーとのやり取りも不要です。ブラウザ標準の色入力またはEyeDropper APIで色を選ぶと、ツールが即座に6つの形式に変換すると同時にWCAGコントラスト比を計算し、調和パレットを生成します。
- 1ネイティブAPI経由の色入力ブラウザ内蔵の<input type="color">ウィジェット、またはChromiumベースのブラウザではEyeDropper APIを使って画面上の任意のピクセルをサンプリングできます。どちらの経路も16進数文字列を返し、それが単一の信頼できる情報源となります。
- 2手書きの形式変換ツールは独自の数学関数を使って（外部ライブラリなしで）16進数の値をRGB、HSL、HSV、CMYK、OKLCHに変換します。OKLCHの変換はsRGBチャンネルを線形化し、OKLabの立方根行列を適用してから彩度と色相角を導出します — 現代のCSS Color Level 4出力に一致します。
- 3WCAGコントラスト比の計算相対輝度はWCAG 2.xの式を使って線形化されたRGBチャンネルから計算されます。ツールはその後、純白と純黒に対するコントラスト比を計算し、WCAGの閾値（3:1、4.5:1、7:1）に従ってAA-large、AA、AAA、Failのラベルを付けます。
- 4調和パレットの生成とローカル保存補色、トライアド、類似色、モノクロームのスウォッチは、HSLの色相と明度の値を数学的に回転またはステップさせることで導出されます。保存されたパレットはブラウザのlocalStorageに書き込まれます — 端末の外に出るデータはありません。