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
  )