CSS Color Palette Example

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.