カラーコード変換（HEX/RGB/HSL/CMYK）｜配色パレット生成

カラーコード変換ツールは、HEX・RGB・HSL・HSV・CMYKの5つのカラーフォーマットをリアルタイムで相互変換するオンラインツールです。ビジュアルカラーピッカーで直感的に色を選び、全フォーマットのコードを一括コピーできます。

さらに、補色・類似色・トライアドなどの配色パレットを自動生成し、WCAGコントラスト比チェックも内蔵。Webデザイン・CSS開発・プレゼン資料作成など、色を扱うあらゆるシーンで活用できます。

完全ブラウザ内処理のため、入力データがサーバーに送信されることはありません。登録不要で今すぐ利用可能です。

HEX（16進数カラーコード）

Webで最も一般的な色指定形式。#RRGGBBの6桁（または#RGBの3桁短縮形）で表現。各桁は00～FFで赤・緑・青の強さを示す。CSSでは#RRGGBBAA形式で透明度も指定可能。

RGB（Red / Green / Blue）

光の三原色による加法混色モデル。各チャンネル0～255の値で色を指定。CSSではrgb(R,G,B)またはrgba(R,G,B,A)で記述。

HSL（Hue / Saturation / Lightness）

色相(0-360°)・彩度(0-100%)・明度(0-100%)で色を表現。人間の直感に近いカラーモデルで、CSSでも直接サポート。

HSV / HSB（Hue / Saturation / Value）

色相・彩度・明度の別表現。PhotoshopやFigma等のデザインツールで広く使用。HSLとは明度の計算方法が異なる。

CMYK（Cyan / Magenta / Yellow / Key）

印刷用の減法混色モデル。インクの4色で色を表現。Webでは直接使用しないが、印刷入稿時に必要。ブラウザ上の変換は近似値。

コントラスト比

WCAG（Web Content Accessibility Guidelines）に基づく2色間の明度差の比率。AA準拠は4.5:1以上、AAA準拠は7:1以上が必要。

本ツールのカラー変換はすべてJavaScriptで行われ、外部ライブラリに依存しません。以下は主要な変換原理です。

RGB ↔ HEX 変換

RGBの各チャンネル値(0-255)を16進数に変換し結合します。逆変換ではparseInt(hex, 16)で10進数に戻します。

RGB → HSL 変換

RGB値を0-1に正規化し、最大値(max)と最小値(min)から明度L = (max+min)/2を算出。彩度SはLが0.5以下なら(max-min)/(max+min)、超えるなら(max-min)/(2-max-min)。色相Hは最大チャンネルに応じて60°単位で計算。

RGB → CMYK 変換

K(Key) = 1 - max(R/255, G/255, B/255) を基準に、C = (1-R/255-K)/(1-K) 等で算出。ブラウザ上の変換は理論値であり、実際の印刷出力とは異なる場合があります。

コントラスト比計算

WCAG 2.1に基づき、各色の相対輝度L = 0.2126×R' + 0.7152×G' + 0.0722×B'（ガンマ補正済み）を算出し、(L1+0.05)/(L2+0.05)でコントラスト比を求めます。

Q. CMYKの変換結果は印刷で正確ですか？

A. ブラウザ上の変換は理論的な計算値です。実際の印刷ではICCプロファイルやインク特性により色味が異なります。正確な印刷用CMYK値は、Adobe Photoshop等のカラーマネジメント対応ソフトで確認してください。

Q. 透明度（アルファ値）に対応していますか？

A. はい。カラーピッカーの透明度バーで0-100%を指定でき、HEX(#RRGGBBAA)、rgba()、hsla()形式で出力されます。

Q. 配色パレットの色数は変更できますか？

A. 現在は各パレットタイプに最適な色数で固定されています（補色=2色、類似色=5色、トライアド=3色など）。

Q. スマートフォンでも使えますか？

A. はい。カラーピッカーもタッチ操作に完全対応しています。レスポンシブデザインで、どの画面サイズでも快適に使用いただけます。

Q. 入力した色データはサーバーに送信されますか？

A. いいえ。すべての処理はブラウザ内で完結し、データは一切外部に送信されません。お気に入りの保存もブラウザのlocalStorageを使用しています。

• CSS
• SEO対策
• ネットワーク
• セキュリティ
• 動画・画像処理
• テキスト解析・処理
• ビジネス
• SNS・エンタメ
• 生活