Color Picker & Converter

カラーピッカー & コンバーター

視覚的に選択するか、任意の値を貼り付けるだけ — HEX、RGB、HSL、OKLCH、OKLAB が同期します。WCAG 2.2 コントラストチェッカーと OKLCH ベースのパレットジェネレーターを搭載。すべてブラウザ内で動作します。

カラーピッカー & コンバーター — TL;DR

視覚的に選択するか、任意の値を貼り付けるだけ — HEX、RGB、HSL、OKLCH、OKLAB が同期します。WCAG 2.2 コントラストチェッカーと OKLCH ベースのパレットジェネレーターを搭載。すべてブラウザ内で動作します。

HEX 値(例:#ff5722)を HEX フィールドに貼り付けると、RGB 行が即座に更新されます。同様に rgb(255 87 34) を RGB フィールドに貼り付けると、HEX、HSL、OKLCH、OKLAB がすべて同期します。すべての対応フォーマット間で双方向の変換が可能です。

OKLCH は CSS Color Module Level 4 のカラースペースで、知覚的明度(L)、彩度(C)、色相(h)を使用します — HSL に似ていますが、知覚的に均一です。同じ L 値の OKLCH 色は、色相が異なっても同じ明るさに見えます。これにより、デザイントークン、生成パレット、アクセシブルなカラーランプが HSL よりもはるかに予測可能になります。すべてのエバーグリーンブラウザ(Chrome 111+、Safari 15.4+、Firefox 113+)が対応しています。

色の値が端末から外に出ることはありません。DevTools → Network を開けば、変換、選択、パレット生成、コントラストチェック中に外部リクエストが 0 であることを確認できます。

HEX
RGB
HSL
OKLCH
OKLAB
名前付き

パレット

WCAG 2.2 コントラスト

テキスト
背景
—
プレビュー
大きな見出しのサンプル
本文テキストのサンプル — いろはにほへと ちりぬるを わかよたれそ つねならむ。

実際のワークフローのために設計

デザインシステムからアクセシビリティ監査まで — 必要なすべてのフォーマットとチェックを 1 か所に。

6 つのカラースペース

HEX(3 / 4 / 6 / 8 桁)、RGB(A)、HSL(A)、OKLCH、OKLAB、CSS 名前付きカラーを相互変換。出力文字列は CSS Color Module Level 4 構文に準拠 — そのままスタイルシートに貼り付け可能です。

WCAG 2.2 コントラストチェッカー

任意の 2 色のコントラスト比を確認し、AA(4.5 : 1)と AAA(7 : 1)について、通常テキストと大きいテキスト両方の合格 / 不合格バッジをワンクリックで表示。計算は W3C のリファレンスに準拠:sRGB の線形化、相対輝度、(L1+0.05)/(L2+0.05) の順で算出します。

EyeDropper — 任意のピクセルをサンプリング

スポイトをクリックすると、画面上の任意の色をサンプリングできます — デザイン、スクリーンショット、写真、他のブラウザタブも対象です。Chromium 系ブラウザではネイティブの EyeDropper API を使用します。

OKLCH ベースのパレット

9 段階のティント & シェードに加えて、補色、トライアド、アナロガスのハーモニーを生成 — OKLCH で算出されているため、各ステップが知覚的に均等な間隔になります(明度が大きく変動する HSL とは異なります)。

プライバシー重視の設計

すべての変換は端末上の JavaScript で実行されます。アップロードもログ記録もなく、第三者への送信もありません — 自分で確認したい場合は DevTools → Network を開いてみてください。

速度のために構築

純粋な JavaScript、フレームワークランタイムなし。コールドロードは gzip 後 50 KB 未満。変換とパレット生成は 5 年前のノート PC でも 1 ミリ秒以内に完了します。

カラーピッカーの使い方

4 通りの開始方法、すべてのフォーマットが同期。

  1. 1

    視覚的に選択

    彩度 / 明度の四角形内をドラッグしてシェードを選び、下の色相バーをスライドしてベースカラーを変更し、アルファスライダーで透明度を調整します。右側のすべてのフォーマットが即座に更新されます。

  2. 2

    任意の値を貼り付け

    HEX(#4f46e5)、RGB(rgb(79 70 229))、HSL(hsl(244 76% 59%))、OKLCH(oklch(53% 0.22 277))、または CSS 名前付きカラー(tomato)を対応する入力欄に貼り付けると、ピッカーや他のフォーマットがすべて同期します。

  3. 3

    スポイトでサンプリング

    スポイトボタンをクリックすると、画面上の任意のピクセルをキャプチャできます — 別のタブ、スクリーンショット、写真、アイコンなど。Chrome、Edge、Opera ではネイティブの EyeDropper API を使用します。

  4. 4

    コピーまたはコントラストをチェック

    任意のフォーマットの横にあるコピーアイコンをクリックすると、クリップボードにコピーされます。または WCAG 2.2 コントラストセクションまでスクロールして、前景 / 背景の組み合わせが通常テキストと大きいテキストの両方で AA または AAA に合格するかを確認できます。

デザイナー、開発者、アクセシビリティ監査担当者のために

4 つの一般的なワークフローに適合するカラーツール。

デザインシステムのトークン作成

ブランドの HEX 値を OKLCH に変換することで、トークンランプの各シェードが同じ知覚的明度ステップを持つようになります。OKLCH の出力をそのまま CSS に貼り付け可能 — プリプロセッサは不要です。

WCAG アクセシビリティ監査

前景 / 背景のペアを入力すると、コントラスト比と AA / AAA バッジが表示されます。リリース前に不合格の組み合わせを発見 — W3C 規定の 4.5 : 1(通常)/ 7 : 1(強化)の閾値に準拠しています。

フロントエンドの CSS 変換

デザイナーのモックアップから受け取った HEX を、Tailwind 設定用の HSL や、モダンなスタイルシート用の OKLCH に変換したい?一度貼り付けるだけで、任意のフォーマットでコピーできます。出力文字列は有効な CSS Color Module Level 4 構文です。

パレットの探索

ベースカラーを選ぶと、知覚的に均等に配置された 9 つのティント & シェードに加えて、補色、トライアド、アナロガスのハーモニーが即座に表示されます — OKLCH で生成されているため、各ステップが均等な明るさに見えます。

100% プライベート — ブラウザ内で動作

色の値が端末から外に出ることはありません。DevTools → Network を開けば、変換、選択、パレット生成、コントラストチェック中に外部リクエストが 0 であることを確認できます。

  • すべての変換(HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB)はあなたの端末上で JavaScript として実行されます — 数式はページのソースで確認可能です。
  • EyeDropper API は明示的にクリックした色のみを返します。ブラウザが許可を管理しており、ページが任意のピクセルを参照することは決してありません。
  • ログイン不要、色の値に関するテレメトリなし、第三者のカラー API なし。サイトはそのままで GDPR に準拠しています。

関連ガイド

デザイナー、開発者、アクセシビリティチームのために厳選したチュートリアル。

よくある質問

HEX を RGB に変換するには?

HEX 値(例:#ff5722)を HEX フィールドに貼り付けると、RGB 行が即座に更新されます。同様に rgb(255 87 34) を RGB フィールドに貼り付けると、HEX、HSL、OKLCH、OKLAB がすべて同期します。すべての対応フォーマット間で双方向の変換が可能です。

OKLCH とは何ですか?なぜ使うべきですか?

OKLCH は CSS Color Module Level 4 のカラースペースで、知覚的明度(L)、彩度(C)、色相(h)を使用します — HSL に似ていますが、知覚的に均一です。同じ L 値の OKLCH 色は、色相が異なっても同じ明るさに見えます。これにより、デザイントークン、生成パレット、アクセシブルなカラーランプが HSL よりもはるかに予測可能になります。すべてのエバーグリーンブラウザ(Chrome 111+、Safari 15.4+、Firefox 113+)が対応しています。

WCAG コントラストの結果は信頼できますか?

はい。WCAG 2.2 §1.4.3 のアルゴリズムを使用しています:各 sRGB チャンネルを線形化し、相対輝度(0.2126·R + 0.7152·G + 0.0722·B)を計算し、(L_lighter + 0.05) / (L_darker + 0.05) を求めます。AA は通常テキストで 4.5 : 1、大きいテキスト(18 pt 以上、または 14 pt 以上の太字)で 3 : 1 を合格とします。AAA はそれぞれ 7 : 1 と 4.5 : 1 です。

画像や他のアプリから色をサンプリングできますか?

はい — スポイトボタンをクリックすると、ブラウザ組み込みの EyeDropper API が起動します。画面上の任意のピクセルをサンプリング可能:他のブラウザタブ、Figma のデザイン、ビデオフレーム、スクリーンショットなど。現在は Chrome、Edge、Opera で対応。Firefox と Safari ではボタンが無効化され、グレースフルにフォールバックします。

サーバーに何か送信されますか?

いいえ。ピッカー、すべての変換、パレットジェネレーター、コントラストチェッカーはすべてブラウザ内で動作します。色の値、画像サンプル、テキストが送信されることは一切ありません。DevTools → Network を開けば、使用中に外部リクエストが 0 であることを確認できます。