カラーコンバーター
HEX、RGB、またはHSL形式でカラー値を入力すると、即座に他のすべての形式に変換されます。すべての処理はブラウザ内でローカルに行われます。
HEX（#rrggbb）、RGB（rgb(r,g,b)）、またはHSL（hsl(h,s%,l%)）を入力するか、カラーピッカーを使用してください。
コピーしました！
単色背景に対するコントラスト
白の上
黒の上
カラーフォーマットについて
- HEX -
#rrggbb、最も一般的なCSSカラーフォーマット。 - RGB -
rgb(r, g, b)、各チャンネル0-255。 - HSL -
hsl(h, s%, l%)、色相0-360、彩度と明度0-100%。
ブラウザーが理解する記法はすべて受け付けます。rebeccapurple のような名前、アルファ付きの 8 桁の 16 進、そして現行の CSS が使うアルファの前にスラッシュを置く空白区切りの形も含みます。コントラストの数値は WCAG の相対輝度の式に従うので、比 4.5 がレベル AA での本文の基準、7 が AAA での基準です。数値は不透明な色に対して計算します。半透明の色は、背後に何があるかが決まるまで一定のコントラストを持たないからです。
マークアップに手こずっていませんか
エスケープされた実体参照、崩れた文字コード、CMS では正しく見えるのにページでは違って見える内容。たいていは、どこかが推測で処理しているサインです。当社はフロントエンドと、その背後にある公開の流れまで作ります。書いたとおりに訪問者へ届けるためです。
サイトについて相談するよくある質問
どんな色の書き方を貼り付けられますか
3 桁、4 桁、6 桁、8 桁の 16 進、rgb と rgba、hsl と hsla、hwb、そして CSS の色名すべてです。カンマ区切りの形も、アルファの前にスラッシュを置く現代的な空白区切りの形も受け付けるので、スタイルシートからそのまま貼れます。
透明度はどう扱われますか
アルファ値は変換後も残ります。8 桁の 16 進は rgba として返り、プレビューの背後には市松模様が表示されます。アルファが出力に書き出されるのは実際に不透明でないときだけで、常に表示したい場合は設定で切り替えられます。
コントラストの数値は何を意味しますか
この色と白または黒の単色背景との WCAG コントラスト比です。通常の本文はレベル AA で 4.5、AAA で 7 が必要で、大きな文字は基準が下がります。比が 3 を下回ると、どの大きさでもほとんどの人にとって読みにくくなります。
コントラストをアルファ抜きで計算するのはなぜですか
半透明の色には一定のコントラストが存在しないからです。読み手が実際に目にするものは背後にあるものに左右されるため、数値は不透明な色で計算します。文字が本当に半透明なら、まず合成後の色を求めてそれを確認してください。
HSL と HWB の違いは何ですか
どちらも同じ色相の角度から始まります。HSL は彩度と明度で色を表し、多くのツールが見せるのはこの組み合わせです。HWB は白と黒をどれだけ混ぜたかで表すもので、絵の具を混ぜる感覚に近く、濃淡のスケールを組み立てるときに扱いやすい表し方です。