カラーコード変換
HEX / RGB / HSL を相互変換。プレビュー・ピッカー・スライダー対応
HSL スライダー
配色の参考
補色
類似色
3つの色表現形式
HEX（16進数）
HEX は # に続く 6 桁の 16 進数（例: #3b82f6）で、2 桁ずつが赤・緑・青の成分（00〜ff）を表します。#f00 のような 3 桁の短縮形（#ff0000 と同等）にも対応しています。CSS やデザインツールで最も一般的な表記で、スタイルシートにそのまま貼り付けられます。
RGB（赤・緑・青）
RGB は赤(R)・緑(G)・青(B)を 0〜255 の整数で表し、CSS では rgb(59, 130, 246) と書きます。ディスプレイの発色原理に対応するため、Canvas 描画や画像処理など、色チャンネルをプログラムで扱う場面に適しています。
HSL（色相・彩度・輝度）
HSL は色相 H（色相環上の角度 0〜360°）、彩度 S（0〜100%）、輝度 L（0〜100%）で色を表し、CSS では hsl(217, 91%, 60%) と書きます。人間の色覚に近いモデルのため、明るさを調整したり補色を求めたりする配色作業に最適です。
代表的な色の対応表
| 色 | HEX | RGB | HSL |
|---|---|---|---|
| 黒 | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| 白 | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 赤 | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| 緑 | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| 青 | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| 黄 | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| シアン | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| マゼンタ | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| オレンジ | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| グレー | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
使い方
いずれかの入力欄に色を入力すると（HEX は #rgb の短縮形や # なしにも対応、RGB は rgb() 関数とカンマ区切りの両方に対応、HSL の % は省略可）、残りの形式がリアルタイムで同期されます。カラーピッカーや HSL スライダーからも操作できます。各形式の「コピー」ボタンで値をクリップボードにコピーできます。配色の参考では補色と類似色を提案し、色見本をクリックするとその色を適用できます。すべての処理はブラウザ内で行われます。