I’m going to demonstrate in Coolors, but a similar approach will work with any website that will let you work with a “color wheel”, or colors that are analogous or complementary to a given color.
From the single color, I will walk you through making several tints/shades of that color. As you do, take note of the positions of the shades relative to the main color, so you can repeat the positions with the next colors.
Check the options for “color harmonies” and pick which you like, based on the mood of your website and what you know of the people visiting your website. For most people, get one or two analogous colors (colors that are adjacent to your first color on the color wheel). If you prefer, you can use an analogous color and a complementary color (the color directly opposite your color on the wheel).
Once you have a main color and some related colors, you will make tints/shades of those related colors.
You want one tint of each color that is very light, to pair with white backgrounds; you want one shade that is very dark, to pair with black text.
Pick tints and shades that are not visibly close to each other. You want your website visitors to be able to tell them apart.
(For color blind visitors, WordPress now has a way to specify alternate color palettes, and you can make one palette that has good contrast with each of the types of color blindness.)
Let’s start with color #6D7B51, a Fern Green. Browse to https://coolors.co/6D7B51. Yes, the color number is at the end of that URL, without the ‘#’.
Copy the full URL you are using for the main color, you’ll likely want to return to it.
First thing to do is scroll down to “Contrast Checker” to make sure this color has enough contrast with white and black backgrounds. Notice if the Contrast Checker Tool says it has good contrast to be used only for headings (or said another way, only at larger font size), or if also has enough to be used as a text color.
Normally, only use black or white as text colors. For example, the image here shows white text on fern green. If your pick for text color doesn’t have good contrast with your chosen background color, use a Contrast Checker to adjust it. Nobody likes having to read text with poor contrast.
I’m going to pick some tints and shades of the main color and one tint of each of two hues. Another approach is to pick either an analogous or complementary color (scroll down on the Coolors page to see the “Color Harmonies”), and take tints and/or shades of those.
Scroll down the page, you will see Shades, Tints, Tones, Hues, Temperatures.
For Shades, I like right-two 5E6A45 and right-six 3E472E; you use whatever shades appear “different enough” to you, and don’t look like black.
For Tints, I’m picking 4th-from-the-right E1E5D7 and 4th-from-the-left 8FA06E. (As you’ll see later, I found a better choice would be 4th and 6th from the right.) You want tints that will work well as alternate backgrounds to white, just a little bit of color.
For Hues, I’m picking the left-most 7A5651 and right-most 517A67.
To make tints for the hue colors, use the URL you started with, but use the new color numbers, like this https://coolors.co/7a5651. Again I will take 4th-from-the-left tints, e5d9d8 and d8e5df.
I usually organize my WordPress color palettes with black andwhite, then the tints, then the main color, then the shades, then other hues. You might prefer putting the light colors together, then the medium colors, then the dark colors.
Now, I have several colors to pick from. To see them as a palette, make a URL of them, separated by ‘-‘, like this:
https://coolors.co/E1E5D7-8FA06E-6d7b51-5E6A45-3E472E-7A5651-E5D9D8-517A67-D8E5DF
Coolors shows you color names, very nice touch. If you are using a site that doesn’t give names, make up names, even if it’s just “pale, light, medium, darker, dark green; medium brown, light pink, blue-green, pale blue-green”. You’ll be putting these into WordPress, and you’ll want names to keep track of the colors.
I added black and white color names to the palette image, so you can see the contrast. All colors have good contrast with one or both text colors.
I can tell that 8FA06E “Moss Green” is too dark to use as a pale section background, and I’d rather have dark olive green for a dark green color. So, I’m replacing moss green with 6th from the right, CCD4BD ash gray.
Rifle Green looks too dark compared to all other colors, and isn’t needed, so I’m deleting it.
https://coolors.co/E1E5D7-CCD4BD-6d7b51-5E6A45-7A5651-E5D9D8-517A67-D8E5DF
I can combine colors in many ways with this palette.
- Alternate section background colors (White, Alabaster, Ash Gray).
- Outside the content area is Fern Green, and Headings use Dark Olive Green.
- Links in paragraphs Deep Taupe, and also use it for button background colors and video controls; everything that you can click.
- Make the hover color for links and buttons use Timberwolf.
- Rows in a table alternate (with a simple CSS command) between Hookers Green and Mint Cream. Or alternate Fern Green with Dark Olive Green. Or alternate Fern Green with Hookers Green.
- Normally use white or black text color, whichever has higher contrast on a background color. Check whether any of the pale colors (Alabaster, Ash Gray, Timberwolf, Mint Cream) have good contrast against the dark colors or black.
in new themes, that use Full Site Editing, you can specify in your theme.json file what the default colors are, for any element. But then use the color palette to make changes, very easily, to specifc elements. And, if you change the palette but keep the order of colors in the palette the same (maybe light-to-dark blue, related green and pale, related orange and pale), then the new palette will work well in the site. Read up on how to use named CSS Variables for colors, and assign the variables to block colors.
Now you can put this color palette into WordPress, and into GIMP. With the palette in both places, you can make images for your social media posting that use your website colors.
Leave a Reply