色を変換する方法
#2563eb、2563eb、rgb(37, 99, 235)、hsl(221 83% 53%)、またはtomatoのような色名など、CSSのどの形式でも色を入力するか貼り付けます。カラーピッカーで選ぶこともできます。- 色がHEX、RGB、HSL、HSV、CMYKで表示されます。必要な形式の横にあるコピーをクリックしてください。
- コントラストのボックスで、この色の上に白い文字や黒い文字を置いたときに読みやすいかを確認できます。明るい色・暗い色の見本をクリックすると、より明るい色や暗い色を試せます。
色の形式の説明
- HEX：Webデザインで最もよく使われる形式です。赤・緑・青を、それぞれ00〜FFの2桁の16進数で表します。
- RGB：同じ赤・緑・青の値を、0〜255の数値で表します。
- HSL：色相（色相環上の0〜360°）、彩度、輝度で表します。手で調整しやすく、輝度を変えるだけで明るい色や暗い色を作れます。
- HSV / HSB：色相、彩度、明度（ブライトネス）で表します。Photoshop、Figmaなどのデザインアプリのカラーピッカーで使われています。
- CMYK：印刷に使われる、シアン、マゼンタ、イエロー、ブラックのインクで表します。ここでの値は単純な換算によるものです。本格的な印刷ではカラープロファイルを使うため、正確な値は印刷会社に確認してください。
コントラストの結果の意味
Webコンテンツ・アクセシビリティ・ガイドライン（WCAG）では、通常の文字には少なくとも4.5:1（レベルAA）、大きな文字には3:1のコントラスト比が求められます。レベルAAAでは7:1が必要です。十分なコントラストがあれば、ロービジョンの人や、明るい日差しの下でスマートフォンを使う人を含め、誰にとってもボタンや文字が読みやすくなります。