# カラーティント生成ツール

色に白を一定の割合で混ぜて、明るいティントを生成します。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が必要です。

ここに広告を掲載しませんか？

[メールでお問い合わせ](mailto:hi@dennn.is?subject=OneClick%20Pro%E3%81%A7%E3%81%AE%E5%BA%83%E5%91%8A%E6%8E%B2%E8%BC%89)

[広告 WordPress向けのエージェント対応プラグインスイート。](https://sleekwp.com/?ref=oneclickpro)