# カラーシェード生成ツール

色に黒を一定の割合で混ぜて、暗いシェードを生成します。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を下回ることがあります。コントラストチェッカーで、各シェードとテキストの組み合わせを確認してください。

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

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