🎨 カラーコード変換

HEX・RGB・HSL・CMYKカラーコードを相互変換。カラーパレット生成、WCAGコントラスト比チェック、最寄りCSS色名の表示にも対応しています。

最寄りCSS色名:
R
G
B
H
S
L
C
M
Y
K

カラーパレット

補色（コンプリメンタリー）

類似色（アナロガス）

トライアド

分裂補色（スプリットコンプリメンタリー）

WCAGコントラスト比チェッカー

サンプルテキスト Abc 123

コントラスト比
4.55 : 1
AA 通常
AA 大文字
AAA 通常
AAA 大文字

使い方・活用例

  • デザインカンプのHEXカラーコードをRGB値に変換してCSS記述
  • ブランドカラーの色コードを異なる形式（HEX/RGB/HSL）で共有
  • 配色ツールで見つけた色をCSSで使える形式に変換
  • 印刷物用のカラーコードをWeb用の形式に変換

カラーコンバーターとは

カラーコンバーターは色の異なる表現形式を相互変換するツールです。HEX（16進数コード）、RGB（赤緑青の数値）、HSL（色相・彩度・明度）、CMYK（印刷用4色）の4形式に対応しています。デザイナーや開発者が異なる色指定形式を瞬時に変換でき、作業時間を大幅に短縮できます。

使い方ガイド

ツールにアクセスするとカラーピッカーと入力フィールドが表示されます。RGB値（例：255, 0, 0）を入力すると自動的にHEX（#FF0000）、HSL（0°, 100%, 50%）、CMYK（0%, 100%, 100%, 0%）に変換されます。逆にHEX値「#0099FF」を入力しても全形式への変換が可能です。カラーピッカーで視覚的に色を選択し、各形式の値がリアルタイム表示されます。

活用シーン

Webデザイナーが最初にPhotoshopで選んだ色（RGB）をCSSのHEX値に変換する際に活用できます。印刷業者が支給するCMYK値をWeb用RGB値に変換するときも重宝します。UI設計時にHSL値の明度を調整して複数の淡色を生成する作業も効率化できます。

よくある間違いと解決法

初心者がRGBの範囲を誤解することがあります。RGB値は0～255の整数で、256は範囲外です。このツールは入力値の自動検証機能があるため、範囲外の数値は自動修正されます。またHEX値の「#」記号を忘れるユーザーもいますが、このツールは「FF0000」の形式でも認識します。

知っておきたいポイント

HSL形式は色相（0°～360°）、彩度（0%～100%）、明度（0%～100%）で表現されます。同じ色相で明度を変えると、濃淡のバリエーションを簡単に作成できます。CMYK形式は印刷業界標準で、ディスプレイ表示（RGB）と色再現が異なるため変換時に色ずれが生じる可能性があります。このツールは標準的な色空間変換アルゴリズムを使用しており、業界標準の精度を保証します。

よくある質問

カラーコード変換の使い方は？

HEX、RGB、HSLのいずれかの形式でカラーコードを入力すると、他の形式に自動変換されます。カラーピッカーも使えます。

CSSで使えるコードはコピーできますか？

はい。各形式の値をワンクリックでコピーし、CSSにそのまま貼り付けられます。

HEXとRGBの違いは何ですか？

HEXは16進数表記（例: #FF5733）、RGBは10進数表記（例: rgb(255, 87, 51)）です。同じ色を異なる形式で表現しています。

HSLカラーモデルとは何ですか？

HSLは色相(Hue)・彩度(Saturation)・明度(Lightness)で色を指定する形式です。直感的な色調整に適しています。

CMYKとは何ですか？Webで使えますか？

CMYKはシアン・マゼンタ・イエロー・ブラック（キー）の4色で構成される印刷用カラーモデルです。CSSでは直接使用できませんが、本ツールでRGBやHEXに変換してWebで利用できます。

WCAGコントラスト比とは何ですか？

WCAGコントラスト比は、テキスト色と背景色の明るさの差を数値化したものです。AA基準では通常テキストで4.5:1以上、大文字で3:1以上が必要です。AAA基準ではそれぞれ7:1以上、4.5:1以上が求められます。

RGB値の範囲は0～255が標準ですか？

はい、RGB表記はそれぞれのチャンネル（赤・緑・青）が0～255の範囲で表現されます。HEXコードでは00～FFで表記され、両者は等価です（255=FF）。

HSL値の『彩度』と『明度』は具体的に何が違いますか？

彩度（Saturation）は色の鮮やかさで、0%（グレースケール）～100%（最も鮮やか）で表します。明度（Lightness）は色の明るさで、0%（黒）～100%（白）で表示されます。

Web安全色（Websafe Color）とは何ですか？

1990年代のディスプレイで確実に表示される216色（6×6×6のRGB値でそれぞれ0・51・102・153・204・255）を指します。現代では意識する必要がほぼありませんが、レトロデザインで使用されます。

16進法のカラーコードがなぜ6桁（3バイト）なのですか？

RGB各チャンネルに8ビット（0～255）を割り当てているため、16進数で2桁（00～FF）× 3チャンネル = 6桁となります。これにより16,777,216色（256³）を表現できます。

CMYKはなぜWebでは使えないのですか？

CMYKはインク減色法で印刷用に設計されており、ディスプレイはRGB加法混色を使用するため、互換性がなく正確な変換も不可能です。Web用はRGBまたはHEXを使用してください。

同じ16進法コードでもデバイスによって表示色が異なるのはなぜですか？

ディスプレイの色域やキャリブレーション、パネルタイプ（IPS・VA・TNなど）の差異が原因です。正確な色合わせが必要な場合はカラーマネジメント対応のモニターを推奨します。