toolkit

Color Tools

Runs in browser

Pick colors, build palettes, and ensure accessible contrast

Color Preview

How to Use

Pick and convert colors.

  • Select color visually or enter HEX/RGB/HSL
  • View Shades and Tints automatically
  • Copy values in any format

Shades & Tints

Lighter and darker variations

About Color Tools

Color tools help designers and developers work with colors across different formats, generate harmonious palettes, and ensure accessibility. Understanding color theory and formats is essential for creating visually appealing interfaces.

Color Formats

HEX
#FF5733 — 6 hex digits (RGB)
RGB
rgb(255, 87, 51) — Red, Green, Blue (0-255)
RGBA
rgba(255, 87, 51, 0.8) — RGB + Alpha
HSL
hsl(11, 100%, 60%) — Hue, Saturation, Lightness
HSV/HSB
hsv(11, 80%, 100%) — Hue, Saturation, Value/Brightness

Color Harmonies

Complementary

Colors opposite on the wheel. High contrast, vibrant.

Analogous

Adjacent colors. Harmonious and calming.

Triadic

Three colors equally spaced. Balanced and vibrant.

Monochromatic

Shades of one color. Clean and cohesive.

Accessibility (WCAG)

Web Content Accessibility Guidelines define contrast ratios:

AA Normal Text:
4.5:1 minimum contrast ratio
AA Large Text:
3:1 minimum (18px+ or 14px+ bold)
AAA Normal:
7:1 enhanced contrast
AAA Large:
4.5:1 for large text

💡 Pro Tips

  • Use HSL for programmatic color manipulation (easier to adjust)
  • Always test color combinations for accessibility
  • Consider color blindness — don't rely on color alone
  • Use CSS custom properties for theme colors

Further Reading