Generating CSS scale with only CSS
2023-01-12I have really adopted to having a color palette scale based on primary sets of colors when I’m working on my projects. Gives a range of shades that I can use to add variety and depth to the designs.
I wanted a quick way to adjust my scales without having to use a tool to determine all the hex codes for each shade.
Using CSS variables and the calc function, it was actually quite easy to setup a scale of CSS variables that could be used in my apps, as long as I have a base color based on hsl .
:root {
--color-brand-base: 188, 46%;
--color-brand-l: 18%;
--color-brand: hsl(var(--color-brand-base), var(--color-brand-l));
--color-brand-dark: #143136;
--color-brand-light: #476469;
--color-brand-tint: #edf0f0;
--color-brand-50: hsl(var(--color-brand-base), calc(100% - (100% - var(--color-brand-l))/10));
--color-brand-100: hsl(var(--color-brand-base), calc(100% - (100% - var(--color-brand-l))/5));
--color-brand-200: hsl(var(--color-brand-base), calc(100% - 2 * (100% - var(--color-brand-l))/5));
--color-brand-300: hsl(var(--color-brand-base), calc(100% - 3 * (100% - var(--color-brand-l))/5));
--color-brand-400: hsl(var(--color-brand-base), calc(100% - 4 * (100% - var(--color-brand-l))/5));
--color-brand-500: hsl(var(--color-brand-base), var(--color-brand-l));
--color-brand-600: hsl(var(--color-brand-base), calc(4 * var(--color-brand-l)/5));
--color-brand-700: hsl(var(--color-brand-base), calc(3 * var(--color-brand-l)/5));
--color-brand-800: hsl(var(--color-brand-base), calc(2 * var(--color-brand-l)/5));
--color-brand-900: hsl(var(--color-brand-base), calc(var(--color-brand-l)/5));
}
Now I’m able to use these anywhere and everywhere, but also assign them in my tailwind color configs.