Hex Color Picker

What is a hex color?

A hex color is a six-character code that tells a screen exactly which color to draw. It looks like #FF6B6B or #1A73E8 — a hash sign, followed by six hexadecimal digits. Hex is short for "hexadecimal," which means base-16 counting: the digits 0 through 9, then A through F for the values 10 through 15.

Those six digits are really three pairs. The first pair sets red, the second sets green, the third sets blue. Each pair runs from 00 (none of that color) to FF (the maximum, which is 255 in regular decimal). Multiply 256 possible red values by 256 green by 256 blue and you get 16,777,216 distinct colors — every shade your monitor can render, encoded in seven characters.

That's why hex won. RGB needs commas and parentheses (rgb(255, 107, 107)). HSL needs percent signs and degree marks. Hex fits cleanly into CSS, into a Figma sidebar, into a Slack message, into a sticky note. It's the universal handshake of digital color.

How to use the Hex Color Picker

The picker has two ways in. Use whichever matches what you already have.

1. Click the color swatch to open your browser's native color picker. Drag around the gradient, click the shade you want, and the hex code fills in below.
2. Type or paste a hex code into the HEX field. The preview updates as soon as you've typed a valid code (either three or six digits after the hash).

The moment you settle on a color, the tool shows you three things at once: the hex code, the RGB equivalent, and the HSL equivalent. Copy whichever one your destination wants. CSS takes all three; some design tools prefer one over the others.

Nothing leaves your browser. The picker runs as JavaScript on your machine, which is why it's instant and why your color choices stay private — useful if you're sampling brand colors from confidential mocks.

Reading a hex code (a worked example)

Take the coral red used in plenty of modern UI designs: #FF6B6B. Split it into pairs:

• FF = red channel = 255 (the maximum — full red)
• 6B = green channel = 107 (a moderate amount of green)
• 6B = blue channel = 107 (the same moderate amount of blue)

Equal green and blue with full red gives you red with a touch of warmth lifted toward pink. That's the coral look. Written as RGB it's rgb(255, 107, 107); written as HSL it's hsl(0, 100%, 71%), which reads as "pure red hue, full saturation, lighter than middle."

How did 6B become 107? Hex digits use base 16, so the left digit is the sixteens place and the right digit is the ones place. 6 means six sixteens (96). B means eleven ones. Add them and you get 107. The same logic applies to every pair: FF is fifteen sixteens (240) plus fifteen ones (15), which is 255.

Once you can read a hex code at a glance, scanning a CSS file feels like reading a language instead of decoding a cipher. #1A73E8? That's low red, medium-high green, and almost-full blue — Google's blue. #34A853? Low red, full green, medium blue — Google's green.

Common hex codes worth memorizing

You don't need to know every shade, but a small mental palette of canonical codes saves real time. Most modern websites are built on a handful of design-system shades, and Tailwind, Material Design, and Bootstrap all converge on similar numbers.

The pattern that jumps out: brand colors aren't random. They cluster in saturated mid-tones because those colors stay legible against both white and dark backgrounds. If you're picking a new brand color and your hex code has a digit higher than D or lower than 2 in any channel, you're probably drifting toward something that will fight you in dark mode later.

Contrast and accessibility

Two colors that look fine on your monitor in your office may be unreadable to someone with mild color blindness in bright sunlight on a phone. The Web Content Accessibility Guidelines (WCAG) put a number on it: contrast ratio.

The ratio compares the relative luminance of two colors — how bright each one appears to a typical eye. A ratio of 1:1 means identical colors (invisible). A ratio of 21:1 is the maximum, pure black on pure white. WCAG defines two tiers:

• AA (the minimum): 4.5:1 for normal body text. 3:1 for large text (18pt+ or 14pt+ bold).
• AAA (the better target): 7:1 for normal text. 4.5:1 for large text.

Some practical anchors: black on white is 21:1. #6B7280 gray on white is 4.83:1 — barely passes AA. #9CA3AF gray on white is 2.85:1 — fails AA for body text, so it should only be used for hints or disabled states. #3B82F6 blue on white is 3.68:1 — passes AA for large text but fails for small body copy, which is why design systems pair that blue with white text on a blue background (where the contrast flips to 12.4:1) instead.

If you're choosing brand colors in the Hex Color Picker, jot the codes down, then run them through a contrast checker before committing. The picker shows the color in isolation; contrast only matters once you pair two of them.

