カラートーン生成ツール
色を中間のグレーと均等な段階で混ぜ、色相を保ちながら彩度を下げた色調を生成します。任意の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()は現在の主要ブラウザーすべてで動作します。