カラーコード変換
HEX・RGB・HSLカラーコードを相互変換します。Webデザイン・CSS開発に便利なカラーツールです。
- 1. 入力条件を入れる
- 2. 計算ボタンを押す
- 3. 結果がすぐ表示
プリセット
- 📌 赤（255,0,0）
- 📌 緑（0,255,0）
- 📌 青（0,0,255）
次回このツールを開くと、前回の入力で再計算 / 比較できます。アカウント登録不要・端末内のみに保存。
この計算ツールは役に立ちましたか？
評価はこの端末にだけ保存されます。送信は不要です。改善のヒントとして編集部が活用します。
このツールについて
「カラーコード変換ツール」は、WebデザインやCSS開発で不可欠なHEX、RGB、HSL形式のカラーコードを瞬時に相互変換します。例えば、RGB(255, 128, 0)の鮮やかなオレンジ色を、Webサイトのスタイルシートに使うHEXコード #FF8000 や、グラフィックデザイン調整に便利なHSL(30°, 100%, 50%) へ変換。これにより、開発者は効率的に色の指定や調整が可能となり、デザインの一貫性と作業速度を向上させます。特に異なるツール間での色指定のずれを防ぎ、視覚表現の正確性を保つ上で極めて有用です。
計算の仕組み
本ツールは、まず入力されたRGB値（例: R=255, G=128, B=0）を0-1の範囲に正規化します。次に、この正規化されたRGB値から最大値(Cmax)と最小値(Cmin)を特定し、その差(C = Cmax - Cmin)を算出します。 - 明度 (L) は、(Cmax + Cmin) / 2 で計算されます。 - 彩度 (S) は、Lが0または1の場合は0、それ以外では C / (1 - |2L - 1|) で求められます。 - 色相 (H) は、C=0の場合は0、CmaxがRなら60° * (((G-B)/C) mod 6)、Gなら60° * ((B-R)/C + 2)、Bなら60° * ((R-G)/C + 4) と計算され、結果を0-360°に調整します。 - 明るさ (Brightness) は、(R+G+B)/3 の単純平均で算出されます。これらの計算により、RGBからHSLおよびBrightnessへの変換を行います。
使用例
コーポレートカラーの指定
ロゴのRGB値をCSS用にHSLとHEXに変換。
- 赤（R）: 0
- 緑（G）: 102
- 青（B）: 204
企業ロゴの標準RGB値(0, 102, 204)をHSL(210°, 100%, 40%)に変換することで、Webサイトの背景やテキストの色調をHSLで微調整しやすくなります。HEXコードも取得でき、CSSでの正確な色指定が容易になります。一貫したブランドイメージ維持に役立ちます。
UI部品の配色調整
ボタンの明るさをHSLで調整し、視認性を高める。
- 赤（R）: 255
- 緑（G）: 165
- 青（B）: 0
UI要素に使うオレンジ(RGB: 255, 165, 0)をHSL(39°, 100%, 50%)へ変換。ここから明度(Lightness)を例えば60%に上げると、より明るいオレンジ色を簡単に生成でき、視認性の高いボタンやアラートメッセージの色を効率的にデザインできます。
画像の色補正
写真の特定部分の色を分析し、編集ソフトで調整する。
- 赤（R）: 128
- 緑（G）: 0
- 青（B）: 128
写真内の特定の色（例：RGB 128, 0, 128の紫色）を抽出し、HSL(300°, 100%, 25%)に変換。このHSL値から、彩度(Saturation)を下げてくすんだ色にしたり、明度(Lightness)を上げて明るい色にしたりと、画像編集ソフトウェアでより直感的に色補正を行うための基準値として活用できます。
計算方法の解説
カラーコードの形式
Webデザインでよく使われるカラー形式はHEX（#RRGGBB）、RGB（rgb(R,G,B)）、HSL（hsl(H,S%,L%)）の3種類です。
HEXカラーコード
#FF0000のように16進数で色を表現します。CSSで最もよく使われます。
よくある質問
おすすめ
開発効率を上げる SaaS はカラーコード変換と合わせて検討。複数製品を一度に比較できるサービスで、コスト・運用負荷を最適化できます。