Color Theme

A new color palette for use throughout the site.

🕙 04 Sep 2020 📖 2 minute read

🏷️ design, meta, style

Below is a new color theme I built in Adobe Color and plan to adopt across the site and in any visuals1 I create in the future.

The central color is the light-green (from Tachyons) which I’ve used on the site for a while. While it remains, I’m moving away from the navy that featured as the body text color and in a few components, like photo galleries.

I used the Compound ‘Color Harmony Rule’ in Adobe Color to generate this theme.

I liked it right away. The balance and gradation is what I’m looking for.

Coincidentally, it’s accessiblity-friendly. Done and done.

With the move from the navy text color to a dark-gray text, I’m also adjusting the background-color from light-gray to white. Light-gray will remain as a tertiary/utility color for tables and other minor elements.

Cool Color Theme

#69A9B8
#247385
#9EEBCF
#ED6864
#B86987

Code from Adobe Color

Here’s the CSS code exported from Adobe Color:

/* Color Theme Swatches in Hex */
.Cool-1-hex { color: #69A9B8; }
.Cool-2-hex { color: #247385; }
.Cool-3-hex { color: #9EEBCF; }
.Cool-4-hex { color: #ED6864; }
.Cool-5-hex { color: #B86987; }

/* Color Theme Swatches in RGBA */
.Cool-1-rgba { color: rgba(105, 169, 184, 1); }
.Cool-2-rgba { color: rgba(36, 115, 133, 1); }
.Cool-3-rgba { color: rgba(158, 235, 207, 1); }
.Cool-4-rgba { color: rgba(237, 104, 100, 1); }
.Cool-5-rgba { color: rgba(184, 105, 135, 1); }

/* Color Theme Swatches in HSLA */
.Cool-1-hsla { color: hsla(191, 35, 56, 1); }
.Cool-2-hsla { color: hsla(191, 57, 33, 1); }
.Cool-3-hsla { color: hsla(158, 65, 77, 1); }
.Cool-4-hsla { color: hsla(1, 79, 66, 1); }
.Cool-5-hsla { color: hsla(337, 35, 56, 1); }
  

Footnotes

  1. 1 Inspired by: How to pick more beautiful colors for your data visualizations from the Chartable blog
Back to Posts ↩