入力
ワークスペースを準備中…
使い方
- HEX、RGB、HSL、または CSS の色名を入力します。
- 色見本と変換後の値を確認します。
- 各「コピー」ボタンで HEX、RGB、HSL をコピーします。
1 つの色を 3 つの CSS 表記で
デザイントークンは HEX、スタイルシートは RGB や HSL という場合もあります。表記を変換すれば、色を選び直さずに同じ色を再利用できます。
色見本と 3 種類の出力は一緒に更新されます。rebeccapurple などの色名も、数値の CSS 値に変換できます。
表記を選ぶ
HEX はデザイントークンを簡潔に記述できます。RGB は赤・緑・青のチャンネルを、HSL は色相・彩度・明度を表します。画像形式の違いではなく、色の記述方法の違いです。
短縮 HEX と通常の HEX に対応しています。対応する HEX、RGB、HSL 構文でアルファ値も指定できます。
#2563ebrgb(37, 99, 235)同じ不透明な sRGB 色を HEX と RGB で表した例です。
透明度と精度
透明色のアルファ値は変換後にも保持されます。ただし、見え方は背後の背景によって変わります。
sRGB 値を扱い、表示時に丸めます。Lab、OKLCH、CSS の color() 関数による広色域変換は行いません。
変換値を使う
コピーボタンはプロパティ宣言全体ではなく、色の値を出力します。color、background-color、border-color、デザイントークンなどに使用してください。
テキスト入力は最大 1 MiB。CSS と HTML の変換は Worker 内で実行し、制限時間は 30 秒です。色のツールは sRGB を使用します。生成したスタイルはプレビューのため、実際のレイアウトでテストしてください。
よくある質問
入力できる色の形式は？
対応する HEX、RGB、HSL 値、または CSS の色名を入力できます。未対応の構文では変換値ではなくエラーを表示します。
透明度は保持されますか？
はい。対応するアルファ値は変換後の各形式にも含まれます。実際に使う背景に重ねて色見本を確認してください。
出力の表記や精度が違うのはなぜ？
表示用に値を正規化して丸めるためです。元の短縮表記、空白、数値の厳密な書き方は保持しません。
OKLCH や Display P3 に対応していますか？
いいえ。sRGB の色表現のみを扱い、広い色域を sRGB にマッピングする処理は行いません。
色の値はアップロードされますか？
いいえ。変換とプレビューはブラウザー内で実行します。「コピー」は選んだ出力だけをクリップボードに書き込みます。