カラーティント生成ツール
色に白を一定の割合で混ぜて、明るいティントを生成します。CSS形式の色を1つ入力し、2～20段階と混色空間を選ぶと、元の色から始まる各ティントのHEX、RGB、HSL、OKLCH値を表で確認できます。sRGBでの混色は従来のティントツールやSassと同様の結果になり、OKLabでは知覚上均等な段階になります。背景、ホバー状態、スケールの作成に最適です。
よくある質問
ティントとは何ですか？
ティントとは、色に白を混ぜたものです。色相はそのままで、より明るく淡くなります。黒を混ぜるシェードや、グレーを混ぜるトーンとは異なります。
各段階の間隔はどのように決まりますか？
段階数をNとすると、行kでは色に白を(k - 1) / Nの割合で混ぜます。そのため10段階なら、0%、10%、20%と続き、90%まで表示されます。最初の行は常に元の色で、純粋な白は一覧に含まれません。
sRGBとOKLabでの混色にはどのような違いがありますか？
sRGB混合では、ガンマ符号化された各チャンネル値の平均を取ります。これは、Sass mix()が白と混ぜる場合や、従来の多くのティント生成ツールで使われる方法です。OKLab混合は知覚的な色空間で行われるため、明度の変化がより均一になり、明るい側でも色が薄くなりにくくなります。
どの入力形式を使えますか？
#の有無を問わない16進カラーコード、CSSの色名、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color()、cmyk()を使えます。実行ごとに色を1つ入力してください。
ティントはいくつ生成できますか？
実行ごとに2～20個生成できます。初期設定は10個です。最初の行に表示される元の色も個数に含まれます。
表にはどの値が表示されますか？
各段階について、白の混合率、16進カラーコード、rgb()、hsl()、および最新のCSS構文によるoklch()が表示されます。RGBのチャンネルは整数、HSLの割合は小数点以下2桁まで、OKLCHの明度と彩度は小数点以下4桁まで表示されます。
透明色はどうなりますか？
白も同じアルファ値で混ぜるため、入力色のアルファ値はすべてのティントに引き継がれます。そのため、16進カラーコードは8桁になり、CSS関数ではスラッシュの後にアルファ値が付きます。
sRGBの範囲外の色はどうなりますか？
混色には色全体が使われますが、HEX、RGB、HSLで表示できるのはsRGBのみです。そのため、色域外の段階は、これらの列ではCSS Color 4アルゴリズムでsRGBにマッピングされます。OKLCH列では、マッピング前の値が保持されます。
CSSでティントを使うにはどうすればよいですか？
16進カラーコードまたはoklch()の値を、--brand-100や--brand-200などのカスタムプロパティにコピーしてください。ブラウザー内で混色する場合は、color-mix(in oklab, var(--brand) 80%, white)を使うと、OKLab設定での20%ティントと同じ結果になります。
明るいティントに白い文字を載せられますか？
通常はおすすめできません。明るいティントと白のコントラストは低いためです。明るいティントには暗い文字を使い、コントラストチェッカーで各組み合わせを確認してください。通常のテキストには、WCAG AAで少なくとも4.5:1が必要です。