Are these color tools free?

Yes. Every color tool opens ready to use, without an account or a usage limit, and the site carries no ads.

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 (3 or 6 digits, # optional), RGB, and HSL. Pick a conversion, enter the value, and the tool shows HEX, RGB and HSL as you type. Alpha channels and rgb() or hsl() strings are not supported.

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 whole numbers (degrees and percent) for display. Round-tripping through HSL can shift an RGB channel by up to 5 out of 255 because of that rounding, usually by 1 or 2.

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?

Yes, the palette generator does. It rotates your base color's hue to give complementary, analogous, triadic or tetradic partners, or keeps the hue and steps the lightness for a monochromatic set. Run each text and background pair through the contrast checker to confirm it stays readable at the size you use.

Do the tools work offline?

Once a tool's page has loaded, yes, in that tab. Small JavaScript, no API calls: disconnect from Wi-Fi and the tool keeps working until you close or reload the tab or open another page. Opening or reloading a page needs a connection, because the site installs no service worker and the browser checks each page with the server as it opens.

Free color tools

Color tools for designers and developers that run entirely in your browser. Build a harmonious palette from one base color, spread a color into tints and shades, design a linear, radial or conic CSS gradient, convert between HEX, RGB and HSL, and check the WCAG contrast ratio between two colors.

All calculations happen in JavaScript locally, and the values you enter live only in the open tab. Our servers are not involved at any point.

Read the complete color tools guide

Color palette generator

Generate complementary, analogous, triadic, and monochromatic color palettes. Copy hex values or all colors as CSS variables.

Tints & shades generator

Generate 5, 10, or 20 tints and as many 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. Pick a new color 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 palette generator converts your base color to HSL and rotates the hue: 180 degrees for a complementary pair, 120 and 240 for triadic, 90, 180 and 270 for tetradic, and 30 and 60 degrees either way for analogous. Monochromatic keeps the hue and saturation and steps lightness from 20 to 80 percent. The tints and shades generator mixes the base color toward white or black in RGB, in 5, 10 or 20 even steps, and the gradient generator assembles standard linear-gradient(), radial-gradient() or conic-gradient() CSS from your stops and angle.

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	Privacy	Cost	Best for
In-browser (this site)	All local	Free	Quick palettes, conversions and contrast checks during a design review
Account-based palette services	Saved palettes stored server-side	Free tier + paid	Saving and sharing palettes with a team
Design applications	Local or cloud files, by app	Subscription / free tier	Full design workflow with shared libraries

A palette service with accounts makes sense when a team needs to keep and share saved palettes. A dedicated design application is the right choice when you are inside a design file, and browser DevTools when the color already sits in a page you are editing. The in-browser tools here cover the in-between case: a palette, 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. Every color tool opens ready to use, without an account or a usage limit, and the site carries no ads.
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 (3 or 6 digits, # optional), RGB, and HSL. Pick a conversion, enter the value, and the tool shows HEX, RGB and HSL as you type. Alpha channels and rgb() or hsl() strings are not supported.
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 whole numbers (degrees and percent) for display. Round-tripping through HSL can shift an RGB channel by up to 5 out of 255 because of that rounding, usually by 1 or 2.
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?: Yes, the palette generator does. It rotates your base color's hue to give complementary, analogous, triadic or tetradic partners, or keeps the hue and steps the lightness for a monochromatic set. Run each text and background pair through the contrast checker to confirm it stays readable at the size you use.
Do the tools work offline?: Once a tool's page has loaded, yes, in that tab. Small JavaScript, no API calls: disconnect from Wi-Fi and the tool keeps working until you close or reload the tab or open another page. Opening or reloading a page needs a connection, because the site installs no service worker and the browser checks each page with the server as it opens.