Hex versus RGB versus HSL

All three notations describe the same set of 16.7 million colors. They differ in what they make easy.

• Hex is dense and copyable. Best for storing, sharing, and writing in CSS. Worst for tweaking — going from #FF6B6B to a slightly darker version means doing hex math in your head.
• RGB is the underlying truth — three numbers from 0 to 255. Useful when you need to script color math (averaging two colors, blending toward a target). The eye-strain version of hex.
• HSL separates hue (the actual color), saturation (how vivid), and lightness (how close to white or black). This is the notation designers actually think in. Want a darker shade of the same color? Drop the lightness from 71% to 50%. Want a more muted version? Drop the saturation. HSL is the format you reach for when you're tuning a palette, not picking a single shade.

Most modern CSS uses hex for fixed colors and the new hsl() or oklch() notations for design tokens that need to vary. The Hex Color Picker shows you all three side by side so you can pick the right output for the right destination.

Related color tools

The Hex Color Picker is one entry point into a small family of color utilities, each focused on a different step of the workflow:

• Hex to RGB Converter — focused conversion when you have a hex and only need RGB output (without the picker or HSL noise).
• Color Converter — translates between hex, RGB, HSL, HSV, CMYK, and named colors in one place.
• Color Name Finder — give it a hex, get back the closest CSS named color (handy when you'd rather write tomato than #FF6347).
• Color Palette Generator — builds a coordinated five-color palette from a single starting hex. The next stop after the picker if you're designing a brand.
• Gradient Generator — combines two or more hex codes into a CSS linear or radial gradient with copyable code.

Frequently asked questions

What does the # symbol mean in a hex code?

It's a signal to CSS (and most design tools) that what follows is a hexadecimal color, not a regular number or an identifier. Some tools accept hex codes without the hash, but always include it when writing CSS — color: #FF6B6B is correct, color: FF6B6B is invalid.

Are hex codes case-sensitive?

No. #FF6B6B, #ff6b6b, and #Ff6B6b all produce the same color. CSS tooling typically normalizes to lowercase. Some style guides (like Tailwind's docs) prefer uppercase for readability. Either is fine; just pick one and stay consistent inside a single codebase.

What's the difference between #F00 and #FF0000?

Nothing visually — they're the same color (pure red). The three-digit version is shorthand that the browser expands by doubling each digit: F becomes FF, 0 becomes 00. Shorthand only works when each color channel has matching digits, so #FA0 works (= #FFAA00) but #FE0 can't be shortened from #FFEE00 wait — yes it can, because each pair is matching. A code like #FE6B6B can't be shortened because the E and 6 pairs don't repeat.

Can hex codes include transparency?

Yes — eight-digit hex codes add an alpha (transparency) channel. #FF6B6B80 is the same coral red at 50% opacity (80 in hex is 128 in decimal, which is roughly half of 255). The last two digits run from 00 (fully transparent) to FF (fully opaque). Older browsers don't support eight-digit hex; use rgba() if you need to support IE 11.

Why are some colors impossible to match between my screen and a printed page?

Screens and printers use different color systems. Screens emit light (RGB — red, green, blue mixed additively). Printers absorb light (CMYK — cyan, magenta, yellow, black mixed subtractively). Many vivid screen colors — bright neon greens, electric blues — fall outside the CMYK gamut and can't be reproduced by inks. If you need print-perfect colors, design from CMYK first and check the hex preview second, not the other way around.

How do I pick an accessible text color for a background?

Use the hex code of your background, then test text colors against it using a contrast ratio. White text on #6B7280 gives you 4.83:1, which clears WCAG AA. White text on #9CA3AF only gives 2.85:1, which fails. A quick rule of thumb: if your background hex has no digit higher than 8, white text usually works; if every digit is A or higher, switch to dark text.

What's the difference between hex and OKLCH?

Hex is a positional code for a specific RGB triplet — it tells the screen exactly what to render. OKLCH is a newer notation built around how humans perceive color: it has a perceptually uniform lightness scale, so adjusting an OKLCH value gives predictable visual changes. Hex is universal and supported everywhere. OKLCH is supported in all modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+) and is becoming the preferred notation for design tokens because it makes generating accessible color scales much easier. Most teams still ship hex for fixed brand colors and reach for OKLCH for systematic palettes.