このツールでできること
HEX・RGB・HSLという3種類のカラーコードを相互に変換できる無料ツールです。カラーピッカーで色を選ぶだけでコードが表示され、補色・類似色・トライアドといった配色も自動で算出します。Web制作やデザイン作業でのちょっとした色の確認に便利です。
- HEX・RGB・HSLをワンタッチで相互変換
- 補色・類似色・トライアドを自動表示
- 140種類以上のCSSカラー名一覧から選択
使い方
- カラーピッカーで色を選ぶか、カラーコードを直接入力します。
- HEX・RGB・HSLの変換結果と配色を確認します。
- 使いたいコードをコピーしてデザインに活用します。
カラーコードの種類
同じ色でも表記方法はいくつかあります。HEXはWeb制作で最も一般的な16進数表記、RGBは光の三原色を数値で表す方式、HSLは色相・彩度・明度で表すため「もう少し明るく」といった調整が直感的に行えます。用途に応じて使い分けると便利です。
カラーコードの比較
| 表記 | 例 | 主な用途 |
|---|---|---|
| HEX | #ff0000 | CSS・HTMLでの色指定 |
| RGB | rgb(255,0,0) | 透明度指定・画像処理 |
| HSL | hsl(0,100%,50%) | 明度・彩度の微調整 |
| カラー名 | red | 手早い色指定 |
よくある質問
- Q. HEXとRGBの違いは何ですか？
- A. どちらも同じ色を表す表記で、HEXは16進数6桁（#ff0000）、RGBは赤・緑・青を0〜255の数値で表します。当ツールはHSLも含めて相互変換できます。
- Q. 補色・類似色とは何ですか？
- A. 補色は色相環で正反対の色でメリハリのある配色に、類似色は隣り合う色でまとまりのある配色になります。入力した色から自動で算出します。
- Q. CSSカラー名とは何ですか？
- A. 「red」「skyblue」などCSSで使える色の英単語名です。140種類以上あり、HEXコードを覚えなくても色を指定できます。
※ 入力した色情報はブラウザ内のみで処理され、サーバーには送信されません。