ToolActToolAct

カラーピッカー

オンラインカラーピッカーツール、HEX/RGB/HSL形式の変換、配色スキームの生成

カラーを選択
#2563eb
カラーを入力
最近使用した色
履歴なし
カラーフォーマット
HEX#2563eb
RGBrgb(37, 99, 235)
HSLhsl(217, 91%, 53%)
配色スキーム
補色
類似色
三等分色
分裂補色
明暗変化
明るい色調
暗い色調

カラーピッカーとは？

カラーピッカーは、デザインやフロントエンド開発で使う色を選び、確認し、形式変換するためのツールです。同じ色でも複数の表記があります。HEX は短く CSS でよく使われ、RGB は赤・緑・青のチャンネル値を表し、HSL は色相、彩度、明度で表すため、明るさや彩度を調整した配色づくりに向いています。このツールは、ブランドカラーをコードに変換する、色モデルを比較する、主色から小さなパレットを作る、補色や類似色を確認する場面で役立ちます。色選びは見た目だけでなく、コントラスト、可読性、アクセシビリティ、印刷結果、画面のキャリブレーションにも関係します。重要な UI 色は最終背景で確認してください。

使い方

使い方

  1. カラーピッカーをクリックして色を選択するか、入力フィールドにカラーコードを入力します
  2. HEX、RGB、HSL 形式での変換結果を確認できます
  3. 各形式横のコピーボタンでカラーコードをコピーできます
  4. 配色スキームから補色や類似色などの組み合わせの提案を確認できます
  5. シェード・ティントで同じ色の明暗バリエーションを確認できます

色に関するヒント

  • テキスト・アイコン・コントロールに色を使う前にコントラストを確認しましょう。見た目に良い色でもアクセシビリティ要件を満たさない場合があります。
  • 明度や彩度を調整するときは HSL、CSS やデザイントークンにコピーするときは HEX か RGB を使うと便利です。

利用シーン

HEX・RGB・HSLを相互変換しながら色を選ぶネイティブのカラーピッカーを使うかHEX・rgb()・hsl()の値を入力し、CSSやデザイントークン、ドキュメント、引き継ぎ資料向けに各形式の等価値をコピーします。選択した色はページ内で3つの形式に変換されますが、サーバーに送信されないため、未公開のブランドパレットや社内カラーも安全にサンプリング・変換できます。
ベースカラーからパレットを構築する補色・類似色・三等分色・分裂補色・明るい色調・暗い色調のスウォッチを活用して、UIステートやチャートのアクセント、バッジカラー、ブランドに近いバリエーションを探索します。コントラストやスケール、ブランドの制約を確認したうえで、生成結果をCSSやデザインファイル、スライド、チケットにコピーできます。HSLの回転や明度のグラデーションはローカルで計算されるため、ベースの色相をアップロードせずに配色を試せます。
ローカルのカラーヒストリーを活用するページはlocalStorageに最近の色を保存し、再利用やクリアが可能です。フルのデザインツールを開かなくても複数の候補色を比較できます。選択した色はローカル履歴以外に保存・送信されないため、共有端末で機密性の高いブランドカラーやクライアント提供のパレットを安全に試すことができます。
アクセシビリティのコントラスト比を確認する選択した前景色と背景色のスウォッチを組み合わせ、表示されるコントラスト比を読み取ります。UIテキストやバッジ、チャートがWCAG AAまたはAAAの基準を満たしているかを、スタイルシートに反映する前に確認できます。コントラスト比はページ内でWCAGの相対輝度式に基づいて計算されるため、オフラインでチェックでき、2つの色がブラウザセッション外に出ることはありません。
3つのCSS対応フォーマットで色をエクスポートする同じ色をHEX・rgb()・hsl()としてコピーし、デザイントークンやコンポーネントCSS、メールテンプレートがそれぞれの周囲のコードベースに合った形式を使えるようにします。チャンネル変換はページ内で行われ、選択した色は外部サービスに送信されないため、サードパーティのカラーAPIを介さずに独自のパレットを複数形式にエクスポートできます。

仕組み

