Generating Colors

色相・彩度・明度を定義し、それを元にhsl()とcalc()、そしてCustom Propertiesを使って色のバリエーションを生成するデモです。Chrome 54やSafari 10で確認できます。

アクセントカラー

アクセントカラーを明るくする

アクセントカラーを暗くする

アクセントカラーの補色

開発者ツールから:rootで定義されている--color-hue等の値を編集することで生成結果を変化させられます。