デザイン・Web制作

カラーコード変換ツール

HEX・RGB・HSL・HSV・CMYKを相互変換。編集値を保持した連続入力、WCAG 2.2コントラスト比、黒白推奨色、配色パレットに対応。

登録不要

カラーピッカー

推奨テキスト色: 黒

黒 5.71:1 / 白 3.68:1

入力 / 変換エリア

HEX

RGB

HSL

HSV

CMYK

CSSコード

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

コントラスト比チェック

#FFFFFF

3.68:1

コントラスト比

AA 大きな文字: 合格AA 通常文字: 不合格AAA 大きな文字: 不合格AAA 通常文字: 不合格

配色パレット

#3B82F6

元の色

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

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

カラーコード変換ツールの使い方

  1. HEX欄、カラーピッカー、またはRGB・HSL・HSV・CMYKの数値欄で色を指定します。
  2. 同じ色を表す各形式とCSSコードが自動で更新されます。
  3. 必要なCSSコードをコピーし、Web制作やデザイン作業へ利用します。
  4. 必要に応じて比較色とのコントラスト比や、色相環を基にした配色候補を確認します。

入力と計算はブラウザ内で行われ、このツールから色データをサーバーへ保存しません。

HEX・RGB・HSL・HSVの違い

  • HEX：RGBを16進数で表す形式です。このツールは#RGBと#RRGGBBを受け付け、6桁の大文字で出力します。
  • RGB：赤・緑・青を0〜255の整数で指定します。
  • HSL：色相・彩度・明度を指定します。色相は0〜359度、彩度と明度は0〜100%です。
  • HSV：色相・彩度・明るさを指定します。色相は0〜359度、彩度と明るさは0〜100%です。

アルファ（透明度）は扱いません。CSSコードは互換性の広い従来形式のrgb()とhsl()で出力します。

変換精度とCMYKの制限

画面では扱いやすさを優先し、RGB・HSL・HSV・CMYKの各成分を整数へ丸めます。そのため、ある形式から別の形式へ変換して戻すと、成分値が数単位ずれる場合があります。

CMYKはICCプロファイルを使用しない概算です。印刷機、用紙、インク、プロファイルによる色域や総インキ量は反映しないため、入稿値や色校正の代わりにはなりません。実際の印刷物は制作環境で指定されたプロファイルを使って確認してください。

WCAG 2.2のコントラスト比

WCAG 2.2では、テキストと背景のコントラスト比について、通常文字はAA 4.5:1以上・AAA 7:1以上、大きな文字はAA 3:1以上・AAA 4.5:1以上を基準としています。

このツールは指定した2色の相対輝度から比率を計算します。実際の適合性は文字サイズ・太さ・画像上の文字・状態変化なども含めて確認してください。「推奨テキスト色」は現在色に対して黒と白のうちコントラスト比が高い方を示します。

配色パレットの見方

  • 補色：色相環で180度反対の色です。
  • 類似色：基準色から色相を前後30度ずらした色です。
  • トライアド：基準色から120度と240度ずらした色です。
  • 分裂補色：基準色から150度と210度ずらした色です。

彩度が0%の無彩色では色相差が見た目に表れません。候補色を押すと、その色を現在色に設定できます。

よくある質問

Q. HEXは3桁と6桁のどちらを入力できますか？
#RGBと#RRGGBBの両方を入力できます。先頭の#は省略できます。出力は常に#RRGGBBの6桁・大文字です。4桁・8桁のアルファ付きHEXには対応していません。
Q. HSLやCMYKを順番に入力しても値は保持されますか？
はい。例えば黒の状態で先にCMYKのCを100へ変え、その後Kを0へ変える操作でもCの値を保持します。彩度0%のHSLやHSVで先に色相を決める操作にも対応しています。別の色モデルを編集した時点で、そのモデルを基準に他形式を再計算します。
Q. CMYK値をそのまま印刷入稿に使えますか？
推奨しません。このツールのCMYKはICCプロファイルを使わない数式上の概算です。印刷会社の指定プロファイル、総インキ量、用紙や印刷条件を反映しないため、入稿前は制作ソフトと印刷会社の基準で確認してください。
Q. コントラスト比が合格ならWCAG 2.2に適合しますか？
コントラストに関する一部の基準を確認できますが、ページ全体の適合を保証するものではありません。文字サイズ、太さ、フォーカス表示、非テキスト要素、操作状態なども個別に確認する必要があります。

関連記事

WebGPU はなぜ速いのか ― WebGL との違い、GPUDevice、Pipeline、WGSLを読む

WebGPUはブラウザから現代的なGPU機能を使うためのAPIです。WebGLとの違い、GPUAdapter/GPUDevice、Render Pipeline、Compute Pipeline、WGSL、対応ブラウザとフォールバック設計を整理します。

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

色の見え方には個人差があります。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件)