Are these color tools free?

Yes. No account, no limits, no ads. Open the page and start using them.

What is a WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background. The ratio is a number from 1 (no contrast) to 21 (black on white). WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA tightens this to 7:1 and 4.5:1.

What color formats are supported by the converter?

HEX (with or without alpha), RGB and RGBA, HSL and HSLA. The tool accepts any of these formats as input and shows the equivalent in the other formats live as you type.

Are the conversions mathematically exact?

Conversions to and from HEX and RGB are exact (both are byte-precise sRGB). HSL conversions are computed in double-precision floating point, then rounded to the nearest integer percent for display. Round-tripping through HSL can shift a value by one in the last digit because of that rounding, but the visual result is identical.

Why does WCAG contrast use a strange formula?

It uses relative luminance, which weighs the red, green, and blue components by how the human eye perceives brightness (green contributes more than red, which contributes more than blue). The formula is defined in WCAG 2.1 and is the standard adopted by browsers and accessibility tools.

Will these tools tell me which color to pair with another?

Not directly. The contrast checker lets you try combinations and shows whether they pass AA and AAA at each text size. The color converter helps you find the exact code for a color you've chosen. Picking a colour scheme is a design decision the tools support rather than make.

Do the tools work offline?

After the first visit, yes. Static site, small JavaScript, no API calls. Disconnect from Wi-Fi and the tools keep working.

Free color tools, online, in-browser

Color tools for designers and developers that run entirely in your browser. Convert between HEX, RGB, and HSL color formats instantly with a live preview swatch, or check the WCAG contrast ratio between two colors to ensure your designs meet accessibility standards.

All calculations happen in JavaScript locally. No color values are sent to our servers and nothing is stored beyond your current browser session.

Read the complete color tools guide

Color palette generator

Generate complementary, analogous, triadic, and monochromatic color palettes. Copy hex, RGB, or CSS variables.

Tints & shades generator

Generate 21 tints and shades from any base color. Click any swatch to copy the hex code.

CSS gradient generator

Build linear, radial, or conic CSS gradients visually. Live preview and one-click copy.

Color converter

Convert HEX, RGB, and HSL color values instantly. Live preview swatch included.

Contrast checker

Check WCAG AA/AAA contrast ratios between two colours. Live pass/fail results.

Why color tools work better in the browser

Picking a color is a visual decision. You need to see the swatch next to your design. You need contrast to update the moment you change one of the inputs. A tool that requires a round trip to a server, even a fast one, breaks the feedback loop that designers actually rely on.

Color math is also tiny by computer standards. Converting HEX to RGB is two integer divides and three modulo operations. Converting RGB to HSL is a few floating-point comparisons. Computing a WCAG contrast ratio is a handful of multiplications. Sending the operation to a server takes longer than just doing it in JavaScript.

In-browser tools update live. Drag the hue slider and the swatch follows. Type a new HEX value and the contrast verdict updates in the same frame. The experience matches what designers expect from a desktop tool.

How the color tools work

The color converter is pure JavaScript. HEX strings are parsed as bytes, RGB triples are mapped to HSL using the standard rgb-to-hsl formula, and the result is displayed in all three formats simultaneously. A swatch element gets itsbackground-color set directly from the current value so the preview is always live.

The contrast checker uses the WCAG 2.1 relative luminance formula: convert each color to linear-light RGB, apply the human-perception weights (0.2126 R, 0.7152 G, 0.0722 B), and compute the ratio between the lighter and darker luminance. The result is checked against the AA and AAA thresholds for normal and large text. Live verdict, no waiting.

In-browser color tools vs the alternatives

Approach	Live preview	Cost	Best for
In-browser (this site)	Yes	Free	Quick conversions, contrast checks during a design review
Browser DevTools color picker	Yes	Free	Editing CSS variables live on a page
Design applications	Yes	Subscription / free tier	Full design workflow with shared libraries

DevTools is the right answer if the color you want to change is already in a page in your browser. A dedicated design application is the right choice when you are inside a design file. The in-browser tools here cover the in-between case: when you need a conversion or a quick contrast verdict without opening a heavier application.

When to use these tools

Starting a new design system? Build a harmonious set with the palette generator, then expand a single hue into a full ramp using tints and shades.
Polishing typography or buttons? Run color pairings through the WCAG contrast checker so they pass AA and AAA at every text size.
Need to translate a HEX value into RGB for a Canvas fill or into HSL for a theme token? Use the color format converter.
Designing a hero section or button background? Build a linear, radial, or conic CSS gradient visually and copy the result straight into your stylesheet.

Frequently asked questions

Are these color tools free?: Yes. No account, no limits, no ads. Open the page and start using them.
What is a WCAG contrast ratio?: WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background. The ratio is a number from 1 (no contrast) to 21 (black on white). WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA tightens this to 7:1 and 4.5:1.
What color formats are supported by the converter?: HEX (with or without alpha), RGB and RGBA, HSL and HSLA. The tool accepts any of these formats as input and shows the equivalent in the other formats live as you type.
Are the conversions mathematically exact?: Conversions to and from HEX and RGB are exact (both are byte-precise sRGB). HSL conversions are computed in double-precision floating point, then rounded to the nearest integer percent for display. Round-tripping through HSL can shift a value by one in the last digit because of that rounding, but the visual result is identical.
Why does WCAG contrast use a strange formula?: It uses relative luminance, which weighs the red, green, and blue components by how the human eye perceives brightness (green contributes more than red, which contributes more than blue). The formula is defined in WCAG 2.1 and is the standard adopted by browsers and accessibility tools.
Will these tools tell me which color to pair with another?: Not directly. The contrast checker lets you try combinations and shows whether they pass AA and AAA at each text size. The color converter helps you find the exact code for a color you've chosen. Picking a colour scheme is a design decision the tools support rather than make.
Do the tools work offline?: After the first visit, yes. Static site, small JavaScript, no API calls. Disconnect from Wi-Fi and the tools keep working.