本ツールのすべての値はIEC 61966-2-1で定義されたsRGB色空間に属します。これはCSSの16進数リテラル、rgb()関数、および<canvas>の読み戻しにおけるデフォルトの色空間です。HEX #RRGGBBは24ビットのパックド整数（チャンネルあたり8ビット、0〜255）であり、HEX #RRGGBBAAはアルファバイトを追加します。rgb()/rgba()は整数または百分率で同じチャンネルを公開し、hsl()/hsla()は色相を度[0, 360)、彩度と明度を[0%, 100%]とする円筒座標に切り替えます。RGB→HSL変換ではL=(max+min)/2、S=(max-min)/(1-|2L-1|)（非ゼロクロマの場合）、Hは最大値を取るチャンネルに応じた6区分の区分別公式で求めます。逆のHSL→RGB変換では、標準的なt=L<0.5 ? L(1+S) : L+S-LSアルゴリズムを使用し、各チャンネルを0〜255にスケールバックします。 ライブピッカーはネイティブの<input type="color">要素を使用しており、対応ブラウザではEyeDropper API（Chrome 95+、Edge 95+。2026年時点ではSafari/Firefoxは非対応）も公開されます。EyeDropperはOSレベルの画面サンプリングをトリガーし、sRGBの16進文字列を返しますが、クロスオリジンiframeやDRM保護されたサーフェス内のサンプリングはできません。パレット生成ではHSL色相を回転させます。補色は+180度、三等分色は±120度、類似色は±30度、分裂補色は+150度および+210度です。明るい色調と暗い色調は明度を一定の増分で変化させ（通常、明るい色調は白方向に+10%、暗い色調は黒方向に-10%）、色相と彩度は一定に保ちます。 コントラストはWCAG 2.1 SC 1.4.3/1.4.6に従います。各チャンネルはsRGB伝達関数の区分別ガンマデコード（0.03928未満は線形セグメント、それ以上は2.4乗）を適用し、相対輝度の重み付け0.2126R+0.7152G+0.0722Bで合成し、比率は(L_lighter+0.05)/(L_darker+0.05)で算出します。しきい値はAA通常テキストで4.5:1、AA大きなテキストとUIコンポーネントで3:1、AAAで7:1です。sRGBはチャンネルあたり8ビットの空間であるため、Display P3（Apple）やRec. 2020を使用するワイドガモットディスプレイでは、同じHEXコードでも primaries がはっきりと鮮やかに表示される場合があります。デバイス横断のカラークリティカルな作業では、生のRGBトリプレットに頼るのではなく、プロファイルを付与してください。

  • IEC 61966-2-1に基づくsRGB色空間。チャンネルあたり8ビット、合計16,777,216色を表現可能。
  • HSL→RGBではt=L<0.5 ? L(1+S) : L+S-LSを計算し、チャンネルごとのhue2rgb()ルックアップで変換。
  • EyeDropper APIはChrome/Edge 95以上かつユーザージェスチャーが必要。クロスオリジンiframeサーフェスはブロックされる。
  • WCAGコントラスト：sRGBをガンマデコードし、輝度を0.2126R+0.7152G+0.0722Bで重み付け、(L1+0.05)/(L2+0.05)を算出。
  • 補色=色相+180度、三等分色=±120度、類似色=±30度、分裂補色=+150/+210度。
  • canvas.getImageDataはUint8ClampedArrayのRGBAピクセルを返すが、キャンバスが同一オリジンである必要がある（tainted画像不可）。
  • Display P3/Rec. 2020ワイドガモットモニターは同じHEXでもより強い primaries で描画。カラークリティカルな作業にはプロファイルを付与。

使用例

ブランドカラーを選んで 3 つの形式でコピー

選択色:  Tailwind blue-600
HEX:     #2563eb
RGB:     rgb(37, 99, 235)
HSL:     hsl(217, 91%, 53%)

周囲のコードに合わせて好きな形式をコピーします。3 つの値はすべて
同じ sRGB の色 (IEC 61966-2-1、チャンネルごとに 8 ビット) を表し、
ページ上では標準的な RGB <-> HSL の数式で相互変換しています。

補色の配色を生成

ベース:       #2563eb (青)
補色:         #eb7a25 (オレンジ)   色相 +180 度
類似色 1:     #5a25eb (バイオレット) 色相 +60 度
類似色 2:     #256beb (アジュール) 色相 -30 度
トライアド 1: #25eb56 (緑)         色相 +120 度
トライアド 2: #eb2525 (赤)         色相 -120 度

