My Tool Studio
Color

Color Picker

This color picker lets you choose any color on a saturation and brightness square and copy its HEX, RGB, HSL, HSV, CMYK and OKLCH codes with one click. Drag in the square, set the hue with the rainbow slider, or type exact numbers into the RGB and HSL fields. In Chrome and Edge on desktop, Pick from screen grabs a color from anywhere on your display, and you can also open an image and click any pixel. Below the picker you get tints, shades and tones, eight color harmonies, contrast against white and black, and extra formats such as HWB, LAB and LCH. Recent colors are kept in your browser, and a link shares the exact color. It works as a hex color picker and rgb color picker in one.

Always freeNo sign upRuns in your browser

Pick from screen needs the EyeDropper API, available in Chrome and Edge on desktop.

RGB
HSL
HEX#6366F1
RGBrgb(99, 102, 241)
HSLhsl(239, 84%, 67%)
HSVhsv(239, 59%, 95%)
CMYKcmyk(59%, 58%, 0%, 5%)
OKLCHoklch(58.54% 0.2041 277.12)
Lighter to darker (click one to select it)
Text on white: 4.47:1
Passes AA large
Text on black: 4.70:1
Passes AA
Tints (mixed with white)
Shades (mixed with black)
Tones (mixed with gray)
Color harmonies (click a swatch to select it)
Complementary
Analogous
Triadic
Split complementary
Tetradic (rectangle)
Square
Monochromatic
Shades
More formats: HWB, CIE LAB, LCH, OKLab, XYZ, decimal, binary
RGB %rgb(38.8%, 40%, 94.5%)
HWBhwb(239 38.8% 5.5%)
OKLaboklab(58.54% 0.0253 -0.2025)
CIE LABlab(50.1% 38.69 -70.49)
CIE LCHlch(50.1% 80.4 298.76)
CIE LUV50.1, -8.88, -111.2
CIE XYZ25.769, 18.504, 85.416
CIE xyY0.1987, 0.1427, 18.504
Decimal6514417
Binary01100011 01100110 11110001
Nearest web safe#6666FF

Pick a color from an image

Upload, drop or paste a photo or screenshot, then click any pixel to load it here.

Recent colors

Colors you pick are listed here, saved only in this browser.

How to use

01

Pick a color

Drag inside the square to set saturation and brightness, then move the Hue slider. You can also press Pick from screen, open the System picker, or type a value into the HEX field.

02

Fine tune with numbers

Edit the R, G and B fields (0 to 255) or the H, S and L fields to hit an exact value. Every other format and the preview swatch update as you type.

03

Copy the code you need

Press Copy next to HEX, RGB, HSL, HSV, CMYK or OKLCH. Click any swatch in the Lighter to darker strip to switch to that version of the color.

Why Color Picker

HEX, RGB, HSL, OKLCH and CMYK: which format to use

All six formats in the picker can describe the same screen color. They differ in how easy they are to read, edit and share. Pick based on where the value will be used. The examples below are all the same indigo, #6366F1, so you can compare how each notation writes it.

FormatExampleUse it for
HEX#6366F1CSS, design tools, brand guides. Short and easy to copy.
RGBrgb(99, 102, 241)CSS with transparency via rgba(), canvas and JavaScript.
HSLhsl(239, 84%, 67%)Making lighter, darker or muted versions by changing one number.
HSVhsv(239, 59%, 95%)Matching the picker square in design apps. Not valid CSS.
OKLCHoklch(58.5% 0.204 277.1)Modern CSS scales and themes with even-looking steps.
CMYKcmyk(59%, 58%, 0%, 5%)A rough print starting point. Confirm with your printer.

How to pick a color from your screen on Windows, Mac and Chrome

The quickest route in this tool is Pick from screen, which uses the EyeDropper feature built into Chrome and Edge on desktop. It works across your whole screen, not only inside the browser. Firefox and Safari do not offer it on web pages, so the button stays disabled there.

Operating systems have their own options. On Windows, the free Microsoft PowerToys app includes a Color Picker you open with Win + Shift + C. On a Mac, the built-in Digital Color Meter app in Utilities shows the values under the pointer. Browser developer tools also include an eyedropper in the color swatch of any CSS color value. Whichever you use, paste the result into the HEX field here to get every other format.

Common questions

How do I pick a color from my screen?
In Chrome or Edge on desktop, press Pick from screen, then click any pixel on your display, even outside the browser tab. The picker jumps to that color. Other browsers do not support the EyeDropper feature yet, so the button is disabled there.
How do I find the hex code of a color on a website?
Open the site in another tab or window, return here and press Pick from screen, then click the color on the site. The HEX field shows the code. You can also right-click the element, choose Inspect, and read the color value in the browser's style panel.
What is the difference between HEX and RGB color codes?
They describe the same sRGB color in two notations. RGB lists red, green and blue as numbers from 0 to 255, and HEX writes those same three numbers in base 16. rgb(99, 102, 241) and #6366F1 are identical.
Can I pick a color from an image with this color picker?
Yes. Press Open an image under the picker, then drop, paste or choose a file, or load an image URL. Click any pixel, or move with the arrow keys and press Enter, and a magnifier shows the exact pixel. For a full palette from the image, use the Color Palette from Image tool.
What is OKLCH and should I use it in CSS?
OKLCH describes a color by lightness, chroma and hue in a space designed so that equal steps look equal. It is useful for building scales where each step looks evenly lighter. All current major browsers support oklch() in CSS, but keep a hex fallback if you support very old browsers.
Can I type exact RGB or HSL values into the color picker?
Yes. The R, G and B fields take 0 to 255 and the H, S and L fields take degrees and percentages. The HEX field also accepts pasted rgb(), hsl() and CSS color names, and turns red if it cannot read the value.
Is the CMYK value from the color picker ready for print?
It is a starting point. The CMYK row uses the standard formula without an ICC print profile, so a printer may shift it. For final print colors, ask your printer for their profile or match against a physical swatch book.
Why does the screen picker give a slightly different hex than the design file?
Displays, color profiles and browser color management can change the pixel values you see. Pick from screen reads the color as rendered, not the value stored in the file. For exact values, copy them from the source file or the site's CSS.
Can I use the color picker with a keyboard?
Yes. Tab to the square and use the arrow keys to change saturation and brightness, holding Shift for bigger steps. The hue slider and all number fields are standard form controls.

More Color tools

View all

Color Palette Generator

Generate palettes with lock, harmonies and export

Color

HEX to RGB Converter

Convert HEX color codes to RGB and RGBA

Color

RGB to HEX Converter

Convert RGB and RGBA values to HEX

Color

HEX to HSL Converter

Convert HEX color codes to CSS HSL

Color