Color Tools
Free online color tools: convert HEX/RGB/HSL, check WCAG contrast ratios, and generate color palettes. No signup, works in your browser.
5 tools
Color Tools covers three separate jobs that come up when working with color in a design or a codebase: translating one notation to another, checking a pair for legibility, and expanding a single color into a set. The Converter moves a color between HEX, RGB and HSL. The WCAG Contrast Checker scores a text-and-background pair against the accessibility thresholds. The Palette Generator rotates the hue of a base color into harmonies and steps its lightness into shades. All three use standard sRGB and HSL math and run on your device.
Which tool should I use?
- Use the Converter when a value arrives in one notation and a file needs another — a HEX from a design tool into an hsl() you can tweak, or RGB channels back to HEX.
- Use the WCAG Contrast Checker before committing a text color on a background; it reports the ratio and whether it passes AA or AAA for normal and for large text.
- Use the Palette Generator to turn one starting color into complementary, analogous and triadic hues plus five lightness steps, then copy the HEX codes you want.
Limitations and things to know
- The Converter handles opaque HEX (3 or 6 digits), RGB and HSL only — no alpha channel, no named colors, and no CMYK, LAB or OKLCH.
- HSL values are rounded to whole numbers, so a HEX to HSL and back can shift by one step.
- The Contrast Checker takes HEX only and uses the WCAG 2.x luminance formula, not APCA; it cannot account for partial transparency, and you tell it whether the text counts as large.
- The Palette Generator only rotates hue and sets lightness to fixed values (20, 35, 50, 65, 80); saturation is untouched, and it does not check the resulting pairs for contrast.
Color Blindness Simulator
Preview how an image can appear under common color-vision deficiency simulations to spot risky visual distinctions.
Use toolCSS Gradient Generator
Build a CSS gradient visually, adjust its stops and direction, and copy the generated CSS value.
Use toolColor Palette Generator
Turn one base color into complementary, analogous and triadic hues plus five fixed lightness steps, as HEX.
Use toolWCAG Contrast Checker
Score a HEX text-and-background pair against WCAG 2.x AA and AAA for normal and large text; no alpha, no APCA.
Use toolHEX / RGB / HSL Color Converter
Convert one color between HEX, RGB and HSL; opaque colors only, HSL output rounded to whole numbers.
Use tool