カラー変換
HEX、RGB、HSL、HSV/HSB を相互変換し、アルファ付きの表現、カラーネーム一覧、補色・類似色・トライアドもまとめて確認できます。
スマホで開く
プレビュー
相互変換
HEX / HEX8
RGB / RGBA
HSL / HSLA
HSV / HSVA
CSS カラーネーム一覧
このツールについて
カラー変換ツールは、HEX、RGB、HSL、HSV の間を相互変換しながら、デザインやフロントエンド実装で使う色指定を整理するためのページです。どの形式で色が渡ってきても、目的の形式へすぐ変換できます。
アルファ値にも対応しているため、半透明の UI パーツやオーバーレイ色も確認できます。HEX8、RGBA、HSLA、HSVA のような透明度付き表現も同時に生成されます。
補色、類似色、トライアドもあわせて表示するので、単一色の変換だけでなく配色検討にも使えます。CSS カラーネーム一覧から選択できるため、試しながら方向性を探す用途にも向いています。
使い方
- まず「#FF5733 または #FF5733C」を入力または選択し、「rgb(255, 87, 51)」や「hsl(14, 100%, 60%)」も目的に合わせて調整します。
- 設定を変えながら「プレビュー」の変化を確認し、目的に近い条件へ整えます。
- 最後に表示された「プレビュー」を確認し、必要であれば「コピー」で再利用します。
候補を複数比べるときは、基準色を固定して一項目ずつ変えると差が見やすくなります。色の処理はブラウザ内で完結するため、デザイン案の試作にも手早く使えます。
カラー変換とは？
HEX、RGB、HSL、HSV/HSB を相互変換し、アルファ付きの表現、カラーネーム一覧、補色・類似色・トライアドもまとめて確認できます。 カラー変換ツールは、HEX、RGB、HSL、HSV の間を相互変換しながら、デザインやフロントエンド実装で使う色指定を整理するためのページです。どの形式で色が渡ってきても、目的の形式へすぐ変換できます。 アルファ値にも対応しているため、半透明の UI パーツやオーバーレイ色も確認できます。HEX8、RGBA、HSLA、HSVA のような透明度付き表現も同時に生成されます。 補色、類似色、トライアドもあわせて表示するので、単一色の変換だけでなく配色検討にも使えます。CSS カラーネーム一覧から選択できるため、試しながら方向性を探す用途にも向いています。
よくある質問
Q: このツールは無料ですか？
はい、完全無料で登録不要です。すべての処理はブラウザ内で行われ、データが外部に送信されることはありません。
Q: 「#FF5733 または #FF5733C」と「rgb(255, 87, 51)」はどう使い分けますか？
基本は「#FF5733 または #FF5733C」から設定し、必要に応じて「rgb(255, 87, 51)」や「hsl(14, 100%, 60%)」で細かく調整します。設定を変えると「プレビュー」へ反映されるので、条件差を見比べながら調整できます。
Q: 「プレビュー」はそのまま再利用できますか？
はい。表示された「プレビュー」は「コピー」で持ち出しやすく、資料作成や別の実装作業へそのままつなげられます。条件を変えて複数パターンを作り、比較しながら使う運用にも向いています。
Q: スマートフォンでも使えますか？
はい、レスポンシブデザインに対応しており、スマートフォン・タブレットでもご利用いただけます。
よくある質問
Q.このツールは無料ですか？
A.はい、完全無料で登録不要です。すべての処理はブラウザ内で行われ、データが外部に送信されることはありません。
Q.「#FF5733 または #FF5733C」と「rgb(255, 87, 51)」はどう使い分けますか？
A.基本は「#FF5733 または #FF5733C」から設定し、必要に応じて「rgb(255, 87, 51)」や「hsl(14, 100%, 60%)」で細かく調整します。設定を変えると「プレビュー」へ反映されるので、条件差を見比べながら調整できます。
Q.「プレビュー」はそのまま再利用できますか？
A.はい。表示された「プレビュー」は「コピー」で持ち出しやすく、資料作成や別の実装作業へそのままつなげられます。条件を変えて複数パターンを作り、比較しながら使う運用にも向いています。
Q.スマートフォンでも使えますか？
A.はい、レスポンシブデザインに対応しており、スマートフォン・タブレットでもご利用いただけます。