Color Picker, HEX, RGB, HSL, OKLCH

What an online color picker does

A color picker is a tool that lets you choose a color visually and read its exact value as code. Instead of guessing numbers, you move a cursor across a saturation and value square, drag a hue slider, or paste a value you already have, and the color picker online reports the HEX color code, RGB, HSL, and OKLCH all at once. That makes it both a color picker and a color finder: pick the shade you want by eye and the tool tells you the code, or type a code and the tool shows you the color. Designers and developers reach for an online color picker constantly, because every button, background, border, and chart needs a precise color value.

Color formats explained, HEX, RGB, HSL, and OKLCH

Every color you see on a screen is just three numbers describing how much red, green, and blue light a pixel emits. The different format names are only different ways of writing those three numbers down. HEX is a base 16 encoding, so #3b82f6 is the same color as rgb(59, 130, 246), it just takes up fewer characters and pastes cleanly into a stylesheet. RGB is the format JavaScript canvas APIs and image data use, and it gains an alpha channel through rgba() when you need transparency.

HSL rearranges the same data into Hue, Saturation, and Lightness. Hue is the position on the color wheel from 0 to 360 degrees. Saturation is how vivid the color is, from 0% gray to 100% pure. Lightness goes from black at 0% to white at 100%. The reason HSL is popular for hand editing is obvious: if you want a slightly darker version of the same hue, you only need to drop the L number. You do not need to recalculate three RGB channels in your head.

OKLCH is the newest format and it solves a real problem with HSL. The story comes next.

What is OKLCH and why it matters in 2026

HSL was invented in 1978 for early graphics workstations. It treats all hues at the same Lightness number as equally bright, which is wrong. Yellow at hsl(60, 50%, 50%) looks dramatically brighter than blue at hsl(240, 50%, 50%), even though the numbers are identical. This is why hand picked HSL palettes often look uneven, you change the hue and the perceived brightness shifts under you.

OKLCH is built on the Oklab color space, a perceptually uniform model published by Bjorn Ottosson in 2020. It uses the same three component idea (Lightness, Chroma, Hue) but the math is calibrated so that equal steps in the numbers correspond to equal steps in what your eye actually sees. Two colors with the same L value really do look equally bright. Rotate the hue and the brightness stays constant. This makes OKLCH the first practical color space for generating consistent design system palettes by formula.

CSS Color Module Level 4 ships OKLCH as a first class function. It is supported in every current Chrome, Safari, Firefox, and Edge. Tailwind v4 uses OKLCH internally for its default palette so the brightness ramp from 50 to 950 looks even regardless of which hue you pick. If you are starting a new project today, OKLCH is the right primary format. Keep HEX as a fallback for legacy tools that have not caught up yet.

WCAG contrast and accessibility

The Web Content Accessibility Guidelines define minimum contrast ratios between foreground text and its background. The two relevant levels are AA and AAA. For normal body text, AA requires a 4.5:1 ratio and AAA requires 7:1. For large text, meaning 18 point or 14 point bold, the thresholds drop to 3:1 for AA and 4.5:1 for AAA. The ratio itself is computed from the relative luminance of the two colors, a weighted sum of the linearized red, green, and blue channels.

Why does any of this matter? Roughly 15% of the global population has some form of vision impairment, and many people read screens in direct sunlight, on cheap displays, or while tired. A 4.5:1 ratio is the line below which a low contrast headline starts costing real users real comprehension. Hitting AA is a legal requirement in many jurisdictions including the EU and large parts of US public sector procurement, and it is a hard requirement for any product that wants to be widely usable.

The contrast panel on this page calculates the ratio against pure black and pure white text simultaneously, picks whichever is more readable for the preview, and shows pass / fail badges for all four WCAG thresholds. If you need a finer test against an exact body background other than black or white, copy the foreground hex, set the background as your new base color, and re-check.

Designing for color blindness

About 8% of men of Northern European descent and 0.5% of women worldwide have some form of red green color blindness. Tritanopia, the blue yellow form, is much rarer at roughly 1 in 30,000. These numbers add up to a population the size of the entire United States, which means any interface that ships a status color or a chart legend needs to read correctly to people who cannot tell red from green.

The simulation panel uses the Brettel et al. color confusion matrices to approximate how your color appears under each condition. The three swatches below your main color preview are the protanopia, deuteranopia, and tritanopia versions of the same hex. If your error red looks identical to your success green in the deuteranopia simulation, that is a signal to add an icon, a label, or a pattern so the meaning does not rely on color alone.

Good practice is to never use color as the only signal. Use a label, a shape, or an icon as well. Reserve red and green for cases where the contrast and contextual cues are strong enough that the simulation still reads correctly. Test critical UI states (errors, warnings, charts, map overlays) before they hit production, not after a user files a bug.

Tailwind v4 color system

Tailwind v4 ships a default palette built in OKLCH. Each of the 22 hue families (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone) has 11 steps from 50 to 950, and the lightness ramp is perceptually even thanks to the OKLCH foundation. That is the reason Tailwind colors look so balanced compared to older palettes.

