カラーコード変換ツール

HEX・RGB・HSL・HSV・CMYK を相互変換。WCAGコントラスト比、配色パレット、色覚シミュレーション付き。

100%
RGB チャンネル
HSL チャンネル
WCAG コントラスト比チェッカー
前景色(テキスト)
背景色
大見出しテキスト
本文テキスト。WCAG 2.2 のコントラスト比に基づき、テキストの視認性を評価します。日本語(漢字・かな)と英数字の両方で確認できます。
本文テキスト(太字)
コントラスト比
8.59
21:1 が最大
通常テキスト (4.5+)
AA Pass
AAA Pass
大きいテキスト (3+)
AA Pass
AAA Pass
配色パレット自動生成
明度スケール(Tailwind 風 50〜950)
クリックでその色を選択。0 が最も明るく、1000 が最も暗い。
色覚シミュレーション
CSS 名前付き色(クリックで選択)

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

カラーピッカーで色を選ぶか、HEX 値を直接入力すると、RGB / HSL / HSV / CMYK / Tailwind 風スケール / CSS 変数など主要な形式に同時変換されます。各形式はクリックでコピー可能。

WCAG コントラストチェック: 前景色と背景色の組み合わせが、Web アクセシビリティガイドライン WCAG 2.2 の AA / AAA 基準(通常テキスト 4.5:1 / 大きいテキスト 3:1)を満たすか自動判定します。

配色パレット: 色相環理論に基づく補色・類似色・トライアド・テトラード・スプリット補色・単色の 6 種類のハーモニーを生成。デザインのアクセントカラーや UI の差し色に。

色覚シミュレーション: P型(赤色弱)・D型(緑色弱)・T型(青色弱)・1色覚での見え方を確認。アクセシビリティ配慮の UI デザインに役立ちます。