Color Picker: Free HEX, RGB & HSL Online

A color picker lets you choose any color on a visual palette and get its exact code. This free online color picker turns your selection into HEX, RGB, HSL, HSV and CMYK values, adds an opacity setting, and shows harmonies, shades, a contrast check and color blindness previews, so you can copy a value and get back to work.

What Is a Color Picker and How Do Color Codes Work?

A color picker is a control that lets you select a color visually and returns it as a code that software can read. The same color can be written in several formats, and each format suits a different job.

Here is how the formats in this tool describe the default blue, #3688C7:

HEX, RGB and HSL

HEX is a six-digit code that stores the red, green and blue amounts in base 16. RGB shows the same three amounts as numbers from 0 to 255. HSL describes hue (0 to 360 degrees on the color wheel), saturation and lightness (both 0 to 100 percent), which makes it the easiest format to adjust by hand.

HSV, CMYK and alpha

HSV (hue, saturation, value) is the model many painting programs use. CMYK (cyan, magenta, yellow, black) is the model used in print. The tool shows both as read-only values calculated from your pick. Alpha is transparency, from 0 (invisible) to 1 (solid). Screen colors converted to CMYK are approximate, so treat the print values as a starting point and proof them before printing.

How to Use the Color Picker

You can get a usable color code in a few clicks. Follow these steps:

1. Click or drag inside the large color area to set saturation and brightness, then move the Hue slider to change the base color.
2. Drag the Opacity slider, or type a number from 0 to 1 in the Alpha box, if you need a see-through color.
3. Prefer typing? Enter a code in the HEX field, or set the R, G and B boxes (0 to 255) or the H, S and L boxes. The other fields update automatically.
4. Under CSS Color Formats, press the copy button beside HEX, RGB, HSL, HSV or CMYK to copy that line.
5. Press Save Color to keep the color in Saved Colors for later. Use Clear All to empty the list.
6. Press the random color button when you want inspiration, then refine the result with the sliders.

Worked Example: Checking a Blue for a Button

Say you want to know whether the default blue, #3688C7, works as a button color. Start with the picker as it opens. The tool shows RGB 54, 136, 199 and HSL 206, 57%, 50%. It also shows HSV of roughly 206, 73%, 78% and CMYK of roughly 73, 32, 0, 22.

Now open the Contrast Checker tab and press Use Current beside Text Color, leaving the background white (#FFFFFF). The ratio comes out near 3.8:1. That passes AA Large (3:1) but fails AA Normal (4.5:1), so this blue is fine for big headings and poor for small body text on white.

Swap it around: set Background Color to the blue and Text Color to black (#000000). The ratio rises to about 5.5:1, which passes AA Normal and AAA Large but not AAA Normal (7:1). White button text on this blue would be a weak choice, but dark text would be readable. A darker shade from the Shades & Tints row would fix the white-text version.

How to Read the Results and Fix Common Problems

Each panel answers a different question, and each result points to a specific fix.

Shades & Tints

Shades are darker versions of your color and tints are lighter ones. Click any swatch to copy its HEX value. Use them to build hover states, borders and backgrounds that stay in the same color family. If a color fails contrast, move a few swatches toward the dark end and test again.

Harmonies

The Harmonies tab lists Complementary (2 colors), Analogous (3), Triadic (3), Split-Complementary (3) and Tetradic (4) groups built from your pick. For the blue above, the complementary partner is an orange near hue 26. Complementary pairs create strong contrast, analogous groups feel calm, and triadic or tetradic sets give variety. A common guideline is to use one color for most of the page, a second for support and an accent sparingly.

Contrast Checker

The checker shows the contrast ratio and a Pass or Fail for four levels from the Web Content Accessibility Guidelines (WCAG): AA Normal needs 4.5:1, AA Large needs 3:1, AAA Normal needs 7:1 and AAA Large needs 4.5:1. Large text usually means about 24 pixels, or about 19 pixels if bold. For body copy, aim for at least AA Normal. A fail means you should darken the text, lighten the background, or both.

Color Blindness

This tab shows how your color appears with Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind) and Achromatopsia (total color blindness). If two colors that carry meaning, such as red for errors and green for success, look almost the same here, add an icon, label or pattern instead of relying on color alone.

Who Is a Color Picker For?

This tool helps anyone who needs an exact color code instead of a guess. Typical situations include:

• Web developers who need a CSS-ready HEX, RGB or HSL line to paste into a stylesheet. If you only need to translate a code, the HEX to RGB converter does that in one step.
• Designers building a brand palette who want harmonies and shades from one starting color.
• Content creators matching a thumbnail, slide or social graphic to a brand color from a style guide.
• Accessibility reviewers who need a quick pass or fail on text and background pairs.
• Students and artists learning how hue, saturation and lightness change a color.

If you are designing a site icon, pick the brand color here first, then build the icon with the favicon generator.

Tips, Common Mistakes and Troubleshooting

Most problems come from entering a code in the wrong form or picking a color by eye only. These habits prevent them.

• Include the full HEX code. Use six digits (#3688C7). The field accepts up to nine characters, so an eight-digit code with a built-in alpha pair also fits.
• Keep RGB values between 0 and 255. HSL hue runs from 0 to 360, while saturation and lightness run from 0 to 100. Numbers outside those ranges will not give the color you expect.
• CMYK and HSV are read-only. Change the color with the picker, HEX, RGB or HSL fields instead.
• Opacity is not a new color. A color at 0.5 alpha looks different on a white page than on a dark one. Test it on the real background.
• Check contrast on the final pair. A color that passes on white may fail on light gray.
• Save as you go. Use Save Color for each candidate so you can compare them side by side before choosing.

If the contrast field seems wrong, check that both the Text Color and Background Color boxes hold valid HEX codes, such as #000000 and #FFFFFF.

Can It Pick a Color From an Image or Screen?

No. This tool picks colors from its own palette, sliders and code fields, not from a photo or from pixels elsewhere on your screen. That is the correct tool when you already know the color you want or need to build one from scratch.

When you need to sample colors from an existing picture, use the image color extractor to pull out its dominant colors, or the color palette extractor to build a palette from a photo. Then paste any HEX code you get into the HEX field here to see its RGB, HSL and CMYK values, harmonies and contrast. For related utilities, browse the image editing and optimization tools.

The color blindness previews are a quick visual guide, not a medical test. They show how a single color can shift, so confirm important designs with real users or a full accessibility review.

You now have everything you need to choose, convert and test a color in one place. Open the picker above, set your color, copy the format you need, and run it through the Contrast Checker before you publish.