使い方
- カラーコードを入力
変換するカラーコードをHEX、RGB、HSLまたはCMYK形式で入力します。
- 変換を実行
変換するボタンをクリックすると、すべてのカラー形式に同時に変換されます。
- 結果をコピー
変換されたカラーコードをクリックしてクリップボードにコピーし、プレビューで色を確認します。
カラーコード変換とは？
カラーコード変換とは、同じ色をHEX・RGB・HSLなど異なる表記体系へ変換する作業です。モニター画面は光の三原色である赤・緑・青を混ぜて色を作るため、すべての色は最終的にRGB三チャンネルの強度に還元されます。HEXはこのRGB値を16進数6桁（#RRGGBB）に圧縮した表記であり、HSLは人間が知覚する方法に合わせて色相環の角度・彩度・明度で再構成した表記です。
なぜ変換が必要なのか
- CSSの記述 — デザインカンプのHEXコードを受け取り、透明度の調整がしやすいRGBに変換して使います。
- 色の補正 — 明度だけを少し下げたいとき、HSLに変換すればL値ひとつを調整するだけで済みます。
- 共同作業 — デザイナーのFigmaのHEX、開発者のRGB変数、印刷チームの色基準を一致させます。
この変換機はどの形式で入力しても残りの形式を一度に計算し、実際の色をプレビューで表示します。
計算式
HEX → RGBは16進数を2桁ずつ区切って10進数に変換します。
R = parseInt(hex[0:2], 16)、G・Bも同様に計算します。例：#FF5733 → FF=255、57=87、33=51 → RGB(255, 87, 51)。
RGB → HSLはチャンネルを0〜1に正規化したうえで、まず明度を求めます。
L = (max + min) / 2S = delta / (2 − max − min)（L > 0.5のとき）
ここで delta = max − min です。上の例ではmax=1、min=0.2 → L = 0.6 (60%)、S = 0.8/0.8 = 100%、色相角 H ≈ 11° となり、HSL(11°, 100%, 60%) に変換されます。
よくある質問
HEXとRGBの違いは何ですか？
HEXは16進数で色を表現し（#FF5733）、RGBは赤・緑・青の値を0-255の10進数で表現します（255, 87, 51）。同じ色を異なる表記で示す方式です。
HEXコードをRGBにどう変換しますか？
#RRGGBBを2桁ずつ区切り、16進数を10進数に変換します。たとえば#FF5733はFF=255、57=87、33=51なのでRGB(255, 87, 51)になります。各桁は00（0）からFF（255）までのチャンネル強度を表します。
CMYKはどんな場合に使いますか？
CMYKはシアン・マゼンタ・イエロー・ブラックのインクを混ぜる印刷用のカラーモデルです。ウェブや画面では光を加えるRGB/HEXを使い、印刷物の制作時にはインクを重ねるCMYKに変換して使用します。両者の色域が異なるため、画面の色が印刷では少し違って見えることがあります。
HSLカラーモデルの利点は何ですか？
HSLは色相（Hue）、彩度（Saturation）、明度（Lightness）で構成され、直感的に色を調整できます。たとえば明度（L）値だけを下げれば、色調を保ったまま暗い変化色を簡単に作れるため、ホバー効果やカラーパレットの作成に便利です。
HSLの色相（H）・彩度（S）・明度（L）はそれぞれ何を意味しますか？
色相（H）は0〜360度の色相環の角度で、0°は赤、120°は緑、240°は青です。彩度（S）は0〜100%の色の鮮やかさで、0%なら灰色、100%なら最も鮮明な色です。明度（L）は0〜100%の明るさで、0%は黒、100%は白、50%が最も純粋な色になります。
白と黒はどう表記されますか？
白はすべてのチャンネルが最大の#FFFFFF / RGB(255, 255, 255) / HSL(0, 0%, 100%)で、黒はすべてのチャンネルが0の#000000 / RGB(0, 0, 0) / HSL(0, 0%, 0%)です。グレー系は彩度（S）が0%で、明度（L）だけが異なります。
RGB値が0〜255の範囲を超えるとどうなりますか？
各チャンネルは0未満なら0に、255を超えれば255に自動補正（クランプ）されたうえでHEXに変換されます。たとえばRGB(300, -10, 128)はRGB(255, 0, 128)として処理され、#FF0080になります。
変換結果をすぐにコピーできますか？
はい。変換されたHEX・RGB・HSLコードをクリックするとクリップボードにコピーされ、色のプレビューで実際の色を目で確認できるため、CSSやデザインツールにそのまま貼り付けられます。
2026年 最新デバイス対応