Don't launch a heavy design app just to check one color code — free online color picker and converter

HEX · RGB · HSL

HEX	`#C8FF3E` — the common format for the web, CSS and design tools. The 3-digit form (`#ff0`) is shorthand for 6 digits
RGB	`rgb(200, 255, 62)` — red, green and blue from 0 to 255. Use it when you compute colors in code
HSL	`hsl(79, 100%, 62%)` — hue, saturation, lightness. The easiest way to make a color "a bit lighter" or match a tone

Paste any of the three formats into the HEX field and the other two update at once; the copy button next to each value drops it into CSS or a design tool. A 3-digit HEX is expanded by doubling each digit (#ff0 becomes #FFFF00), RGB and HSL are converted with the standard formulas, and the displayed values are rounded to whole numbers.

How to use it

Pick — click the large swatch to open your device's color picker, or paste #ff0, rgb(255,0,0) or hsl(200,50%,50%) into the HEX field. Fine-tune with the H (0–360), S (0–100) and L (0–100) sliders. The last 12 colors you settle on stay in the recent row and reload with a click.
From image — choose a photo and its 8 dominant colors appear as chips labeled with their HEX codes. Clicking a chip makes it the current color and copies it; tapping directly on the photo samples the exact pixel under your finger (eyedropper).
Harmonies — six color schemes are generated from the current color. Click any chip to copy its HEX.
Contrast — enter a text color and a background to see a preview rendered in that pair (large text plus a 14 px line), the contrast ratio and pass/fail for three thresholds. Swap colors flips the pair for comparison.

How the six harmonies are built

Each one rotates the hue (H) of the current color around the color wheel while keeping saturation and lightness unchanged.

Complementary	the base plus the color 180° opposite. Accent buttons and highlights
Analogous	−30°, base, +30°. Calm, unified combinations
Triadic	three colors 120° apart. Vivid but balanced
Split complementary	base, +150°, +210°. Softer than a straight complement
Tetradic	four colors 90° apart. When categories need distinct colors
Shades	same hue and saturation, lightness stepped through 90 · 75 · 60 · 45 · 30 · 20 · 10%. Hover states, background tints, gradients

Why check color contrast?

The web accessibility guidelines (WCAG) call for body text to have at least 4.5:1 contrast against its background, and large text or buttons at least 3:1. That is why white text on a pretty pastel background is so hard to read. Enter a text color and a background on the Contrast tab and you instantly get the ratio and whether it passes AA and AAA.

How the ratio is calculated

The tool uses the WCAG 2 relative luminance formula. Each channel is scaled to 0–1 and linearized out of sRGB gamma (values at or below 0.03928 are divided by 12.92; above that, ((v + 0.055) / 1.055) raised to the power 2.4), then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue. Add 0.05 to each luminance and divide the lighter by the darker: the result runs from 1:1 (identical colors) to 21:1 (black on white). Three verdicts are shown — body text AA at 4.5:1, large text / UI AA at 3:1 and body text AAA at 7:1. WCAG defines large text as at least 18 pt (about 24 px), or 14 pt (about 18.7 px) when bold.

How colors are extracted from an image

The photo is read at up to 900 px on its longer side and every fourth pixel is sampled. Each sample goes into a bucket that groups R, G and B into 16 levels apiece, and the buckets are counted (mostly transparent pixels are skipped). The most frequent buckets are averaged into colors, and any candidate within an RGB distance of 40 of one already chosen is dropped, leaving 8 colors that are actually distinct. That is why a sky photo yields blue, cloud white and ground tones rather than eight near-identical blues.

Extract colors from an image scans the pixels, picks out the 8 most common colors as a palette, and lets you tap any spot to sample that exact color. The image never leaves your browser.

Frequently asked questions

What happens to the alpha in rgba or hsla values?

Only the three color numbers are read; the alpha value is ignored. The contrast tab cannot judge how a semi-transparent color actually looks over its background, so check the composited result instead.

Where are recent colors stored?

Only in this browser's local storage — nothing is sent to a server. Clearing site data or opening the page on another device starts with an empty row.

The contrast passes but the text is still hard to read

The ratio measures brightness difference only. Colors that differ in hue but not in lightness (red text on green, say) score low, while a high ratio can still be hard to read if the type is very thin or small. That is what the 14 px sample line in the preview is for — check it on a real device.

Does it handle CMYK or Pantone?

No. It works with the three screen color systems only: HEX, RGB and HSL.

Related tools

Personal Color Analysis — find the color family that suits your skin and hair before choosing a palette.
Pixel Art Converter — turn a photo into a sprite with a reduced palette.
QR Code Generator — check foreground and background contrast before making a brand-colored QR code.
Color Spot Test — see how well you tell subtle shades apart.