Generating CSS scale with only CSS

2023-01-12

I 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.