カラーコード変換
色をHEX・RGB・HSLの各表記で相互に確認・変換できます。カラーピッカーで選ぶか、HEXコードを入力すると、プレビューと各形式の値がすぐに表示されます。CSSやデザインの色指定にどうぞ。
#C8402C
HEX
#C8402CRGB
rgb(200, 64, 44)HSL
hsl(8, 64%, 48%)この色から作る配色
補色
類似色
トライアド
明度バリエーション
色をクリックすると、その色を選び直せます。
使い方
- カラーピッカーで色を選ぶか、HEXコードを入力します。
- HEX・RGB・HSL の各値が表示されます。
- 使いたい形式の「コピー」を押して、CSSなどに貼り付けます。
HEX・RGB・HSLの違い
HEXは #RRGGBB の16進数表記でWebで最も一般的。RGBは赤・緑・青を0〜255で表す形式。HSLは色相・彩度・明度で表すため、「同じ色味で少し明るく」といった調整が直感的に行えます。用途に応じて使い分けると便利です。
よくある質問
- 3桁のHEX（#c84など）も使えますか？
- はい。#RGB の短縮表記も認識し、6桁に展開して各形式へ変換します。
- 入力した値は送信されますか？
- いいえ。変換はすべてブラウザ内で行われ、サーバーへの送信や保存はありません。
- プレビューの文字色が変わるのはなぜ？
- 背景色に対して読みやすいよう、明るさに応じて文字色を自動で黒／白に切り替えています。
- 透明度（アルファ）には対応していますか？
- 現在はHEX・RGB・HSLの不透明色のみに対応しています。