CSS Color Palette Example
December 01, 2021
I use color palettes in my css a lot. Even for small projects they’re helpful. And they make the page look professional. Assuming I’m using the right mix of colors and I keep an eye on my color contrast.
My color palettes are always defined using CSS custom properties. I try to pick meaningful names for my colors that are easy to understand. Usually that means light to dark, often with numbers like 1 to 5. The number 1 is the lightest and 5 being the darkest.
Below is an example of what a red css color palette might look like. The colors themselves are made up.
:root {
--red-1: light-red;
--red-2: red;
--red-3: darker-red;
--red-4: even-darker-red;
--red-5: darkest-red;
}
It’s worth noting that the css custom properties shown above are declared in the :root
psudeo-class. The :root psudeo-class makes the custom properties available globally, and is equivalent to declaring the custom properties in the html
selector for a page.
Example palettes I use a lot
The first one is Nord, which is a great color palette with soft colors that have good contrast. It’s pretty neutral, but I think it looks professional and can be used in a variety of different sites. This only part of the full Nord color palette, but I think it’s enough to get a good looking site. I find this palette especially good for dark themed pages.
:root {
--polar-1: #4c566a;
--polar-2: #434c5e;
--polar-3: #3b4252;
--polar-4: #2e3440;
--snow-1: #eceff4;
--snow-2: #e5e9f0;
--snow-3: #d8dee9;
}
Example use:
body {
/* Set dark background color for the page */
background-color: var(--polar-4);
/* Ensure high contrast ratio text color */
color: var(--snow-1);
}
Another css color palette I like to use a lot comes from coolors.co, which is a site where you can explore and export various color palettes. I use this site often. The search function is great.
I changed the default names of the colors from coolors.co to fit my needs, but the hex values are the same.
:root {
--red: #e63946ff;
--mint: #f1faeeff;
--blue-1: #a8dadcff;
--blue-2: #457b9dff;
--blue-3: #1d3557ff;
}
body {
/* Set light background color for the page */
background-color: var(--mint);
/* Ensure high contrast ratio text-color */
color: var(--blue-3);
}
The great thing about delcaring a color palette using css custom properties is that they can be declared once and re-used in multiple selectors. This ensures that if you change your mind about a color you only have to change the value in one place to apply it everywhere.