カラーツールボックス - 色を1つ選ぶだけで変換・名前・コントラスト・パレット・色覚を一括表示

色を選ぶ

カラーピッカーで選ぶか、HEX（例: #1E90FF / #F00 / 1e90ff）を直接入力できます。

カラー名

—

コントラスト比（対比する色と比較）

対比する色（背景）

メインの色を「前景（文字）」、この色を「背景」としてコントラスト比を計算します。

Aa あ文字サンプル 123

コントラスト比

—

通常テキスト AA（4.5:1）—

通常テキスト AAA（7.0:1）—

大きな文字 AA（3.0:1）—

配色パレット

選んだ色を基準にした濃淡・補色・類似色・トライアド。各スウォッチをクリックするとHEXをコピーします。

色覚シミュレーション

P型・D型・T型・グレースケールでの見え方の目安です。厳密な医学的診断ではありません。

解説

カラーツールボックスは、色に関する複数の作業を「色を1つ選ぶだけ」でまとめて片付けるためのオールインワンツールです。ふだん色を扱うときは、コード変換・カラー名の確認・コントラスト比のチェック・配色づくり・色覚シミュレーションといった作業を別々のツールで何度も同じ色を入力し直しながら行いがちです。本ツールは、上部でメインの色を1つ指定すれば、その色の各種情報を同じ画面に一度に表示します。値は都度コピーでき、専用ツールを行き来する手間がありません。

「変換」では、選んだ色を HEX / RGB / HSL / OKLCH の4形式で同時に表示します。HEX と RGB はWebで最も一般的な指定方法、HSL は色相・彩度・明度で直感的に色を捉えられる形式です。OKLCH は知覚的な均等性に優れた新しい色空間で、明度(L)・彩度(C)・色相(H)を人の感覚に近い形で扱えます。同じ色を複数の形式で見比べることで、CSSやデザインツールへそのまま貼り付けられます。OKLCHは Björn Ottosson の OKLab 変換式で算出しています。

「カラー名」は、選んだ色がCSSの名前付きカラー(148色)に完全一致するかを判定し、一致しない場合はRGBユークリッド距離が最も近い名前を距離とともに提示します。「コントラスト比」は、対比する色を選ぶとWCAG基準の相対輝度(0.2126R+0.7152G+0.0722B)からコントラスト比を求め、通常テキストのAA(4.5:1)/AAA(7.0:1)・大きな文字のAA(3.0:1)の合否を表示します。比は同色の1から黒と白の21までの範囲になります。

「配色パレット」は、基準色から濃淡(同色相の明度違い)・補色・類似色・トライアドを生成し、デザインの起点になる色の組を提案します。「色覚シミュレーション」は、P型・D型・T型・グレースケールでの見え方の目安をスウォッチで並べ、色だけに頼らない配色になっているかの確認に使えます。色覚の見え方は代表的な近似で医学的診断ではなく、重要な情報は形やラベルでも区別するのが安全です。すべての計算は端末内(ブラウザ内)で行い、選んだ色や入力値はどこにも送信されません。オフラインでも動作します。

よくある質問

このツールと個別のカラーツールはどう使い分ければよいですか？

まず1色の全体像をつかみたいとき、複数の指標を同時に見たいときは本ツールが便利です。1つの機能を深掘りしたいとき（例: アルファ付きの8桁HEXや、OKLCHのスライダー操作、色覚シミュレーションの画像変換など）は、関連ツールの各専用ツールをご利用ください。本ツールは一覧性、専用ツールは機能の深さに強みがあります。

OKLCH とは何ですか？ HSL と何が違いますか？

OKLCH は知覚的な均等性を重視した新しい色空間で、L(明度)・C(彩度)・H(色相)で色を表します。HSL は計算が簡単で直感的ですが、同じ明度でも色相によって実際の明るさの感じ方がずれます。OKLCH はLを揃えれば見た目の明るさもほぼ揃うため、階調やテーマカラーを設計しやすいのが利点です。本ツールは Björn Ottosson の OKLab 変換式で算出しています。

コントラスト比はどのように計算していますか？

WCAG 2.x の定義に従い、各色の相対輝度 L（0.2126R + 0.7152G + 0.0722B、各成分はsRGBをガンマ展開した値）を求め、（明るい方 + 0.05）÷（暗い方 + 0.05）で比を計算します。比は最小1（同色）から最大21（黒と白）までの値です。通常テキストはAA 4.5:1・AAA 7.0:1、大きな文字（およそ18pt以上、または14pt太字以上）はAA 3.0:1が目安です。

「近い色」のカラー名はどう決めていますか？

CSSの名前付きカラー148色それぞれとのRGBユークリッド距離（√((ΔR)²+(ΔG)²+(ΔB)²)）を計算し、距離が最小の色名を提示します。完全一致する名前があるときはそれを優先表示します。あくまでRGB空間上での近さで、人の感じる近さと完全には一致しないため、目安としてお使いください。

色覚シミュレーションは正確ですか？

代表的な3×3変換行列とグレースケール（輝度）による近似で、あくまで色だけに頼っていないかを確認するための目安です。実際の見え方には個人差があり、医学的な診断や厳密なシミュレーションではありません。重要な情報は色に加えて形・ラベル・パターンでも区別できるようにするのがおすすめです。

パレットの色をまとめて使うには？

配色パレットの各スウォッチをクリックするとHEXがコピーされます。濃淡は同じ色相で明度を変えた5段階、補色は色相環で正反対、類似色は隣り合う色、トライアドは120°ずつ3等分した色です。用途に応じてベース色＋アクセント色の組み合わせを選んでご利用ください。

HEXは3桁（#F00）でも入力できますか？

はい。3桁の短縮表記（例: #F00）や、先頭の # を省いた入力（例: 1e90ff）も受け付けます。内部では6桁の #RRGGBB に正規化して各指標を計算します。入力途中の不完全な値は無視し、正しく解釈できた時点で表示を更新します。

入力した色はサーバーに送られますか？

送られません。変換・判定・生成のすべてはブラウザ内で完結し、選んだ色や入力値はどこにも送信されません。オフラインでも利用できます。

🌈 カラーツールボックス