カラーコード変換
HEX・RGB・HSLを相互変換。プレビュー付き。
CSS:
color: #3b82f6;CSS:
color: rgb(59, 130, 246);CSS:
color: hsl(217, 91%, 60%);このツールについて
HEX・RGB・HSLの3形式のカラーコードを相互に変換できるツールです。入力した色は画面上部に大きくプレビュー表示され、CSSのcolorプロパティとしてそのまま使えるコードも自動生成されます。Webデザインやコーディング作業でカラーコードの形式を素早く切り替えたい場面に役立ちます。
主な機能
- ✓HEX・RGB・HSLの3形式をリアルタイムで相互変換
- ✓色のプレビューを大きく表示してその場で確認
- ✓CSSプロパティ形式のコードを自動生成
- ✓数値を直接入力して微調整が可能
使い方
- 1形式を選んで入力HEX・RGB・HSLのいずれかの欄に変換したい値を入力します。
- 2他形式に自動変換1つの形式に入力すると、残り2つの形式に自動で変換されます。
- 3CSSコードをコピー画面下部に表示されるCSS用のコードをそのままコピーして使えます。
こんな場面で便利
Webサイトのデザイン
デザインカンプのHEXコードをCSSのRGBやHSLに変換して実装に使えます。
色の微調整
HSLで彩度や明度を調整しながら、最終的なHEXコードを取得できます。
デザインツール間の連携
FigmaやPhotoshopなどで使う色の形式を素早く切り替えできます。
コーディング学習
色の表現方式の違いを実際に確認しながら理解できます。
よくある質問
- 対応しているカラーコードの形式は？
- HEX（#RRGGBB）、RGB（0-255）、HSL（色相・彩度・明度）の3形式に対応しています。
- CSSにそのまま使えますか？
- はい。画面下部にCSS用のコードが表示されるので、そのままコピーして使えます。
- 透明度（アルファ値）は対応していますか？
- 現在はアルファ値には対応していません。不透明な色のみ変換可能です。