Color Picker & Converter (HEX, RGB, HSL)
What This Tool Does
This color tool lets you pick a color visually or enter a HEX, RGB, or HSL value, then displays equivalent values in all common formats including CMYK. It also shows a large color preview, making it easy to copy the right format for your CSS, design file, or print job.
Inputs Explained
- Color Picker: Visual swatch picker. Click and drag to choose a color.
- HEX: 6-digit hex code with or without leading # (e.g., #2563eb).
- RGB: Red, Green, Blue values from 0–255.
- HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%).
How It Works
When you change any input, the others update automatically. HEX is parsed into RGB. RGB is converted to HSL using standard color space math, and to CMYK by inverting RGB to obtain CMY then extracting the K (black) component.
Formula / Logic Used
Pick a color and convert between HEX, RGB, HSL, and CMYK formats instantly.
Quick Copy
Step-by-Step Example
Picked color: A medium royal blue
HEX: #2563eb
RGB: rgb(37, 99, 235)
HSL: hsl(221, 83%, 53%)
CMYK: cmyk(84%, 58%, 0%, 8%) — useful for print design
Use Cases
- Web design CSS: Pick brand colors and copy them in HEX, RGB, or HSL for stylesheets.
- Print design: Convert RGB screen colors to CMYK for accurate print output.
- Brand consistency: Confirm a hex code matches the intended visual color across mockups.
- Accessibility checking: Get HSL values to easily adjust lightness for sufficient contrast.
- Logo and graphic prep: Provide colors in any format your client or printer requires.
Assumptions and Limitations
- CMYK conversion is mathematical — actual printed color depends heavily on the printer, paper, and ink.
- The color picker uses sRGB color space. Wide-gamut colors (P3, Rec.2020) are clipped.
- HEX with alpha (8-digit, like #2563ebcc) is not yet supported — alpha is always 100%.
- Some monitor calibrations show colors slightly differently. Trust the numeric values, not the visual preview.
Hex Color Picker and Hex to RGB Converter
The hex color picker helps you choose a color, copy the hex code, and convert it into RGB or HSL for CSS. Use it as a hex to rgb converter, hex to color converter, or color picker calculator when a design file gives one format and your stylesheet needs another.
| Color | Hex | RGB | HSL |
|---|---|---|---|
| White | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| Black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| Red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| Blue | #0000FF | 0, 0, 255 | 240, 100%, 50% |
For hex to hsl, first convert each hex pair to RGB values, then derive hue, saturation, and lightness from the red, green, and blue channels.
Frequently Asked Questions
How do I convert a color to CSS color-mix() or OKLCH?
Modern CSS gave us two powerful new tools. color-mix() blends two colours: color-mix(in oklch, blue 60%, red 40%) returns a perceptually-smooth midpoint. oklch() is a colour space that matches how humans see lightness — oklch(70% 0.15 240) means 70% lightness, 0.15 chroma, hue 240. To convert from hex or RGB to OKLCH, our Color Picker shows the OKLCH value live as you adjust. Browser support is solid across Chrome, Safari, and Firefox in 2026, but for older clients always include a hex fallback before the OKLCH declaration.
How do I convert HSL back to HEX?
Algorithmically, you convert HSL to RGB first (using the standard formula that maps hue to a 0-1 chroma curve), then RGB to hex by taking each channel as a two-digit hex value. By hand it's painful; in practice everyone uses a tool. Our Color Picker accepts any input format — paste hsl(210, 100%, 50%) and the hex shows up instantly as #0080FF. In JavaScript, chroma-js or the native CSS.supports plus canvas trick both work well. CSS itself doesn't directly convert at runtime, so for static stylesheets you do this once and paste the hex.
How do I convert RGB to RGBA with transparency?
RGBA is just RGB plus an alpha channel — so rgb(255, 100, 50) becomes rgba(255, 100, 50, 0.5) with 50% transparency. The fourth value ranges from 0 (fully transparent) to 1 (fully opaque). You can also write it as a percentage in modern CSS: rgba(255, 100, 50, 50%). For hex codes, append two more digits: #FF6432 becomes #FF643280 (80 in hex is roughly 50% alpha). Our Color Picker has an alpha slider that updates the rgba and hex8 output live. Useful for overlay backgrounds, hover states, and translucent UI cards.
What is a hex code with 8 characters (HEX-A) and how does alpha work?
An 8-digit hex code is RGB plus alpha. The format is #RRGGBBAA. The first six digits are the colour as usual; the last two encode transparency from 00 (fully transparent) to FF (fully opaque). So #FF000080 is red at roughly 50% opacity. The math: alpha hex divided by 255 equals alpha decimal. 80 hex is 128, divided by 255 is approximately 0.502. All modern browsers support this — Chrome, Firefox, Safari, Edge — for several years now. It's a compact alternative to rgba(), especially handy in design tokens and CSS custom properties.
How do I copy a color value as Tailwind, CSS variable, or SCSS?
Our Color Picker has a format dropdown right next to the copy button. Pick from hex, rgb, rgba, hsl, hsla, oklch, Tailwind arbitrary value (bg-[#3B82F6]), CSS custom property (var(--brand-blue)), or SCSS variable ($brand-blue: #3B82F6;). Each format is one click to copy. The Tailwind format is great when you're using a value once; for repeated use, define it in tailwind.config.js under theme.extend.colors. SCSS variables work best in larger codebases where you want centralised theming. CSS custom properties give you runtime theme switching — pick whichever matches your stack.
Sources and References
- W3C — CSS Color Module Level 4 — Standard for CSS color formats including HEX, RGB, HSL, and OKLCH.
- MDN — color value — Reference for CSS color formats.
- Wikipedia — HSL and HSV — Background on cylindrical color spaces.
- Wikipedia — CMYK Color Model — Background on the CMYK print color model.