カラーツールボックスの使い方｜1色で変換・コントラスト・配色を一括
公開日：2026年10月20日 更新日：2026年9月15日 運営：シルギア（アナライズギア株式会社） 対象ツール：カラーツールボックス
Webやスライドで色を扱うとき、コード変換・色名の確認・コントラストのチェック・配色づくり・色覚での見え方の確認を、別々のツールで同じ色を入力し直しながら進めた経験はないでしょうか。カラーツールボックスは、上部でメインの色を1つ指定するだけで、その色にまつわる情報を同じ画面にまとめて表示します。この記事では、表示される各値の意味と読み方、実際の数値例、そして専用ツールとの使い分けまでを解説します。
色を1つ選ぶだけで全情報が並ぶ利点
使い方はシンプルです。上部の「色を選ぶ」でカラーピッカーから色を選ぶか、HEXを直接入力します。入力欄は6桁の #1E90FF だけでなく、3桁の短縮表記 #F00 や、先頭の # を省いた 1e90ff も受け付け、内部で6桁の #RRGGBB に正規化してから計算します。入力途中の不完全な値は無視され、正しく解釈できた時点で表示が更新されます。
色を確定した瞬間に、カラーコード変換・カラー名・コントラスト比・配色パレット・色覚シミュレーションがすべて同じ画面にそろいます。各値の横には「コピー」があり、CSSやデザインツールへそのまま貼り付けられます。値を1か所で見比べられるので、たとえば「この色は明るすぎて白背景の文字に使えない」といった判断を、ツールを行き来せずに一度で下せます。すべての計算はブラウザ内で完結し、選んだ色はどこにも送信されません。
HEX・RGB・HSL・OKLCHの違いと使い分け
変換欄では、同じ色を4つの形式で同時に表示します。例として #1E90FF（DodgerBlue）を入力すると、RGBは rgb(30, 144, 255)、HSLは hsl(210, 100%, 56%) と表示されます。同じ1つの色が、表現方法によってまったく違う数字になる点がポイントです。
- HEX / RGB：Webで最も一般的。RGBは赤・緑・青を各0〜255で表し、機械的で扱いやすい形式です。
- HSL：色相(H)・彩度(S)・明度(L)で表し、人が直感的に色を捉えやすい形式。色相だけずらして関連色を作る、といった操作に向きます。
- OKLCH：知覚的な均等性に優れた新しい色空間。明度(L)を揃えれば見た目の明るさもほぼ揃うため、テーマカラーや階調の設計がしやすいのが利点です。
HSLは計算が簡単な反面、同じLでも色相によって実際の明るさの感じ方がずれます。均一な濃淡セットを作りたいときはOKLCHのLを基準にすると破綻しにくくなります。
コントラスト比とWCAG(AA/AAA)の読み方
コントラスト欄では、対比する色（背景）をもう1つ選ぶと、メイン色を前景としたコントラスト比が表示されます。比はWCAGの相対輝度 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 です。実際に確かめると、白背景に対して #1E90FF の文字は比が約 3.24 で、大きな文字のAAは満たしますが通常テキストのAAには届きません。同じ色を黒背景に置くと約 6.49 に上がり、通常テキストのAAをクリアします。白背景で通常テキストAAを確実に満たしたいなら、たとえば #767676 が約4.54、AAAを狙うなら #595959 が約7.00です。「⇄ 入替」で前景と背景を反転できるので、文字色と背景色の両方向で確認しておくと安心です。
配色パレット(濃淡・補色・類似色・トライアド)の活用
配色パレットは、選んだ色を基準に4系統の候補を自動生成します。各スウォッチをクリックするとHEXがコピーされます。
- 濃淡：同じ色相で明度を変えた5段階。ボタンのホバー色や背景の階調づくりに使えます。
- 補色：色相環で正反対の色。アクセントとして目立たせたいときに向きます。
- 類似色：隣り合う色。まとまりのある落ち着いた配色になります。
- トライアド：色相環を120°ずつ3等分した色。バランスよく彩りを付けたいときに便利です。
ベースとなる色を1つ決め、そこから濃淡でUIの下地を、補色やトライアドでアクセントを選ぶ、という流れにすると配色の起点を素早く作れます。
カラー名と色覚シミュレーションの意味
カラー名欄は、選んだ色がCSSの名前付きカラー148色に完全一致するかを判定し、一致しない場合はRGBユークリッド距離（√((ΔR)²+(ΔG)²+(ΔB)²)）が最も近い名前を距離つきで示します。あくまでRGB空間上の近さなので、人が感じる近さとは完全には一致しません。目安として使ってください。
色覚シミュレーションは、P型・D型・T型・グレースケールでの見え方の目安を代表的な近似で並べます。これは医学的な診断ではなく、配色が色の違いだけに頼っていないかを確認するためのものです。シミュレーション上で区別がつきにくくなる組み合わせは、色に加えて形・ラベル・パターンでも区別できるよう設計しておくと安全です。
専用ツールとの使い分け
本ツールの強みは一覧性です。まず1色の全体像をつかみたいときや、複数の指標を同時に見たいときに向いています。一方で、1つの機能を深く使いたいときは各専用ツールが便利です。アルファ付き8桁HEXの細かな変換や複数色の一括変換ならカラーコード変換、対比色を細かく調整しながら合否を追い込むならコントラスト比チェッカー、名前と近似候補を掘り下げるならCSSカラー名変換、OKLCHをスライダーで微調整するならOKLCH変換、画像を読み込んで色覚での見え方を確かめるなら色覚シミュレーションが適します。本ツールで当たりを付けてから専用ツールで詰める、という順番にすると効率よく作業できます。