補色は強いコントラストのアクセントに、類似色は調和のとれた背景に、
トライアドは鮮やかなイラストに向きます。明度と彩度は固定したまま、
色相だけを回転させています。

公開前に WCAG コントラストを確認

前景: #1f2937 (gray-800、相対輝度 0.022)
背景: #ffffff (白、    相対輝度 1.000)

コントラスト比: (1.000 + 0.05) / (0.022 + 0.05) = 14.5:1

通常テキストの WCAG AAA (>= 7:1)、大きいテキスト (>= 4.5:1) を満たし、
UI コンポーネントの 3:1 もクリアします。本番に出すすべての
テキストと背景の組み合わせで同じチェックを行いましょう。
ページでは sRGB のピースワイズ伝達関数 (ガンマデコード、
重み 0.2126R + 0.7152G + 0.0722B) で相対輝度を計算しています。

よくある質問

どのカラーフォーマットを表示しますか？

HEX（#RRGGBB）、RGB（rgb(R, G, B)）、HSL（hsl(H, S%, L%)）です。さらに補色、類似色、トライアド、スプリットコンプリメンタリーのカラースキームと、選択した色をベースとしたティント（明色）とシェード（暗色）も表示します。

HSLとHSVの違いは何ですか？

どちらも色相（0～360°）、彩度、明度に類似した成分に分解します。HSLの第3次元は輝度で、50%が最も彩度が高く、0%が黒、100%が白です。HSVの第3次元は明度で、100%が最も彩度が高く、0%が黒で、白はありません。HSLはティントとシェードに直感的で、HSVは画家の絵の具の混合に近いです。

色変換はどの程度正確ですか？

HEX、RGB、HSLは正確な数学的変換であり、すべて同じsRGB色を表現します。ページでは標準的な公式を使ってこれらを変換しており、精度の損失はありません。

同じHEXカラーはすべての画面で同じに見えますか？

いいえ。sRGBはWebのデフォルトカラースペースですが、カラーマネジメントなしの広色域ディスプレイ（P3、Adobe RGB）では同じHEXがより彩度が高く描画されることがあります。キャリブレーションも変動要因です。重要な色、特にブランディング作業では、ターゲットデバイスでテストしてください。

カラースキームはどのように生成されますか？

スキームは彩度と輝度を一定に保ちながらHSLの色相を回転させます。補色は+180°、トライアドは+120°/+240°、類似色は±30°、スプリットコンプリメンタリーは+150°/+210°です。ティントは輝度を100%（白）に向けて段階的に上げ、シェードは0%（黒）に向けて段階的に下げます。

カラーピッカーは画面の色専用ですか？

sRGBカラースペースで動作するため、Webや一般消費者向け画面に適したモデルです。変換は標準的で、CSSやUIデザイン作業向けに十分テストされています。

何かアップロードされますか？

いいえ。ページは純粋にブラウザのJavaScriptで動作します。色の値が保存されたり送信されたりすることはありません。

関連ツール

グラデーション生成器

オンラインCSSグラデーション生成ツール。リニアグラデーション、ラジアルグラデーション背景を作成。色を視覚的に調整し、ワンクリックでCSSコードをコピー。

単色背景ジェネレーター

オンラインで単色背景画像を生成。カラーとサイズをカスタマイズ、プリセット対応（1080p、2K、4K）、PNG/JPGでダウンロード。ブラウザで処理、プライバシー保護。

画面テスト

オンライン画面テストツール。ドット抜け、輝点、バックライト漏れを検出。複数の単色テスト、コントラストテストでディスプレイ品質を評価。

画像グレースケール変換ツール

オンライン画像モノクロ変換ツール。カラー画像をグレースケール効果に変換。一括処理対応、ブラウザローカル処理、プライバシー保護。

QRコード生成器

オンラインQRコード生成ツール。テキスト、URL、名刺など複数タイプ対応。スタイル、色、サイズをカスタマイズし、ワンクリックで高画質画像をダウンロード。

バーコード生成器

オンラインバーコード生成器。CODE128、EAN13、EAN8、UPC、CODE39、ITF14形式に対応。色やサイズをカスタマイズし、PNGまたはSVG形式でバーコードを生成・ダウンロード。