As a designer turned developer, some tools are relevant to both and need to stay sharp in the toolbox. One of those tools I have found is the need to use color wisely and appropriately, and in a fun way. With so many options on the web, finding a good set of tools to help with color selection can be daunting. I have collected this list by category of some of my favorite (and generally free) resources for color selection, including color theme pickers, gradient makers, and accessibility helpers. Hopefully this list provides you with some additional tools for your own toolbox to keep your designs and skillset sharp.
Free Color Resource Sites (by Category)
Color Pickers
Choosing an appropriate and effective color theme for your website can be a daunting task. No ideas on where to start for your project? Already have one color that comes to mind but need help picking the rest of the palette? These are some of my favorite color picker resources to help you make your website pop!
ColorMind: AI Color Palette Maker
Coolors: Color Scheme Generator
Adobe Color Wheel: Find Complimentary Colors Based on Color Wheel
Picular: Color Picker Based On Search Term
Gradient Makers
The use of gradients on the web have become very popular, and why not because they look beautiful! But how do you choose a beautiful gradient that will fit with your color scheme? The following resources are my favorite tools for helping me make, choose, or grab the css code for gradients in my web projects.
ColorSpace: Color Palette and Gradient Maker
Coolors: Gradient Maker/Browser
Scale: Color Hue/Gradient Scales
GradientsGuru: Browse/Edit Gradients and View Image-Gradient Blend
Accessibility Color Tools
I love color, and the use of it throughout my projects! BUT when using colors, especially in combination with text, it is important for us to keep accessibility in mind. Color when used with text should have enough contrast for the text to be easily readable, but finding accessible friendly color combinations that jive with your projects color theme can at times be difficult. The following resources are my favorites for helping me check, adjust, and create a color palette with accessibility in mind. (Note. I generally shoot for at least AA compliant)
Colorable by Jxnblk: Color Contrast Checker
Color by MRMRS: Accessible Color Combinations and URL Theme Grabber
ColorBox by Lyft: Accessible Color Chooser By Shade
Coolors: Contrast Checker
Color.review: Interactive Color Contrast Picker
Inspiration
Feeling completely lost with what colors to use in your project!? You don't need to re-invent the wheel! The following resource allows you to look up color themes that have been used across the web, and you just might find some inspiration for your own project by looking up what has worked for others!
Designspiration: Get Design Inspiration/Ideas Based On a Color
Conclusion
With the right box of sharpened tools, we all can produce more beautiful, more powerful, and more effective work. One of the tools you should include in your dev toolbox is the resources for choosing beautiful, accessible, and effective colors. I hope you find some value in the above resources, and are able to pick and choose a few of your own favorites to sharpen this fun and important tool in your box.
Top comments (0)