Free Online Color Picker

Pick any color and copy its HEX, RGB, HSL, HSV and CMYK codes.

Loading the editor…

How to use this tool

To get a color code, drag in the picker or click a pixel in your own image, and the HEX, RGB, HSL, HSV and CMYK values appear with Copy buttons. It’s built for matching brand colors, grabbing a shade from a photo or a competitor’s post, and checking that text stays readable, with tints, shades and contrast ratings on white and black alongside.

  1. 01

    Choose a color

    Drag in the square to set saturation and brightness and move the Hue slider, or type any HEX, RGB or HSL value into the box.

  2. 02

    Or pick it from an image or your screen

    Click Pick from image, choose a photo or screenshot and click a pixel. In Chrome and Edge, the Screen button picks a color from anywhere on your display.

  3. 03

    Copy the code

    Copy HEX, RGB, HSL, HSV or CMYK with one click, check the contrast ratings, and click a tint or shade to make it the current color.

Color formats explained

• HEX (#F64C31): the six-digit code used in CSS, Canva and most design apps • RGB (246, 76, 49): red, green and blue from 0 to 255 • HSL (8, 92%, 58%): hue, saturation and lightness; easy to fine-tune by hand • HSV (8, 80%, 96%): hue, saturation and value, the model behind most picker squares • CMYK (0%, 69%, 80%, 4%): a quick print reference; confirm final print colors with your printer’s profile

Reading the contrast check

WCAG contrast ratios show how readable text in this color is on white or black: • 7:1 or more (AAA): best readability • 4.5:1 or more (AA): good for body text • 3:1 to 4.5:1: best for large text, headings and icons • Below 3:1: use it for backgrounds and decoration, and pick a darker or lighter shade for text

Tints, shades and brand colors on social media

Tints mix the color with white and shades mix it with black, six steps each from 15% to 90%. Use them to build matching backgrounds, borders and hover states, or a consistent look for Instagram posts, YouTube thumbnails and TikTok covers. Click any swatch to make it the current color.

Frequently asked questions

How do I pick a color from an image?

Click Pick from image, choose the image, then click the pixel you want. As you move the pointer, the HEX code under it shows in the corner.

How do I pick a color from my screen?

In Chrome or Edge on a computer, click Screen, then click anywhere on your display. In any browser, you can also take a screenshot and use Pick from image.

How do I convert RGB to HEX?

Type the RGB value, for example rgb(246, 76, 49) or 246, 76, 49, into the input box. The HEX code #F64C31 appears in the list, ready to copy.

What is a HEX color code?

A # followed by six hexadecimal digits, two each for red, green and blue. #FFFFFF is white and #000000 is black.

Which color formats can I type in?

HEX (#F64C31 or #F43), RGB (rgb(246, 76, 49) or 246, 76, 49) and HSL (hsl(8, 92%, 58%)). The picker converts them to every other format.

How should I use the CMYK value for print?

Treat it as a starting reference. For exact printed colors, match it against your printer’s color profile or the CMYK or Pantone values in your brand guide.

What does “large text only” mean?

The contrast ratio is between 3:1 and 4.5:1, which WCAG accepts for large or bold text (about 24 px, or 19 px bold). For body text, pick a shade that reaches 4.5:1.

Are my images uploaded?

No. Images are read in your browser to pick colors and stay on your device.

Can I build a color palette?

Yes. Use the tints and shades here, or open the SocQ color wheel to find complementary, analogous and triadic colors for your base color.

Is the color picker free?

Yes. It’s free with no signup and no limit.

For developers

Track color trends on Pinterest

Building a brand palette or mood board? SocQ’s Pinterest API returns public pins, search results, profiles and a user’s pins, so you can collect trending visuals and pick their colors here.

View all tools