Color Picker
Choose a color with the picker or type a HEX code to get its HEX, RGB and HSL values, ready to copy into CSS, design tools or code. See lighter and darker variations, matching colors and how readable text would be on it.
Contrast ratios follow WCAG 2: 4.5 : 1 is the minimum for normal text (AA), 3 : 1 for large or bold text, and 7 : 1 for AAA.
- HEX
- #4F46E5
- RGB
- rgb(79, 70, 229)
- HSL
- hsl(243, 75%, 59%)
Click any swatch to make it the current color. Everything is calculated in your browser.
How to Use the Color Picker
- Click the color swatch to open your device’s color picker, or type a HEX code such as #4F46E5 or #FFF.
- In Chrome or Edge on a computer, press Pick from screen to sample any color visible on your screen.
- Copy the HEX, RGB or HSL value you need with the Copy button next to it.
- Click any tint, shade or matching color to make it the current color and see its codes.
Examples
Indigo
- Input
- #4F46E5
- Output
- HEX #4F46E5 RGB rgb(79, 70, 229) HSL hsl(243, 75%, 59%) Contrast with white: 6.29 : 1 (AA)
Short HEX code
- Input
- #FFF
- Output
- HEX #FFFFFF RGB rgb(255, 255, 255) HSL hsl(0, 0%, 100%)
About the Color Picker
Designers and developers switch between color formats all the time: HEX in CSS and design handoffs, RGB in code and image editors, and HSL when adjusting lightness or saturation by hand. This tool shows all three for the same color so you can copy whichever you need.
HEX and RGB describe the same thing, the amounts of red, green and blue from 0 to 255, written in hexadecimal or decimal. HSL describes hue (0–360°), saturation and lightness, which makes it easier to create lighter or darker versions. HSL values are rounded to whole numbers, so converting them back can be one step away from the original.
Tints and shades keep the same hue and saturation and change only the lightness. Matching colors rotate the hue around the color wheel: the complementary color is opposite (180°), analogous colors are neighbors (±30°) and triadic colors are evenly spaced (120°).
Contrast ratios use the WCAG 2 formula: 4.5 : 1 is the minimum for normal text at level AA, 3 : 1 for large text and 7 : 1 for level AAA. Everything is calculated in your browser, and nothing is uploaded.
Frequently Asked Questions
How do I convert HEX to RGB?
Type or paste the HEX code into the HEX box and the RGB value updates instantly. Each pair of HEX digits is one channel: in #4F46E5, 4F is 79 red, 46 is 70 green and E5 is 229 blue.
Can I pick a color from an image or my screen?
In Chrome, Edge and other Chromium-based desktop browsers, Pick from screen lets you sample any pixel on your screen, including an image you have open. Other browsers do not support this yet, although some include an eyedropper in the color picker that opens when you click the swatch.
What is a good contrast ratio for text?
At least 4.5 : 1 for normal text and 3 : 1 for large or bold text to meet WCAG level AA. Aim for 7 : 1 for level AAA. The checks here compare your color with plain white and plain black text.
Does this support transparency?
Not at the moment; the picker works with solid colors. In CSS you can add transparency with rgb(79 70 229 / 50%) or by adding an alpha pair to the HEX code, such as #4F46E580.
Why does a color look different on another screen?
Screens differ in calibration, brightness and the range of colors they can show. The codes here are standard sRGB values, which is what browsers and most design tools use.
Related Tools
All image tools →Resize JPG, PNG, WebP and other browser-readable images locally.
Beautify minified or messy CSS with one declaration per line.
Indent and tidy HTML markup so it is easy to read, without rendering it.
Reduce image file size in your browser without uploading it.