カラーシェード生成ツール
色に黒を一定の割合で混ぜて、暗いシェードを生成します。CSS形式の色を1つ入力し、2～20段階と混色空間を選ぶと、元の色から始まる各シェードのHEX、RGB、HSL、OKLCH値を表で確認できます。sRGBでの混色は従来のシェードツールやSassと同様の結果になり、OKLabでは知覚上均等な段階になります。UIのカラースケール作成に最適です。
よくある質問
シェードとは何ですか？
シェードとは、色に黒を混ぜたものです。色相はそのままで暗くなります。白を混ぜるティントや、グレーを混ぜるトーンとは異なります。
各段階の間隔はどのように決まりますか？
段階数を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-600や--brand-700などのカスタムプロパティにコピーしてください。ブラウザー内で混色する場合は、color-mix(in oklab, var(--brand) 80%, black)を使うと、OKLab設定での20%シェードと同じ結果になります。
暗いシェードなら自動的にアクセシブルになりますか？
いいえ。暗く見えるシェードでも、別の暗い色や色付きのテキストとのコントラストが4.5:1を下回ることがあります。コントラストチェッカーで、各シェードとテキストの組み合わせを確認してください。