Pick Colors, Convert Between Formats, and Discover Harmonies. Supports HEX, RGB, HSL, HSV, CMYK, and LAB Formats.
Type a value in any supported notation — a HEX code like #1364DD, an rgb() string, or an hsl() string — or drag the color wheel to choose one visually. The tool parses whichever format you give it, so there is no need to tell it what you are pasting.
All six notations are calculated from your color simultaneously: HEX, RGB, HSL, HSV, CMYK and LAB. There is no convert button and no dropdown to set a target format — change the input and every output updates on the same keystroke.
Click any value to copy it to your clipboard, already formatted for where it is going — a bare HEX code for CSS, an rgb() function for a stylesheet, CMYK percentages for print artwork.
Use your color as the base for a complementary, analogous, triadic, split-complementary, square or monochromatic harmony, and check any pairing against the WCAG AA and AAA contrast thresholds before you commit to it.
HEX and RGB for the web, HSL and HSV for reasoning about hue and saturation, CMYK for print, and LAB for perceptual work. You never pick a direction of conversion because every format is derived at once.
Complementary, analogous, triadic, split-complementary, square and monochromatic schemes are generated from the color you entered, with each member of the scheme shown in full so you can copy it directly.
Contrast ratios are computed from relative luminance, the same way the WCAG formula defines it, and each pairing is marked pass or fail against the AA and AAA thresholds — so an accessibility problem shows up while you are still choosing the color.
Each color is reported with its nearest common name plus its brightness and saturation characteristics, which is useful when you need to describe a value in a ticket or a design note rather than paste a code.
A set of established palettes is built in, so you can start from a known-good scheme instead of a blank color wheel when you have nothing to convert yet.
Every conversion is arithmetic performed in your browser. No color value, palette or file is sent to a server, so there is nothing to log and nothing to leak.
Front-end developers hit this constantly. A brand guideline arrives in CMYK because it was written for print, a design file exports HEX, and a CSS variable that needs an alpha channel wants rgb() or hsl(). Converting by hand is arithmetic nobody should do twice, and getting it wrong by a single digit produces a color that looks almost right, which is harder to spot than a color that looks wrong.
Designers moving work between screen and print need CMYK alongside HEX, because a saturated screen color often has no faithful print equivalent. Seeing both notations side by side makes the gap visible early, rather than at proofing.
Anyone working on accessibility needs contrast ratios, not opinions. A pairing that looks readable on a bright monitor can fail WCAG AA outright. Because the contrast check sits next to the conversion here, you can adjust lightness in HSL and watch the ratio move until it passes — which is far faster than converting, pasting into a separate checker, and starting over.
HSL and HSV are also the practical way to build a scale. Holding hue and saturation fixed while stepping lightness gives you a coherent set of tints and shades for a design system, and this tool shows the HEX equivalent of each step so the result can go straight into code.
Paste the HEX code into the input and read the RGB row — the conversion is immediate. The arithmetic itself is straightforward: a HEX code is three pairs of hexadecimal digits, and each pair is one channel converted to a 0–255 decimal. #1364DD is rgb(19, 100, 221), because 13 is 19, 64 is 100 and DD is 221 in decimal.
Both describe a color as hue, then two further axes, but the third axis differs. HSL uses lightness, where 100% is always white and 50% is the pure hue. HSV uses value (brightness), where 100% is the most vivid version of the hue rather than white. HSL is usually easier for building tints and shades; HSV maps better to how color pickers in image editors behave.
Because a plain RGB-to-CMYK formula has no way to know your printer, ink set or paper. A colour-managed conversion uses an ICC profile for that specific output; this tool uses the standard mathematical conversion instead. Treat the CMYK values here as an accurate starting point for specifying a colour, and let your print provider handle profile-based conversion for final artwork.
WCAG 2.1 level AA asks for at least 4.5:1 for normal body text and 3:1 for large text, which it defines as 18pt, or 14pt bold, and above. Level AAA raises those to 7:1 and 4.5:1. Non-text elements such as icons and input borders need at least 3:1 under AA. The tool marks each pairing against these thresholds so you do not have to remember which applies.
LAB describes a colour by lightness plus two opponent axes, and it is designed to be perceptually uniform — equal numeric steps look like equal visual steps, which is not true of RGB or HEX. That property makes it the right space for judging whether two colours are similarly bright, or for generating a scale whose steps feel evenly spaced.
No. Every conversion, harmony and contrast calculation runs in your browser. Nothing is transmitted to a server, which also means the tool keeps working with your connection off.
No — that is a separate tool. This page converts a colour you already have between notations. If you want to sample colours out of a photo or screenshot and build a palette from it, use the Color Picker from Image tool instead.