Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion ブラウザ内でローカルに実行
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
カラー コンバーターは、単一の色を HEX、RGB、HSL、HSV 間で変換し、白と黒に対する WCAG のコントラスト比を表示するため、その色のテキストが読み取れるかどうかをすぐに確認できます。 HEX と RGB はツール間でコピーする形式ですが、実際にデザイン作業に役立つのは HSL です。HSL は色相と明度を分離するため、単純な RGB 計算のようにグレーに向かっていくのではなく、同じ色相を維持した色合いや色合いを生成できます。 8 桁の 16 進数および rgba 値にはアルファ チャネルが含まれており、コンバーターはそれらも処理します。
Where people use the
- ブランドの 16 進値を、デザイン ツールが期待する rgb 構文に変換します。
- HSL を使用して、1 つのブランドの色相から一貫した色合いのセットを生成します。
- 暗い背景でもリンクの色が読めるかどうかを確認します。
- スクリーンショットから選択した色を最も近い 16 進値に一致させます。
How to use the
- 1
任意の形式で色を入力します
2f6fed などの 16 進値、または rgb または hsl 関数を貼り付けるか、ピッカーを使用します。他の形式は、入力すると更新されます。
- 2
すべての表現を一度に読む
Hex、RGB、HSL、HSV が分離されたアルファ チャネルとともに表示されます。
- 3
コントラスト比を確認する
白と黒の比率によって、その色がテキストの色または背景として使用できるかどうかがわかります。本文テキストには 4.5 対 1、大きなテキストとインターフェイスの境界線には 3 対 1 が必要です。
- 4
コードに必要なフォームをコピーします
各フィールドには独自のコピー ボタンがあるため、手動で再フォーマットするのではなく、スタイルシートが期待する構文を正確に取得できます。
ヒントとベストプラクティス
- RGB で白または黒を追加するのではなく、HSL で明度を調整します。色合いはそのままです。
- 見出しサイズではなく、テキストが実際に使用される最小サイズでコントラストをテストします。
- コンポーネントごとに新しいパレットを作成するのではなく、5 つまたは 6 つの値の文書化されたパレットを保持します。
よくある質問
16 進カラーはどのように RGB に変換されるのでしょうか?
16 進数の各ペアは 1 つのチャネルであり、基数 16 として読み取られます。2f6fed では、2f は赤の 47、6f は緑の 111、ed は青の 237 です。 f0a のような 3 桁の短縮表記は、各桁を 2 倍にするため、ff00aa になります。
HSL の明度が知覚される明るさと同じではないのはなぜですか?
なぜなら、目は青よりも緑に対してはるかに敏感だからです。純粋な青と純粋な黄色は明度の値を共有できますが、黄色はより明るく見えます。そのため、コントラストは HSL 数値から判断するのではなく、輝度公式で測定する必要があります。
16 進数の色の 4 番目の数字のペアは何を意味しますか?
アルファ、00 完全透明から ff 完全不透明まで。 8 桁の 16 進数は、現在のすべてのブラウザでサポートされており、rgba と同等の 16 進数です。
CMYK変換は印刷用に正確ですか?
いいえ、ブラウザ ツールでもそのようなことはできません。 CMYK は、インク、用紙、プリンターのプロファイルによって異なります。この値を出発点として使用し、重要なものについては印刷会社の ICC プロファイルを通じて変換します。
色付きの背景で読みやすいテキストを選択するにはどうすればよいですか?
文字の色と背景のコントラスト比を比較します。黒も白も 4.5 対 1 に達していない場合は、背景が本文テキストとしては飽和しすぎているため、コピーの背後に使用する前に暗くするか明るくする必要があります。
同じヘクスが 2 つの画面で異なって見えるのはなぜですか?
ディスプレイは色域、キャリブレーション、明るさが異なるためです。広色域の画面には、標準の sRGB パネルでは再現できない飽和した色が表示されます。特別な理由がない限り、sRGB で作業してください。