カラーコード変換
RGB・HEX・HSL・HSV・CMYKをビジュアルカラーピッカーとコントラストチェッカーで変換
カラーピッカー
プレビュー
カラー形式
カラーパレット
コントラストチェッカー
サンプルテキスト
これは読みやすさテスト用の小さなサンプルテキストです。
このツールについて
カラーコード変換ツールは、RGB・HEX・HSL・HSV・CMYKといった色の表現形式を相互変換できる、デザイナー・開発者向けの無料ツールです。カラーピッカーで直感的に色を選び、補色や類似色などの配色パレットを自動生成し、文字色と背景色のWCAGコントラスト比までチェックできます。Webサイトやアプリのデザイン、ブランドカラーの管理、アクセシビリティ対応の確認に役立ちます。
使い方
- 1 カラーピッカーで色を選ぶか、HEX値を直接入力します。
- 2 RGB・HSL・HSV・CMYKなど各形式の値が同時に表示されます。
- 3 自動生成された配色パレットから補色・類似色を確認します。
- 4 コントラストチェッカーで文字色と背景色の読みやすさを検証します。
仕組みの解説
RGBは赤・緑・青の光を0〜255で混ぜて色を作る方式で、画面表示の基本です。HEXはこのRGBを16進数2桁ずつ並べた表記で、#FF8800なら赤255・緑136・青0を意味します。HSLは色相（Hue 0〜360度）・彩度（Saturation）・明度（Lightness）で色を表し、人間の感覚に近いため微調整がしやすい形式です。HSVは明度の代わりに明るさ（Value）を使います。CMYKはシアン・マゼンタ・イエロー・黒のインク量で、印刷物向けの方式です。コントラスト比は2色の相対輝度の比で計算し、WCAGでは通常文字でAA基準4.5:1以上、AAA基準7:1以上が推奨されます。
よくある質問
HEXとRGBはどう違いますか？
中身は同じ色情報です。RGBは赤緑青を0〜255の10進数で、HEXはそれを16進数2桁ずつにまとめた表記です。#FF0000とrgb(255,0,0)は同じ赤です。
WCAGのコントラスト比AAとは何ですか？
文字の読みやすさの基準で、通常サイズの文字はAA基準で背景との比が4.5:1以上必要です。大きな文字は3:1以上で許容されます。
HSLを使うメリットは何ですか？
色相を保ったまま彩度や明度だけを変えられるため、同系色のバリエーションやホバー時の濃淡を直感的に作れます。
CMYKとRGBで色がずれるのはなぜですか？
RGBは光の加法混色、CMYKはインクの減法混色で表現範囲が異なるためです。画面で鮮やかな色は印刷でくすむことがあります。
補色や類似色とは何ですか？
補色は色相環の反対側にある色でコントラストが強く、類似色は隣り合う色でまとまりのある配色になります。本ツールが自動で算出します。
関連ツール・用途
HEXの仕組みを深く理解したいなら進数変換が役立ちます。デザインの寸法計算には長さの単位換算、Web実装ではpx・rem・emの換算もあわせてご活用ください。