カラーコントラストチェック
文字色と背景色の WCAG 2.2 コントラスト比を測定し、通常文字と大きな文字の適合状況を表示します。
カラーコード変換
HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。
HEX・RGB・HSL のどれかを編集すると、ほかの値とプレビューも更新されます。
このツールについて
デザインの色を CSS に移すとき、手元の表記から始められます。sRGB が対象で、CMYK や印刷の特色は変換しません。
使い方
カラーコードを入力するか色を選び、不透明度をスライダーで調整します。HEX は 3・4・6・8 桁に対応します。RGB は 0–255 または百分率、HSL の彩度と明度は百分率です。範囲外の値はエラーになります。印刷用 CMYK や広色域の変換は行いません。
HEX・RGB・HSL はそれぞれ直接編集できます。どれかを変えると残りが更新され、入力中の文字とカーソル位置は保たれます。未完成・不正な値は該当欄に示し、有効になるまでコピーできません。
よくある質問
8桁の HEX では透明度をどこに書きますか？
CSS は #RRGGBBAA の順で、末尾2桁がアルファ値です。ソフトによって使われる ARGB とは異なります。RGB と HSL でも透明度を指定できます。
RGB や HSL はどの書式で入力しますか？
例えば rgb(255 0 0 / 50%) や hsl(0 100% 50%) です。カンマ形式も使えますが、スラッシュ形式と混ぜないでください。色名や CMYK には対応しません。
50%のアルファ値が HEX で少し変わるのはなぜですか？
HEX のアルファ値は256段階です。0.5 は 80、つまり128/255に丸められます。小数のアルファ値を使いたい場合は8桁 HEX ではなく RGB か HSL を選んでください。
関連ツール
新しいタブで開きます
コメント
0