Color Picker
Choose a color with your browser’s color picker or type a HEX code, then copy it as HEX, RGB, RGBA or HSL. Also shows harmony colors and shades.
#2563EBrgb(37, 99, 235)hsl(221, 83%, 53%)rgba(37, 99, 235, 1)Color Harmony
Complementary
Analogous
Triadic
Shades
Click any swatch to copy its HEX value.
About the Color Picker
Colors travel between tools that speak different formats: a brand guide lists HEX codes, CSS may want rgb() or hsl(), and a design app shows yet another notation. This picker takes one color and shows it in HEX, RGB, RGBA and HSL at the same time, each with its own copy button.
Click the swatch next to the text box to open your browser’s built-in color chooser, whose look depends on your browser and operating system, or type a HEX value. Full codes such as #2563eb, the same code without the #, and short codes such as #fff are all accepted. If what you type isn’t a valid HEX code, the box is outlined in red and the last valid color stays on screen. HSL values are rounded to whole degrees and percentages, so turning an HSL value back into HEX can be off by a small amount.
Below the values, the tool suggests related colors by rotating the hue around the color wheel while keeping saturation and lightness the same: complementary (180°), analogous (30° either side) and triadic (120° and 240°). The Shades strip keeps hue and saturation fixed and steps lightness from 95% down to 15%. Click any of these swatches to copy its HEX code.
For a complete five-color scheme, try the Color Palette Generator. To check whether text in your color will be readable on a background, use the Contrast Checker.
How to use the Color Picker
- 1
Choose a color
Click the color swatch to open the picker, or type a HEX code into the text box.
- 2
Copy a format
Click the copy icon next to HEX, RGB, HSL or RGBA.
- 3
Explore related colors
Look at Color Harmony and Shades, and click any swatch to copy its HEX value.
What it can do
Four formats at once
HEX, rgb(), rgba() and hsl() values that update as you pick.
Flexible HEX input
Three- or six-digit codes, with or without the #; invalid input is flagged.
Harmony suggestions
Complementary, analogous and triadic colors calculated from the current hue.
Nine shades
The same hue and saturation from very light to very dark.
Click to copy
Every value and every swatch can be copied with one click.
Limitations
- No CMYK, LAB or named-color output.
- Transparency can’t be set; the RGBA value always has an alpha of 1.
- There is no eyedropper for picking a color from an image or the screen, although some browsers’ color choosers include one.
- Shades and harmonies are simple HSL calculations, so equal steps don’t always look equally bright.
Privacy
All conversions run in your browser; the colors you pick are not sent anywhere.
Frequently asked questions
How do I convert a HEX code to RGB?
Type or paste the HEX code into the text box and read the RGB line. Each pair of hex digits is one channel: in #2563EB, 25 is red (37), 63 is green (99) and EB is blue (235).
Can I enter a three-digit HEX code like #fff?
Yes. Short codes are expanded by doubling each digit, so #fff becomes #FFFFFF and #1a3 becomes #11AA33.
What’s the difference between RGB and HSL?
RGB describes a color as amounts of red, green and blue light, each from 0 to 255. HSL describes the same color as hue (an angle on the color wheel), saturation and lightness, which makes it easier to create lighter, darker or more muted versions.
Does it give CMYK values for print?
No. Screen colors only convert accurately to print with the printer’s color profile, so this tool sticks to the web formats HEX, RGB and HSL.
What are complementary and triadic colors?
Complementary colors sit opposite each other on the color wheel, 180° apart, and give strong contrast. Triadic colors are three hues spaced 120° apart.
Ratings & Reviews
Rate Color Picker
Help others by sharing your experience. Your rating is shown without your name.
More Design Tools
View all →Color Palette Generator
Generate five-color palettes from color-harmony rules or at random
Font Preview
Preview and compare Google Fonts with your own text
Colorblind Simulator
Approximate how an image looks with seven types of color blindness
Contrast Checker
Check the WCAG contrast ratio between text and background colors