color tools

How to use the color tools

  1. Pick the input format your color is already in: HEX, RGB, HSL, or a named CSS color.
  2. Type or paste the value — every other format updates instantly so you can copy whichever your codebase uses.
  3. Use the contrast checker to compare two colors against WCAG AA and AAA thresholds for body and large text.
  4. Generate complementary, analogous, triadic, and tetradic palettes from any base color in one click.
  5. Copy the values you need, or grab the auto-generated CSS custom properties for your stylesheet.

When to use it

Use it when converting between color formats during a design system migration, checking accessibility before shipping a new component, or building a quick palette around a brand color. Alternative: dedicated color apps like Coolors.co specialize in palette discovery; this tool covers the developer workflow (convert, contrast, copy) faster and without ads or sign-up.

Frequently asked questions

How do I convert HEX to RGB?
Paste the HEX value (e.g., #2563EB) into the input field. The RGB equivalent appears immediately as `rgb(37, 99, 235)`. Click the copy button next to any format.
What's the WCAG contrast ratio rule?
AA requires 4.5:1 for body text and 3:1 for large text (18pt regular or 14pt bold). AAA requires 7:1 and 4.5:1 respectively. The checker flags both pass/fail thresholds.
Can I generate a palette from a single color?
Yes. Pick a base color and the tool produces complementary, analogous, triadic, tetradic, and monochrome variations — useful for brand systems where everything has to derive from one anchor color.
Are the colors emitted in modern CSS syntax?
Yes — the output supports both legacy `rgb()` / `hsl()` notation and the modern space-separated `rgb(255 255 255 / 0.5)` form. Pick whichever your build target prefers.
Does the tool understand CSS color names?
Yes — all 147 named CSS colors (red, royalblue, papayawhip, etc.) parse correctly. The output shows both the name and its HEX equivalent.
Can I share a palette via URL?
Currently no. The tool is stateless — for shareable palettes, copy the CSS variables block and paste into a Gist or your project repo.

Related tools

Last updated: 2026-04-27