How to use this free color picker to get HEX, RGB and HSL codes
A color picker lets you choose a color visually and read its code in the formats that CSS, design tools and printers use. Here, use the swatch picker, drag the Hue, Saturation and Lightness sliders, or type a color into the field at the top, and the HEX, RGB, HSL, HSV / HSB and CMYK values update together. Click the copy button beside any value to copy it. The starting color is #3B82F6, which reads rgb(59, 130, 246) and hsl(217, 91%, 60%).
Below the converter, five palettes are built from the color you chose: complementary, analogous, triadic, split complementary and shades and tints. A Contrast Checker tests your color against any background using WCAG 2 ratios, and a Color Blindness Preview shows how the pair looks with four kinds of color vision deficiency.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). To use a color in a design, continue with the gradient generator, the box shadow generator or the border radius generator. To read a color from a photo, open the image color picker.
Table of Use: what you type and what you get
| You have | Type it as | You get |
|---|---|---|
| A HEX code | #3B82F6 | rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) |
| A short HEX code | #f53 | #FF5533, which is rgb(255, 85, 51) |
| Three numbers from a design tool | 255, 87, 51 | #FF5733 and hsl(11, 100%, 60%) |
| A CSS color name | rebeccapurple | #663399 and rgb(102, 51, 153) |
| HSL with a turn unit | hsl(0.5turn, 50%, 50%) | #40BFBF; the hue is converted to 180 degrees |
| A print value | cmyk(0%, 50%, 100%, 0%) | #FF8000, with darkorange shown as the nearest CSS name |
| A Photoshop-style HSB value | hsb(120, 100%, 100%) | #00FF00, shown as the CSS name lime |
| Blue text on a white background | #3B82F6 with background #FFFFFF | 3.67:1, a pass for large text and UI components (3:1) and a fail for normal text (4.5:1) |
For a second opinion on a conversion, try the color code converter. A finished palette can go straight into a stylesheet that you tidy with the CSS beautifier.
Features
- Five formats at once. HEX (upper case), RGB, HSL, HSV / HSB and CMYK, with whole-number rounding. Edit any field and the others follow. A bad entry is flagged and the last good color stays.
- Flexible input. HEX in 3, 4, 6 or 8 digits, rgb() with numbers or percentages, a bare triple, hsl() with deg, grad, rad or turn, hsv() or hsb(), cmyk(), and 148 CSS names. Alpha is ignored.
- Nearest CSS name. The tool shows the exact CSS name or the closest one, found by distance in CIE Lab color space rather than by raw RGB.
- HSL sliders. Hue 0 to 360 degrees, Saturation and Lightness 0 to 100 percent. The hue is remembered when you slide saturation down to grey.
- Color history. The last 10 colors, added once a color has stayed unchanged for 0.7 seconds. It is kept only while the page is open.
- Five palettes with export. Copy CSS variables, or download JSON, ASE (Adobe) or GPL (GIMP). Duplicates are removed, so a default blue exports 14 colors. File names look like
palette-3b82f6.json. - Contrast Checker. Ratio plus five tests: AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1) and UI components (3:1). A swap button exchanges text and background.
- Color Blindness Preview. Normal vision, deuteranopia, protanopia, tritanopia and achromatopsia, for your color and your contrast pair.
- Pick from screen where the browser supports the EyeDropper API.
The CMYK numbers use the standard profile-free formula, so treat them as a starting point for print work. If the color is for an icon, build the matching icon with the favicon generator.
How to use the color picker
- Under Pick a Color, click the swatch picker, drag Hue, Saturation and Lightness, or type any supported format into the color field. Click Pick from screen if it is shown.
- Under Color Formats, read HEX, RGB, HSL, HSV / HSB and CMYK, and click the copy button next to the one you need. You can also edit any of these fields to convert from that format.
- Under Color Palettes, click any swatch to make it the main color, then use Copy CSS variables, JSON, ASE (Adobe) or GPL (GIMP) to take the set with you.
- Under Contrast Checker, choose a background with the picker or the Background colour field. Use the swap button to try the pair the other way round.
- Under Color Blindness Preview, compare the pair for each condition before you commit to it.
Who can use it
- Web developers converting a design-tool value into the form their CSS uses, then minifying with the CSS minifier.
- UI designers building a palette and exporting it to Adobe or GIMP swatch files.
- Accessibility reviewers checking text and background pairs against WCAG 2 and previewing color blindness.
- Print and brand teams who need a CMYK starting point before asking the printer for a profile-based value.
- Students and hobbyists learning how HEX, RGB, HSL and HSV relate, one slider at a time, or choosing a color for a QR code.
FAQs
What is the difference between HEX and RGB colors?
They describe exactly the same colors. HEX writes the red, green and blue values (0 to 255) as two hexadecimal digits each, like #FF5733. RGB writes them in decimal, like rgb(255, 87, 51). HEX is more compact and RGB is easier to read. Type either into this color picker and it shows the other, along with HSL, HSV and CMYK.
Which color formats can I paste into the color picker?
HEX with 3, 4, 6 or 8 digits (with or without #), rgb() or rgba(), a plain triple such as 255, 87, 51, hsl() or hsla() (the hue can use deg, grad, rad or turn), hsv() or hsb(), cmyk(), and all 148 CSS color names, including both gray and grey spellings. Alpha values are accepted but ignored, because the tool works with opaque colors.
How do I check color contrast for accessibility?
Set your text color at the top, then choose the background under Contrast Checker. WCAG 2 level AA needs at least 4.5:1 for normal text and 3:1 for large text and UI components; level AAA needs 7:1 and 4.5:1. The ratio is shown truncated, never rounded up, so 4.49 is never displayed as a pass. Each test is marked Pass or Fail.
Should I use HSL or RGB in CSS?
Both work in every browser. HSL is handier for variations: change only the lightness for lighter or darker versions, or only the saturation for a more muted one, which suits CSS variables and theming. RGB and HEX are what design tools usually hand over. Use whichever keeps your stylesheet easier to maintain, and convert between them here.
Why do my colors look different when printed?
Screens mix light (RGB) while printers mix ink (CMYK), and many bright screen colors fall outside what ink can reproduce. The CMYK values here use the standard formula without a color profile, which is a fair starting point. Print shops convert with an ICC profile for their press and paper, so ask for their numbers or a proof when a brand color matters.
How are the color palettes generated and exported?
Complementary, analogous, triadic and split-complementary colors rotate the hue by 180, ±30, 120 and 240, and 150 and 210 degrees, keeping saturation and brightness. Shades and tints mix the color with 25, 50 and 75 percent black or white. Click any swatch to make it the main color, or export the set as CSS variables, JSON, an Adobe ASE file or a GIMP GPL file.
How accurate is the color blindness preview?
It applies the Machado, Oliveira and Fernandes (2009) model at full severity for deuteranopia, protanopia and tritanopia, in linear RGB, plus a luminance-only view for achromatopsia. That shows complete color blindness. Most people with a color vision deficiency have a milder form and see more difference than the simulation suggests, so treat it as a worst case, not a diagnosis.
Is it safe to use, and how does Pick from screen work?
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The Pick from screen button appears only in browsers that provide the EyeDropper API, such as Chrome and Edge. It lets you click anywhere on screen and hands the page just the one color you clicked. Color history lasts only until you close the page.