カラーコード変換
HEX、RGB、HSL間での色コード変換を行います。色の可視化プレビューも表示します。
色コード入力
カンマ区切りの3つの数値（0〜255）
色相（0〜359）、彩度（0〜100%）、明度（0〜100%）
色プレビュー
CSS形式
コンポーネント
色コードについて
HEX (16進数):
ウェブで最も一般的な色の表現方法です。「#」記号の後に6桁の16進数が続きます。 最初の2桁が赤 (R)、次の2桁が緑 (G)、最後の2桁が青 (B) の値を表します。 値の範囲は00〜FFで、00が最も暗く、FFが最も明るくなります。
RGB (Red, Green, Blue):
赤、緑、青の3つの値で色を表現します。各値の範囲は0〜255で、0が最も暗く、255が最も明るくなります。 CSS では rgb(R, G, B) の形式で使用します。
HSL (Hue, Saturation, Lightness):
色相、彩度、明度の3つの値で色を表現します。色相は0〜359の角度で色の種類、彩度は0〜100%で色の鮮やかさ、 明度は0〜100%で色の明るさを表します。HSLは人間が理解しやすい色表現方法です。 CSS では hsl(H, S%, L%) の形式で使用します。
使い方
- HEX、RGB、HSLのいずれかの形式で色コードを入力します。
- 他の形式に自動的に変換された結果が表示されます。
- 値の横にある「コピー」ボタンをクリックすると、その値をクリップボードにコピーできます。
- 入力した色のプレビューも表示されます。
補足説明
- デザインツールとCSSの間で色指定を受け渡すときの形式変換に便利です。
- CSSでは他にoklch()など新しい色空間も登場していますが、HEX/RGB/HSLは全ブラウザで安定して使えます。
よくある質問
どのカラー形式に対応していますか？
HEX(#FF5733など)、RGB(rgb(255, 87, 51)など)、HSL(hsl(11, 100%, 60%)など)の相互変換に対応しています。CSSでよく使う主要な形式をカバーしています。
HEXとRGBはどう使い分けますか?
どちらも同じ色を表現でき、機能的な差はありません。HEXは簡潔でデザインツールからのコピーに便利、RGBは透明度を扱うrgba()への拡張が直感的です。チーム内で表記を統一するのがおすすめです。
HSLを使うメリットは何ですか？
HSLは色相(Hue)・彩度(Saturation)・輝度(Lightness)で色を表すため、「同じ色相で少し明るく」といった調整が数値の増減だけでできます。ホバー時の色やカラーバリエーションの作成に便利です。
関連ツール
CSS圧縮
CSSコードを圧縮・最適化します。ファイルサイズの削減に。
画像リサイズ
画像のサイズを変更します。ブラウザ上で安全に処理。
QRコード生成
テキストやURLからQRコードを生成します。画像として保存可能。
URI エンコード
URLエンコード（パーセントエンコーディング）を行います。日本語や特殊文字をURL形式に変換。
URI デコード
URLデコード（パーセントデコーディング）を行います。エンコードされたURLを元の文字列に戻します。
Base64 エンコード
テキストをBase64形式にエンコードします。バイナリデータの安全な転送に。
プライバシーについて
お気に入り情報はブラウザ内にのみ保存されます。サーバーには送信されないため、安心してご利用ください。