The Tailwind row on this picker finds the nearest preset using Euclidean distance in RGB space, then prints a usable class name like bg-blue-500 or text-rose-500. If your color is more than 40 units away from any preset, the row prints "Custom" and gives you a Tailwind arbitrary value class like bg-[#3b82f6] which works without editing the theme. For a permanent custom value, extend the theme block in your tailwind.config.js (or your @theme directive in v4) and re-run the build so the JIT engine picks up the new token.

A common workflow is to start with a custom brand color, find the nearest Tailwind hue, then alias the brand color as a CSS variable so you can switch between the two without rewriting markup. Drop --brand: #3b82f6; into your :root block, reference it through var(--brand) in component styles, and you have a single source of truth that survives a redesign.

Using the HEX color picker

A hex color picker is the most common way developers grab a color, because HEX is the format that pastes straight into CSS and design tools. On this page the HEX field works two ways. Pick a color visually and the hexadecimal color code appears, ready to copy. Or paste a hex code you already have, including the short three character form, and the picker shows you the color along with its RGB, HSL, and OKLCH equivalents. That makes the tool a hex code finder as well as a color picker: if you know the look you want but not the code, the color picker hex code output gives you the exact value.

Using the RGB color picker and color wheel

The same tool doubles as an RGB color picker. RGB describes a color as three channels of red, green, and blue from 0 to 255, and it is the format JavaScript, canvas drawing, and image processing expect. Pick any color and the RGB value updates alongside the HEX color code. The hue slider acts as a color wheel: it walks through the full 360 degree spectrum so you can land on the family you want before fine tuning saturation and lightness. Using the color wheel picker first and then adjusting is often faster than typing numbers, especially when you are exploring a palette rather than matching an exact code.

Picking a color from an image

A frequent request is a color picker from image or color picker from a photo, where you sample a shade out of a screenshot, logo, or photograph. Modern browsers include a native eyedropper that many color tools, including this one, can use to pick a color from anywhere on your screen. If your browser supports the EyeDropper API, you can sample a pixel from an open image, and the picker reports its HEX color code and RGB value. This turns the page into a practical color identifier: see a color you like in a picture, sample it, and get the code you need to reuse it in your own design.

Picking a color from a picture is the fastest way to match an existing brand, recreate a shade from a reference photo, or build a palette from a mood board. Open the image in any browser tab or window, start the eyedropper, and click the exact pixel you want. Because the eyedropper samples whatever is on screen, it also works on logos, charts, app screenshots, and design files, not just photos. Once you have the HEX color code, you can convert it to RGB, HSL, or OKLCH and check its contrast in the same view.

How this compares to the Google color picker

Many people search for a Google color picker, which is the small swatch tool that appears directly in Google search results when you look up a color term. That built-in picker is handy for a quick glance, but it is limited: it shows HEX, RGB, and HSV only, and it does not check contrast, simulate color blindness, sample from an image, or export a Tailwind class. This page gives you the same instant color picking experience plus the professional extras designers and developers need, all on one screen with nothing to install.

Using the color wheel to find a color

A color wheel picker is the most intuitive way to explore color, because it lays out every hue in a continuous ring rather than as numbers. On this page the hue slider acts as your color wheel: slide through the full 360 degree spectrum to land on the family you want, whether that is a warm red, a cool teal, or a soft violet. Once the hue is right, the saturation and lightness square lets you fine tune from a muted pastel to a bold, saturated tone. Starting from the color wheel and adjusting by eye is usually faster than guessing numeric values, especially when you are building a palette from scratch.

Color picker as a color finder and identifier

Beyond choosing colors, this tool works as a color finder and color identifier. If you have a color and need to know what it is, the picker names the nearest Tailwind family and shows every format at once, so an unknown swatch becomes a known, documented value. If you only have a rough idea, the color wheel and saturation square let you hunt visually until the preview matches, then the hex code finder output captures it. Pairing the picker with the harmony palettes also helps you identify complementary, analogous, and triadic colors that work alongside your base choice.

Checking color contrast before you ship

A contrast color checker is one of the most useful features built into this color picker online. Color choices that look fine on a designer's monitor can fail for users on dim screens, in bright sunlight, or with low vision. The contrast panel calculates the WCAG ratio for your color against black and white text and flags whether it passes AA and AAA. Use it as a color tester for buttons, links, body text, and status colors before they reach production, so accessibility is built in rather than patched later.

Converting between HEX, RGB, and HSL

Because every format here updates at the same time, the color picker also works as a quick color converter. Paste a HEX color code and you instantly see the matching RGB and HSL values, or type an RGB triplet and read the HEX equivalent ready to paste into CSS. This is handy when a design file gives you one format but your codebase expects another, or when you need an HSL value to tweak lightness for a hover state. There is no separate converter step: pick or paste once, and copy whichever format your project needs.

Building harmony palettes from one base color

A single well chosen color is rarely enough; most designs need a small set of colors that work together. The harmony swatches on this page take your base color and generate complementary, analogous, and triadic options using fixed rotations around the hue wheel. Complementary colors sit opposite each other and create strong contrast for accents and calls to action. Analogous colors sit next to each other for a calm, cohesive look. Triadic colors are evenly spaced for a balanced, vibrant scheme. Pick a base, glance at the harmonies, and you have a starting palette in seconds.

Tips for picking colors that work

Good color choices follow a few simple habits. Start with one strong brand hue and build neutrals and accents around it rather than picking every color independently. Keep the number of distinct hues small, since a tight palette looks more intentional than a rainbow. Always confirm text and background pairings pass WCAG contrast, and check status colors in the color blindness preview so meaning never relies on color alone. When you need a darker or lighter variant, adjust the L value in OKLCH so the hue stays consistent. Following these steps with the picker keeps a palette accessible, balanced, and easy to maintain.