TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.
Back

Color Picker

Pick colors, convert between formats, find the nearest CSS and Tailwind color and copy it as code.

Saturation & Lightness

239°

HEX

RGB

HSL

OKLCH

CMYK

HSV

Code

--color-brand: #6467F2;

Put it in a :root rule and use it as var(--color-brand).

Nearest Colors

The closest CSS named color and Tailwind default color, by how different they look (OKLab distance, ΔE OK). Under 0.02 is hard to tell apart.

  • CSS Name

    mediumslateblue

    #7B68EE

    CloseΔE OK 0.034

  • Tailwind 4

    indigo-500

    oklch(58.5% 0.233 277.117)

    Outside sRGB, so the closest hex is #615FFF

    CloseΔE OK 0.029

  • Tailwind 3

    indigo-500

    #6366F1

    Very CloseΔE OK 0.003

How to use this tool

  1. Pick a color

    Drag the saturation and lightness gradient to adjust those values, then use the Hue slider to choose a hue. You can also type a hex value (like #4F46E5), an RGB triplet (79, 70, 229), or HSL values (243, 75%, 59%) into any input field. All other fields update instantly to match.

  2. Read the values in every format

    The picker shows HEX, RGB, HSL, HSV, OKLCH, and CMYK at the same time, so you can copy the format your target tool expects. Each field updates live as you drag the gradient or adjust a single channel.

  3. Copy any field to clipboard

    Click the copy button next to any format. The value is copied in a form ready to paste into CSS, Tailwind, Figma, a config file, or print specs without further editing. For app code, pick a format in the Code row: a CSS variable, a Tailwind 4 theme entry, SwiftUI, Jetpack Compose, Android or Flutter.

  4. Find the nearest named color

    The Nearest Colors card names the closest CSS named color, Tailwind 4 color and Tailwind 3 color, with how far off each one is. Click Use to switch the picker to that color, or Copy Name to grab the name for your CSS or class list.

  5. Adjust hue, saturation, or lightness directly

    For fine-grained edits, type new hue (0-360°), saturation (0-100%), or lightness (0-100%) values into the HSL inputs. The color updates in every other format as you type, so you can dial in a precise adjustment. To work in OKLCH instead, type lightness (0-100%), chroma (0-0.4) and hue (0-360°) into the OKLCH fields.

About this tool

The Color Picker lets you pick or paste a color and shows it in HEX, RGB, HSL, HSV, OKLCH, and CMYK at once, with a copy button on every field. All six stay in sync as you edit, whether you're turning a designer's hex code into an HSL value for CSS, prepping print artwork in CMYK, or tweaking a brand color's saturation.

Use it to match a color across tools (a hex from Figma, an RGB triplet for a config file, a CMYK value for a print shop) or to build a palette with fine control over lightness in HSL or OKLCH. A full spectrum gradient handles visual selection, numeric inputs cover every channel, and the Nearest Colors card tells you which CSS named color or Tailwind color is closest.

Supported formats

HEX (#RRGGBB), RGB (0-255 per channel), HSL (hue 0-360°, saturation and lightness 0-100%), HSV (same hue, saturation/value 0-100%), OKLCH (lightness 0-100%, chroma 0-0.4, hue 0-360°), and CMYK (cyan, magenta, yellow, key black 0-100%). Conversions are standard sRGB, with no ICC profile applied.

Copy as code

The Code row writes the color for six places: a CSS variable, a Tailwind 4 @theme entry, SwiftUI, Jetpack Compose, Android View code and Flutter. The CSS and Tailwind formats call the color brand, so rename it after you paste. Tailwind 4 reads colors from @theme in your CSS file. Tailwind 3 kept them in tailwind.config.js, so the entry only works in Tailwind 4. SwiftUI gets each channel divided by 255 with three decimals, which is enough to land on the same color. Compose and Flutter put the alpha first (ARGB), and since the picker has no transparency, it's always FF. The format you pick last is saved in this browser, not in the link.

Nearest CSS and Tailwind colors

The picker checks your color against every CSS named color and the default Tailwind 4 and Tailwind 3 palettes. It ranks them by ΔE OK, the distance between two colors in OKLab, so the match is the color that looks closest, not the one with the most similar hex digits. Tailwind 4 colors come from the OKLCH values in Tailwind's own theme file. Picking a match with Use changes the color in the link too, so you can share it.

When to use it

Use it to translate colors between Figma, CSS, Tailwind arbitrary values, Photoshop, and print specs. Pair it with the Contrast Checker to verify your text color combinations meet WCAG AA or AAA, which the Color Picker alone doesn't enforce.

Popular color scenarios

Guides to the color formats and conversions behind web and print work, plus colors people look up often.

Hex to RGB
The web developer's color format explained
View details
RGB to Hex
Turn three 0-255 numbers into a hex code
View details
Hex to HSL
Find hue, saturation and lightness from a hex code
View details

Frequently asked questions

How do I convert HEX to RGB?
Paste a hex value like #4F46E5 into the HEX field and the RGB equivalent (79, 70, 229) appears instantly. Each hex pair maps to one 0-255 channel: 4F = 79, 46 = 70, E5 = 229.
What's the difference between HSL and HSV?
Both split color into hue, saturation, and a brightness component, but differently. HSL's L (lightness) is 50% for pure colors and 100% only for white. HSV's V (value) is 100% for any pure color and 0% only for black. HSL is friendlier for picking palettes; HSV is more common in image-editing software.
How does the picker find the nearest CSS or Tailwind color?
It compares your color with every CSS named color and every default Tailwind 4 and Tailwind 3 color, then shows the one that looks closest in each list. Closeness is ΔE OK, the distance between two colors in OKLab, a color space built so equal distances look about equally different. Exact means it's the same hex code. Under 0.02 is very close, about the smallest difference most people can see. Under 0.05 is close, which is less than the step between most neighboring Tailwind shades. Click Use to load a match into the picker.
Why are Tailwind 4 colors different from Tailwind 3?
Tailwind 4 moved its default palette from hex to OKLCH and made colors more vivid where sRGB used to hold them back. So blue-500 is #3B82F6 in Tailwind 3 but oklch(62.3% 0.214 259.815) in Tailwind 4. Many Tailwind 4 colors sit a little outside sRGB, and no hex code can hold those. The picker measures the distance to the real color and shows the closest hex next to it, marked as outside sRGB.
How do I use a color in SwiftUI, Jetpack Compose or Flutter?
Pick the format in the Code row and press Copy. SwiftUI's Color takes red, green and blue from 0 to 1, so #4F46E5 becomes Color(red: 0.310, green: 0.275, blue: 0.898). Jetpack Compose and Flutter both take one number with the alpha first (ARGB), so the same color is Color(0xFF4F46E5) in either. The FF at the start means fully opaque. Android View code can read the hex as it is with Color.parseColor. The picker remembers the format you used last.
What happens when I type an OKLCH color outside sRGB?
OKLCH can describe colors that sRGB screens can't show. When the lightness, chroma and hue you type land outside sRGB, the picker lowers the chroma until the color fits and keeps lightness and hue about the same, the way CSS Color Level 4 maps colors into a gamut. A note under the fields shows the oklch() value you actually get, and every other field shows that color.
Why does CMYK look different from RGB on my screen?
RGB is additive (light-based, for screens) and has a larger color gamut. CMYK is subtractive (ink-based, for print) and cannot represent many bright RGB colors. The CMYK output is a straightforward mathematical conversion. A real print workflow adds color profiles (like sRGB and Fogra) for accurate proofs.
What is the difference between #RGB and #RRGGBB?
#RGB is shorthand: each single digit is doubled, so #F0A becomes #FF00AA. Use shorthand only when all three channels happen to repeat a hex digit, otherwise you lose precision. The Color Picker always outputs the full 6-digit form.
Can I pick a color from an image?
This tool doesn't include an eyedropper yet. For that, use your browser's built-in dev tools color picker or a desktop tool like Photoshop. Once you have the hex value, paste it here to convert to every other format.
What is the sRGB color space?
sRGB is the standard color space assumed for most web content and non-HDR monitors. It defines exactly which real-world color each RGB triplet means. Colors on one sRGB display should look identical on another, while wide-gamut (P3, Adobe RGB) displays show more colors but can oversaturate sRGB content unless the app is color-managed.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool

Color Gamut Visualizer

Draw sRGB, DCI-P3, Adobe RGB and Rec. 2020 on the CIE chart, enter a monitor's primaries, and see its coverage and area of each one.

Use tool

Text Encoding Converter

Convert text to Base64, binary, hex, URL encoding and HTML entities, and back again.

Use tool

PPI & Retina Calculator

Calculate PPI and Retina distance for your display.

Use tool

Use this tool on your own site

Drop the Color Picker into your blog, docs, or CMS with one iframe snippet. Free, no signup. See all embeddable tools