色のプレビュー
HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)
ツール説明
カラー変換ツールについて
Color Converter は HEX、RGB、HSL、HSV の間で色値を変換し、フロントエンド CSS、デザイン引き継ぎ、テーマトークンの整理に役立ちます。
#4f46e5、rgb(...)、hsl(...) を入力すると、色をコピーしやすい各形式へ統一できます。
Color Converter の使い方
- HEX、RGB、RGBA、HSL、HSLA 色の値を貼り付けます。
- 変換して HEX、RGB、HSL、HSV の出力を確認します。
- 色見本のプレビューで色を確認し、単一形式またはすべての形式をコピーします。
よくある利用場面
- デザイン上の HEX 値を CSS rgb() や hsl() に変換する。
- HSL で明度と彩度を調整し、ホバー時の色を試す。
- テーマを整理するとき、カラートークンの値を統一する。
Color 形式と注意点
HEX、RGB、HSL、HSV は同じ色を異なる座標で表します。この変換ツールは RGB 色自体を保持します。RGBA/HSLA 入力の alpha は受け付けますが出力には保持されません。
- 3 桁の HEX は 6 桁の HEX に展開されます。
- RGB の各チャンネルは 0 から 255 の範囲です。
- HSL は S/L に percentages を使い、hue は 0 から 360 degrees で循環します。
- HSV はカラーピッカーでよく使われ、HSL は CSS のテーマ調整に向いています。
カラー変換のよくある質問
- HEX to RGB と RGB to HEX に対応しますか？
- はい。HEX 入力は RGB/HSL/HSV を出力し、RGB 入力は HEX/HSL/HSV を出力します。
- Alpha が result にないのはなぜですか？
- このツールは不透明色の変換に集中しているため、RGBA/HSLA アルファ値は保持されませんです。
- Colors はアップロードされますか？
- いいえ。Parsing、conversion、プレビュー、copy はブラウザー内で実行されます。
色変換と可読性
形式を変えてもコントラストは保証されません。本文、ボタン、リンクに使う前に、実際の背景上で WCAG コントラスト、ブランドとの整合性、UI の各状態を確認してください。
CSS 色形式の選び方
同じ色は HEX、RGB、HSL、HSV で書けますが、保守作業ごとに向き不向きがあります。
- デザインの受け渡しや安定したテーマトークンには簡潔な HEX が向いています。
- 透明度、変数、動的な組み立てが必要な場合は CSS rgb() または hsl() が便利です。
- hover、active、明るい／暗い派生色を作るときは元の RGB より HSL の hue、saturation、lightness が扱いやすいです。
Ship 前の accessibility 色 checks
色変換は値の等価性を保つだけで、文字の読みやすさ、状態の明確さ、コントラスト要件への適合を保証しません。
- 本文とボタン文字は実際の背景上で WCAG のコントラスト比を確認します。
- エラー、成功、無効の状態を色だけで伝えず、テキスト、アイコン、形状の変化も使います。
- ブランド色をリンクやフォーカスリングに使う場合、ホバー、アクティブ、無効、選択の各状態も確認します。