Color tools turn a vague idea about color into exact, usable values. A designer can say a button should be a calm green, but a browser needs a precise code, a layout needs colors that read clearly for every visitor, and an image may already hold the perfect palette waiting to be pulled out. This guide covers the color tools on this site: how to convert between color formats, pick and sample colors, build palettes, and check that your colors work for everyone who sees them.
In this guide
How color is written: hex, RGB and HSL
A color on a screen is made of red, green, and blue light mixed together, and there are three common ways to write that mix. Each describes the same colors, chosen for whoever is reading the value.
Hex is six characters after a hash symbol, two each for red, green, and blue, so #1D9E75 is one specific green. RGB writes the same thing as three numbers from 0 to 255, such as rgb(29, 158, 117). HSL takes a different angle: hue as a position from 0 to 360 around a color wheel, then saturation and lightness as percentages. HSL is the easiest of the three to adjust by hand, because nudging the lightness value does exactly what it sounds like.
Converting between color formats
You will often have a color in one format and need it in another. A brand guide gives you a hex code, a graphics program wants RGB, and you reach for HSL when you want to lighten a shade without changing anything else.
The color converter translates a color between hex, RGB, and HSL instantly, so a value from one source drops cleanly into a tool that expects another.
Picking and sampling colors
Sometimes you do not have a code at all, you just know the color you want when you see it. The color picker lets you choose a color visually and read back its exact hex and RGB values. It is the bridge between that one and a precise value you can paste into a stylesheet or a design file.
Building color palettes
A single color is rarely enough. A design needs a small set of colors that work together, and assembling that set by guesswork is slow. The color palette generator builds a coordinated palette you can start from.
When a color scheme you like already exists somewhere, in a photograph, a screenshot, or a piece of artwork, the color palette extractor pulls the main colors out of that image so you can reuse them exactly instead of trying to match them by eye.
Color contrast and readability
Color is not only about how a design looks. It decides whether people can read it. Text that sits too close in color to its background is tiring to read, and for a visitor with low vision it can be impossible.
The Web Content Accessibility Guidelines set a clear standard for this. Normal text should have a contrast ratio of at least 4.5 to 1 against its background, and larger text at least 3 to 1. The color contrast checker measures the ratio between a text color and a background color and tells you whether it meets the standard, so a readability problem is caught before the page goes live, not after.
Designing for color blindness
Around one in twelve men and one in two hundred women have some form of color blindness, most commonly difficulty telling red and green apart. For them, a design that carries meaning through color alone can simply fail.
The classic example is a form that marks errors in red and successes in green with nothing else to tell them apart. To a red-green color blind visitor, those two states can look identical. The color blindness simulator shows how a design appears to people with different types of color blindness, so you can spot a problem like that and add a second signal, an icon or a label, before it ships. The full set of color tools lives in the image tools category, and each one runs in your browser with no signup.
Free color tools used in this guide
Frequently asked questions
What is the difference between hex and RGB?
They describe the same color in different notation. Hex writes it as six characters after a hash symbol, and RGB writes it as three numbers from 0 to 255 for red, green, and blue.
What is a good color contrast ratio?
The Web Content Accessibility Guidelines set 4.5 to 1 as the minimum contrast for normal text and 3 to 1 for large text.
How do I get the colors out of an image?
The color palette extractor reads a photo or screenshot and pulls out its main colors, so you can reuse a scheme that already exists.
Why should I check a design for color blindness?
About one in twelve men have some form of color blindness. A design that signals meaning through color alone can be unreadable for them, so it is worth testing.
Are these tools free?
Yes. Every color tool on the site is free, runs in your browser, and needs no account.