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

色を中間のグレーと均等な段階で混ぜ、色相を保ちながら彩度を下げた色調を生成します。任意のCSS形式で色を1つ入力し、2～20段階と混色空間を選ぶと、元の色から始まる各色調のHEX、RGB、HSL、OKLCH値を表で確認できます。落ち着いたパレット、無効状態、控えめな背景、穏やかなブランドカラーに便利です。

## よくある質問

### 色調とは何ですか？

色調とは、色にグレーを混ぜたものです。色相を保ちながら落ち着いた色になり、白を混ぜたティントや黒を混ぜたシェードとは異なります。

### どのグレーが使われますか？

sRGBの中間グレー#808080、rgb(128 128 128)を使います。そのため、明るい色は少し暗く、暗い色は少し明るくなり、中間グレーに近づきます。別のグレーと混ぜるには、任意のグレーを指定してカラーミキサーを使ってください。

### 各段階の間隔はどのように決まりますか？

N段階の場合、行kでは色とグレーを(k - 1) / Nの割合で混ぜます。たとえば10段階なら、0%、10%、20%と続き、最大90%になります。最初の行は常に元の色で、無色のグレーが一覧に含まれることはありません。

### HSL彩度を下げる場合と、色調にする場合の違いは何ですか？

HSL彩度を下げるとHSL明度は保たれますが、グレーを混ぜると明度も中間に近づきます。そのため色調は、グレーのフィルター越しに見た色のようになり、落ち着いた背景や無効状態に適しています。

### sRGBとOKLabでの混色にはどのような違いがありますか？

sRGB混色では、ガンマ符号化されたチャンネル値の平均を取ります。これは絵の具のような色調表やSassmix()で使われる従来の方法です。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桁になります。色域外の段階は、HEX、RGB、HSLの列ではCSS Color 4アルゴリズムを使ってsRGBにマッピングされますが、OKLCH列にはマッピング前の値が表示されます。

### CSSで色調を再現するにはどうすればよいですか？

16進値またはoklch()値をコピーするか、ブラウザーでcolor-mix(in oklab, var(--brand) 70%, #808080)を使って、OKLab設定の30%の色調を混ぜられます。color-mix()は現在の主要ブラウザーすべてで動作します。

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

[メールでお問い合わせ](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)