theme01.c-palette.net
SASS 変数
- setting.$color-base-hsl
- setting.$color-primary-hsl
- setting.$color-accent-hsl
CSS カスタムプロパティ
- var(--color-base-hsl)
- var(--color-primary-hsl)
- var(--color-accent-hsl)
SASS COLOR
- color.scale(
setting.$color-primary-hsl,
$lightness: 50%)
- color.scale(
setting.$color-primary-hsl,
$saturation: -50%)
- color.scale(
setting.$color-primary-hsl,
$alpha: -50%)
- color.scale(
setting.$color-primary-hsl,
$whiteness: 50%)
- color.scale(
setting.$color-primary-hsl,
$blackness: 50%)
- color.adjust(
setting.$color-primary-hsl,
$hue: 180%)
MY COLOR (Custom Property)
Lightness
- utility.myColor(
primary, lightness, 50
)
- utility.myColor(
primary, lightness, -20
)
- utility.myColor(
base, lightness, 50
)
- utility.myColor(
base, lightness, -20
)
- utility.myColor(
accent, lightness, 50
)
- utility.myColor(
accent, lightness, -20
)
Saturation
- utility.myColor(
primary, saturation, 50
)
- utility.myColor(
primary, saturation, -20
)
- utility.myColor(
base, saturation, 50
)
- utility.myColor(
base, saturation, -20
)
- utility.myColor(
accent, saturation, 50
)
- utility.myColor(
accent, saturation, -20
)
Alpha
- utility.myColor(
primary, alpha, 20
)
Hue
- utility.myColor(
primary, hue, 90
)
- utility.myColor(
base, hue, 90
)
- utility.myColor(
accent, hue, 90
)