At Northern Buckeye, I’m the design guru among our team. We often joke about “Chris-ifying” things because I am so passionate about how things look and feel.
Last week, I wrote about the Lexend series of fonts which have been specially designed for increased readability. This week, I’d like to share some thoughts on color. Even as a designer, I have trouble with color. I don’t know what looks good together or which colors I should use on a project. I am going to showcase a few tools to help you with your color choices.
This free tool helps you find colors that work well together. Give it a base color and it will return other colors based on whatever harmony rule you choose – Complementary, Analogous, Monochromatic, etc. In the screenshot below, I chose the green color and then it returned four analogous colors. As you can see, you get both the RGB formulas and the Hex color codes for each of the colors. You can add these colors right into your Google tool palettes.
The thing I love most about Adobe Color is that you can upload an image and it will extract the colors for you. In this screenshot, I uploaded the Northern Buckeye logo, and it found its colors, again giving me the Hex codes.
Canva is another free tool that helps with great design. In the Colors section, you can upload a photo and have Canva generate a palette, take a look at the color wheel and get meanings behind colors.
While Canva is a great source for color help, it also has many other templates and tools.
Educators get free accounts – just sign in with your Google account. You can even bring your Google Classroom classes into Canva to develop student projects.
Finally, we have Eyedropper which is a free tool to help you pick colors from any website. Simply go to eyedropper.org to learn more and download the free Chrome extension.
Once you’ve got the extension, go to whatever page you want and click the eyedropper icon. Mouse over the color and you will see what the code is.
Here I have selected the purple and gold colors of the Bryan City Schools website. Off to the right side once a color is selected, you can get the Hex codes for that color, plus the HSL and RGB formulas. This works on any website!