CSS Tip

Color shades using color-mix()

Use the new color-mix() to create different shades from one color.

Mix with ⚫️ black for a darker color and ⚪️ white for a lighter color

3 color shades from one color

html {
  --color: #8A9B0F; /* the main color */
  --color-light: color-mix(in srgb,var(--color),#fff 25%);
  --color-dark:  color-mix(in srgb,var(--color),#000 25%);
}

See the Pen Color shades using color-mix() by Temani Afif (@t_afif) on CodePen.

More CSS Tips