N2
NanToo
デザイン・Web制作

カラーコード変換ツール

HEX・RGB・HSL・HSV・CMYKの相互変換。カラーピッカー、WCAGコントラスト比チェック、配色パレット生成機能付き。Webデザイン・印刷の色指定に。

カラーピッカー

#3B82F6

テキスト推奨色: 白

入力 / 変換エリア

CSSコード

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

コントラスト比チェック

#FFFFFF

3.68:1

コントラスト比

AA 大文字: 合格AA: 不合格AAA 大文字: 不合格AAA: 不合格
テキストサンプル
テキストサンプル

配色パレット

#3B82F6

元の色

このツールについて問い合わせる →

カラーコード変換ツールについて

色の表現方法（HEX/RGB/HSL）

デジタルデザインでは、色を数値で表現するさまざまな方法があります。

  • HEX（16進数）：#RRGGBBの6桁で色を表現。Web制作で最も一般的な形式で、CSSやHTMLで直接使用できます。例：#FF5733はオレンジ系の色です。
  • RGB：赤(Red)・緑(Green)・青(Blue)の光の三原色を0〜255の数値で指定します。ディスプレイが実際に発光する仕組みに対応しており、プログラミングでの色指定に広く使われます。
  • HSL：色相(Hue)・彩度(Saturation)・輝度(Lightness)で表現。人間の感覚に近い直感的なモデルで、「色を少し明るくしたい」「彩度を落としたい」といった調整が容易です。CSSでもhsl()関数として使えます。

このツールでは、これらの形式に加えHSV（PhotoshopやFigmaで使用）とCMYK（印刷用）にもリアルタイム変換できます。

WCAGコントラスト比とアクセシビリティ

WCAG（Web Content Accessibility Guidelines）は、Webコンテンツのアクセシビリティに関する国際的なガイドラインです。テキストと背景のコントラスト比について以下の基準を定めています。

  • AA（通常テキスト）：コントラスト比 4.5:1 以上
  • AA（大きなテキスト）：コントラスト比 3:1 以上
  • AAA（通常テキスト）：コントラスト比 7:1 以上
  • AAA（大きなテキスト）：コントラスト比 4.5:1 以上

コントラスト比は1:1（同色）から21:1（黒と白）の範囲を取ります。このツールのコントラスト比チェッカーを使えば、テキストと背景色の組み合わせがWCAG基準を満たしているか即座に確認できます。

配色パターンの基礎知識

色彩理論に基づく代表的な配色パターンを紹介します。色相環（カラーホイール）上の位置関係で決まります。

  • 補色（Complementary）：色相環で180度反対の色。コントラストが強く、目を引くデザインに適しています。
  • 類似色（Analogous）：色相環で隣り合う色（±30度）。統一感のある穏やかな配色になります。
  • トライアド（Triadic）：色相環で120度ずつ離れた3色。バランスの取れた鮮やかな配色です。
  • 分裂補色（Split-Complementary）：補色の両隣の色を使用。補色ほど強いコントラストはないものの、視覚的に豊かな配色になります。

このツールのパレット機能を使って、ベースカラーからこれらの配色を自動生成し、デザインに活用できます。

よくある質問

Q. HEXとRGBの違いは何ですか？
HEXは16進数（0〜F）で色を表現する方法で、#RRGGBBの形式です。RGBは10進数（0〜255）で赤・緑・青を指定します。表現できる色の範囲は同じで、表記方法が異なるだけです。例えば、#FF0000とrgb(255, 0, 0)はどちらも同じ赤色を表します。HEXはCSSで広く使われ、RGBはプログラミングでの色操作に便利です。
Q. HSLの利点は何ですか？
HSLは色相(H)・彩度(S)・輝度(L)で色を表現するため、人間の感覚に近い直感的な操作が可能です。「もう少し明るく」はLを上げ、「色味を落とす」はSを下げるだけで実現できます。RGBでは3つの値を同時に調整する必要があるのに対し、HSLでは目的に応じた1つのパラメータを動かすだけで済みます。
Q. CMYKが印刷で使われる理由は何ですか？
印刷はインクによる減法混色（光を吸収して色を作る）を使うため、シアン(C)・マゼンタ(M)・イエロー(Y)の3色が基本です。理論上はCMYで黒が作れますが、実際のインクでは完全な黒にならないため、ブラック(K)を追加した4色が使われます。ディスプレイのRGB（加法混色）とは原理が異なるため、画面と印刷で色味が異なることがあります。
Q. コントラスト比4.5:1とはどういう意味ですか？
WCAGが定めるテキストの可読性基準です。前景色と背景色の相対輝度から計算され、1:1（同色で読めない）から21:1（黒と白で最も読みやすい）の範囲です。4.5:1はAA基準で、通常サイズのテキストが十分読みやすいとされるレベルです。視覚障害やロービジョンのユーザーを含め、多くの人がコンテンツを読めるようにするための目安です。

関連記事

色覚多様性とWebアクセシビリティ ― P型・D型・T型の見え方とデザイン実践ガイド

日本人男性の約5%が持つ色覚特性。P型(1型)・D型(2型)・T型(3型)の違いを科学的に解説し、WCAGに基づくアクセシブルなWebデザインの実践手法をシミュレーション図とともに紹介します。

CSS color-mix() と OKLCH — ブランドカラーから自動でホバー/無効色を導く設計

CSS Color Module Level 5 の color-mix() と、知覚均等色空間 OKLCH を組み合わせると、ブランドカラー1つから派生色(ホバー・アクティブ・無効・ボーダー)を数式で自動生成できます。CIE 1931 から OKLCH までの色空間の進化と、実務的な設計パターンを解説します。

WCAG の 4.5:1 コントラスト比はどこから来たのか — 計算式と科学的根拠

WCAGが定める「4.5:1」というコントラスト比には、視力と輝度比の関係に関する科学的根拠があります。計算式(相対輝度の定義)、Weber-Fechner則との関係、AA/AAAの使い分けを一次資料から整理します。

このツールを評価
—(0件)