カラーコードを1つ貼り付けるだけで、HEX、RGB、HSL、HSV、HCVへの変換と、テキストとしての読みやすさを確認できます。
WCAG 2では本文テキストのAA基準として4.5:1、AAA基準として7:1を定めています。大きなテキスト(18pt、または太字の14pt)は3:1でAAを満たします。(WCAGはW3Cによるウェブアクセシビリティのガイドラインです。)青色の#2457E6は白背景で約5.9:1となり本文テキストに適していますが、黒背景では3.6:1となり大きなテキストにのみ適しています。
HSLは色相(Hue)、彩度(Saturation)、輝度(Lightness)を分離しているため、色を明るくしたり暗くしたりする際もL(輝度)を変更するだけで済みます。下の輝度スケールはその仕組みを利用したものです。ステップをクリックするとその値が読み込まれます。
HSV(PhotoshopやFigmaではHSBと呼ばれます)は色相、彩度、明度を表し、一般的なカラーピッカーの正方形部分に該当します。Vは最も明るいチャンネル、Sはその中での色の鮮やかさを示します。HCVは彩度の代わりに、最も明るいチャンネルと最も暗いチャンネルの差であるクロマ(C)を使用します。#2457E6はhsv(224, 84%, 90%)およびhcv(224, 76%, 90%)となります。どちらも有効なCSSではないため、ウェブコードではHEX、RGB、HSLをご利用ください。
#RGB、#RRGGBB、#RRGGBBAA、rgb()/rgba()、hsl()/hsla()、hsv()/hsb()/hcv()、「36, 87, 230」のようなカンマ区切りの3つの数値、および約50種類の一般的なCSSカラー名。
いいえ。変換やコントラスト比の計算はすべてお使いのブラウザ上で実行されます。
#RRGGBBAAおよびrgba()はHEXとRGBの出力に反映されます。コントラスト比の計算ではアルファ値は無視され、不透明な色として扱われます。
印刷用のCMYKはカラープロファイルに依存するため、本ツールの対象外となります。
HEX(アルファ値を含む)、rgb()、hsl()、数値の組み合わせ、および約50種類の標準CSSカラー名の間で相互変換が可能です。
はい。白、黒、および任意の背景色に対するコントラスト比を計算し、WCAG AA(4.5:1)、AAA(7:1)、大きなテキスト(3:1)の各基準への適合状況を確認できます。
はい。選択した色相に対して9段階の輝度スケールが表示され、いずれかの色をクリックするとその値が即座に読み込まれます。
はい。カラーコードを直接入力するだけでなく、組み込みのカラーピッカー画面を使って視覚的に色を選択できます。