Color Theory Selector
Published on

Color Theory Selector

Authors
  • avatar
    Name
    Thomas Quan
    Twitter
Reading time

Reading time

2 min read

What is it?

A generative toolbox for selecting color harmonies that ensure AAA compliance in accessibility. It’s designed to help developers and designers quickly find the right colors that look good together while being accessible to all users.

Why build your own color theory selector?

There are many color selectors available online, but most of them don’t meet my needs when it comes to precision and accessibility. I wanted a one-stop shop where I could easily select and test colors. For example, most color wheels I found online don’t include information about AAA accessibility standards, which are crucial for ensuring that text is readable on various background colors.

This gap led me to build my own solution, allowing me to have more control over the color selection process and to ensure that all my chosen colors meet high accessibility standards.

How does it work?

The Color Theory Selector leverages React and TailwindCSS to create an intuitive interface that helps users experiment with different color harmonies, like complementary, analogous, and triadic color schemes. It also includes features that check color contrast ratios in real time, ensuring your choices are compliant with WCAG standards.

By using HSL (Hue, Saturation, Lightness) color models, users can fine-tune colors to their liking, making it easier to find the perfect balance between aesthetics and readability.

Features

  • Color Wheel: Choose from different types of color harmonies (complementary, split-complementary, triadic, and more).
  • Real-time Contrast Check: See the contrast ratios of your selected colors in real time, with automatic warnings for non-AAA compliant combinations.
  • Customizable Themes: Save and export your color themes for later use in your projects.
  • Accessible Design: Designed with accessibility in mind, ensuring that the tool is usable for everyone, regardless of their vision abilities.

Acknowledgements

Special thanks to Hunor Marton Borbely for the inspiration behind the HSL Color Picker design.

View Project