日本語English

カラー変換・コントラスト・パレット（Color Studio）

色を 1 つ入力するだけで、HEX・RGB・HSL・HWB・OKLCH・CMYK（概算）へ即時変換。背景色との WCAG コントラスト比を AA/AAA で判定し、補色・トライアドなどの配色や 50〜950 の OKLCH スケールを作って、CSS 変数や Tailwind 設定として書き出せます。色はこの端末の外へ送信されません。

端末内で処理・アップロードなし

ファイルや入力内容はお使いの端末（ブラウザ）の中だけで処理され、サーバーへは送信されません。

HEX・rgb()・hsl()・hwb()・oklch()・cmyk()・色名。透明度（アルファ）は使えません。

変換≈ dodgerblue
HEX#3b82f6
RGBrgb(59 130 246)
HSLhsl(217 91% 60%)
HWBhwb(217 23% 4%)
OKLCHoklch(62.3% 0.188 259.8)
CMYK（概算）cmyk(76% 47% 0% 4%)

CMYK は ICC プロファイルを使わない概算値です。印刷の色合わせには使えません。

最も近い CSS の色名
dodgerblue
明度 L
62.3%
彩度 C
0.188
色相 h
259.8°

使い方

  1. 上部の入力欄に色を入力します（#3b82f6・rgb(59 130 246)・hsl(217 91% 60%)・oklch(62% 0.19 260)・cmyk(76% 47% 0% 4%)・royalblue など）。カラーピッカーや、対応ブラウザではスポイトでも選べます。

  2. 「変換」タブで各形式の値を確認し、コピーします。最も近い CSS の色名も表示されます。

  3. 「コントラスト」タブで背景色を指定すると、通常文字・大きな文字・UI 部品の WCAG 判定と APCA Lc が出ます。不合格のときは、色味を保ったまま基準に届く文字色の候補が提案されます。

  4. 「パレット」タブで配色（補色・類似色・トライアドなど）、50〜950 の OKLCH スケール、明るい側・暗い側の段階を作り、色名をクリックしてコピーするか、CSS 変数・JSON・Tailwind 形式で書き出します。

  5. 「色覚」タブで、複数の色が P 型・D 型・T 型・全色盲でどう見えるか、区別しにくい組み合わせはどれかを確認します。

できること

6 形式の入力と相互変換

HEX（3/6 桁）、rgb()、hsl()、hwb()、oklch()、cmyk() と CSS の色名 148 種を入力できます。どの形式で入力しても、ほかの形式へすぐ変換してコピーできます。アルファ（透明度）には対応していません。

WCAG 2.x と APCA を並べて確認

コントラスト比は相対輝度から計算し、4.5:1・3:1・7:1 の基準に未達の値を切り上げて合格にしません（4.499 は 4.49 と表示）。APCA の Lc（W3 0.0.98G-4g の係数）は参考値として併記します。

OKLCH で作る配色とスケール

色相の回転と明度の段階づけを知覚均等な OKLCH で行うため、青だけ暗く見えるといった偏りが出にくくなります。sRGB に収まらない色は、明度と色相を保ったまま彩度を下げて収めます。

色覚の違いを疑似体験

Machado ら（2009）の行列を線形 RGB に適用し、P 型・D 型・T 型（重度）と全色盲を並べて表示。OKLab 上の距離が 0.04 未満になる、区別しにくい組み合わせを一覧にします。

書き出しは 4 形式

CSS カスタムプロパティ、JSON、Tailwind v4 の @theme、Tailwind v3 の設定オブジェクトに対応。名前を付けてコピーするか、ファイルとして保存できます。

こんなときに

  • デザインカンプの色を CSS で使える HEX・HSL・OKLCH に変換したい
  • ボタンや本文の文字色が WCAG 2.x の AA を満たしているか確かめたい
  • ブランドカラーから Tailwind 用の 50〜950 のカラースケールを作りたい
  • グラフの系列色が色覚の違いでも区別できるかを事前に確認したい
  • 画面上の色をスポイトで拾って、そのままコード用の値にしたい

対応状況

