Herramientas Web

Color picker

Pick a color with the picker, type a code, or grab one from an image. You instantly see its HEX, RGB, HSL, HSV, CMYK, and OKLCH values, whether text is readable on it, and which colors go well with it.

Blue

White text is easier to read on this color.

The chosen color is the
21.00:1Excellent
  • AA · normal text (4.5:1)
  • AA · large text (3:1)
  • AAA · normal text (7:1)
  • AAA · large text (4.5:1)
  • UI components (3:1)

Step by step

How to use it

  1. Drag inside the color box and move the hue and opacity sliders. You can also type a code in any format, for example #2447F5, rgb(36, 71, 245), or a name like “blue”.
  2. Copy the value you need with the button next to each format: HEX, RGB, HSL, HSV, CMYK, or OKLCH.
  3. To pick a color from your screen, use the eyedropper, or open “From image”, upload a photo, and tap the spot you want.
  4. In “Contrast”, check whether your text meets the WCAG AA and AAA guidelines on a background. “Variants” has tints, shades, and harmonies, and in “Favorites” you can save your own.
FAQ

Frequently asked questions

How do I convert a color from HEX to RGB, or the other way around?

Type or paste the code into any of the fields and the others update right away. For example, #2447F5 is the same as rgb(36, 71, 245) and hsl(230, 91%, 55%). You can copy each format with one click.

Which color formats does it understand?

HEX with 3, 6, or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla(), hsv(), cmyk(), oklch(), three numbers separated by commas, and English color names like red, tomato, or skyblue. If what you typed is not recognized, the field tells you.

What do AA and AAA mean in contrast?

They are the levels of the WCAG accessibility guidelines. AA asks for a contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text. AAA is stricter: 7 to 1 and 4.5 to 1. UI components, such as button borders or icons, need 3 to 1.

Can I pick a color from anywhere on my screen?

In Chrome, Edge, and other Chromium-based browsers, the “Eyedropper” button appears and lets you pick a color from any point on the screen. In other browsers, open “From image”, upload a screenshot or photo, and tap the spot you are interested in.

Is CMYK exact for printing?

No. It is an approximate conversion from RGB. Printers and the color profiles of each print shop give different results, so use it as a reference and always ask for a printed proof before production.

Are my colors or images saved on a server?

No. Everything is calculated on your device. Favorites are saved only in your browser, and the images you upload never leave it.

What a color picker is for

When you design a web page, a presentation, or an image, you need the same color in different formats: HEX for CSS, RGB for screens, HSL for adjusting tones, and CMYK as a reference for print. This tool calculates them all at once and keeps them in sync, so you do not have to convert by hand.

Contrast and accessibility

Text that is hard to read leaves out a lot of people, not only those with low vision. The contrast checker calculates the ratio between the text color and the background color using the WCAG 2.1 formula and tells you which levels it meets. If it falls short, it suggests the closest color that does, so you change as little as possible.

Color harmonies

  • Complementary: the opposite color on the color wheel. It gives maximum contrast.
  • Analogous: neighbors of the base color. They look calm and coherent.
  • Triadic: three evenly spaced colors. Vibrant and balanced.
  • Monochromatic: the same hue at different lightness. Ideal for sober interfaces.

Color formats explained

  • HEX: six digits preceded by # (for example #2447F5). It is the most widely used format in CSS and design tools.
  • RGB: the amount of red, green, and blue, from 0 to 255, which is how a screen builds color.
  • HSL and HSV: hue, saturation, and lightness (or value). They make it easy to lighten, darken, or mute a color.
  • CMYK: an approximation for print; the real result depends on the paper and the ink.
  • OKLCH: a modern CSS color space in which changing the lightness does not change the perceived hue.

Pick a color from your screen

If your browser allows it, the eyedropper picks the color of any visible point on the screen. In other browsers, upload an image and tap the spot you want. You can also type a color name such as “skyblue” or “tomato”, and the tool recognizes it.

Variants and favorites

From a base color you get tints and shades in even steps, to build a scale of bluish grays or of a brand hue. Save the ones you use often as favorites and apply them again with one click.

Privacy

Favorites are saved only in your browser, and the images you upload never leave your device.

Updated on September 29, 2026