CSS Color Tricks
Written
— Updated
- Author: Una Kravetz
- Source: https://www.youtube.com/watch?v=VD108ccVDSY
- You can get a lot of flexibliity in color management by breaking HSL colors into a single CSS variable for each of H, S, and L.
- Lightening and Darkening
- Simple effects just use
calc
to alter one or more attributes. }
- Simple effects just use
- Blending Colors
- Create a new color where each of H, S, and L is the average of the attribute from the two colors.
}
- Contrasting Text Color
- This is a relatively simple hack but enough for a lot of cases.
- Take the luminance of the background color and tweak it to get black or white.
}