Color & Design Tools

Color decisions affect everything from brand recognition to accessibility compliance. Whether you are picking a palette for a new project, checking contrast ratios for WCAG compliance, or generating CSS gradients, these tools handle the color side of design without requiring Figma or Photoshop.

Tools in This Collection

Frequently Asked Questions

What contrast ratio do I need for WCAG compliance?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 and 4.5:1 respectively. Our contrast checker shows both levels and tells you whether your color combination passes.
How do I extract colors from an existing image?
Use our image color picker to upload any image and click to sample exact color values. It returns hex, RGB, and HSL values so you can match brand colors or build palettes from photography.
What is the difference between hex and RGB color formats?
Hex uses a six-character code like #FF5733, while RGB specifies red, green, and blue values from 0-255 like rgb(255, 87, 51). They represent the same colors — hex is more compact for CSS, RGB is easier to read and adjust programmatically.