機能対応補足
HEX / RGB / HSL / HWB / OKLCH の相互変換対応入力は CSS の構文（カンマ・スペース区切りどちらも可）
CMYK への変換一部対応ICC プロファイルを使わない単純な計算の概算値。印刷の色合わせには使えません
CSS の色名（148 種）対応最も近い色名の表示にも対応
WCAG 2.x コントラスト判定対応通常文字・大きな文字・UI 部品（AA/AAA）
APCA Lc一部対応参考値。WCAG 3 はまだ草案で、適合判定の基準にはなりません
色覚シミュレーション一部対応重度（1 色型・2 色型）の近似モデル。個人差や軽度の見え方は再現できません
スポイトで画面の色を取得一部対応EyeDropper API 対応ブラウザ（Chrome・Edge など）のみ。Firefox・Safari では使えません
アルファ（透明度）・Display P3・LAB/LCH など sRGB 以外の色空間非対応入力・出力とも sRGB のみ。透明度を含む値は読み込めません
画像から色を抽出非対応画像の読み込みには対応していません（スポイトで画面上の色は取得できます）
オフラインでの利用対応一度開いたあとは通信なしで動作

制限・注意事項

  • 色の指定は sRGB のみで、アルファ値（rgba() や #rrggbbaa）は読み込めません。
  • パレットの色数は最大 24 色（色覚シミュレーションの入力リスト）です。
  • OKLCH の出力は小数 1〜3 桁に丸めて表示するため、鮮やかな青では逆変換すると 8bit 値で数段ずれることがあります。
  • CMYK は概算値で、印刷物の色を保証しません。

プライバシーと安全性

入力した色・書き出した内容はすべてこの端末のブラウザ内で処理し、外部へ送信しません。スポイトで取得した色もブラウザの中だけで扱います。

よくある質問

HEX を HSL や OKLCH に変換するには？
入力欄に #3b82f6 のように HEX を入れるだけで、「変換」タブに RGB・HSL・HWB・OKLCH・CMYK がまとめて表示され、ワンクリックでコピーできます。
WCAG の AA と AAA はコントラスト比いくつ必要ですか？
通常の文字は AA が 4.5:1、AAA が 7:1。大きな文字（目安は 24px 以上、または太字 18.66px 以上）は AA が 3:1、AAA が 4.5:1、UI 部品やアイコンの境界は 3:1 です。このツールは未達の値を切り上げて合格にしません。
APCA の Lc は WCAG の代わりに使えますか？
いいえ。APCA は WCAG 3 の草案で検討されている手法で、現行の WCAG 2.x の適合基準にはなりません。このツールでは文字の見やすさを補助的に見る参考値として表示します。
OKLCH で配色を作る利点は何ですか？
OKLCH は明るさ・鮮やかさ・色相が知覚に近い形で分かれているため、色相を回しても明るさが揃い、50〜950 のような段階も均等に見えやすくなります。HSL では同じ明度でも黄色が明るく青が暗く見えます。
スポイトが表示されないのはなぜですか？
画面の色を取得する EyeDropper API は Chrome や Edge など一部のブラウザだけが対応しています。Firefox・Safari では表示されないため、カラーピッカーか直接入力を使ってください。

関連ツール

favicon・PWA・SNS画像一式生成

1 枚の画像（または文字・絵文字）から、favicon.ico・apple-touch-icon・Android/PWA 用・maskable・OGP 画像と、manifest・head に貼るコードまでまとめて作れます。実寸のぼやけ確認つきで、画像はブラウザの外へ出ません。

画像一括リサイズ

画像をまとめてドロップして、幅・長辺・枠への切り抜きなど好きな方法で一括リサイズ。1 枚から 320・640・1280 のように複数サイズを一度に作り、srcset の HTML までコピーできます。画像はサーバーへ送信されません。

画像圧縮

画像をドロップするだけで、画質を保ったまま一括で軽量化。WebP・AVIF への変換やリサイズ、圧縮前後の見比べもできます。画像はサーバーへ送信されません。

画像形式変換

先に変換先の形式を選び、画像をドロップするだけで一括変換。形式ごとの画質やロスレス WebP、透過部分の背景色、出力ファイル名まで指定でき、画像はサーバーへ送信されません。

トリミング・余白・キャンバス調整

ドラッグで範囲を決めてトリミングし、回転・傾き補正・余白の追加まで 1 画面で。X ヘッダーや Instagram の推奨サイズにそのまま書き出せます。画像はサーバーへ送信されません。

画像エディター

スクショや写真に注釈を入れ、見せられない部分を確実に隠し、色を整えて書き出すまでを 1 画面で。手順書・不具合報告・SNS 投稿向けです。画像はサーバーへ送信されず、書き出した画像にメタデータは残りません。

最終更新: