CSS and web development — Convert brand colours to HEX or rgba() format for stylesheets, Tailwind configs, or CSS custom properties. Design system hand-off — Export colours in multiple formats so engineers can pick whatever their stack prefers (HEX for older browsers, rgb() for modern CSS, HSL for readability). Matching across tools — Your designer gave you an HSL value from Figma; convert to HEX for your email template or vice versa. No manual transcription, no drift. Opacity adjustments — Tweak the alpha slider and see the result in all formats at once. Useful when a design calls for 70% opacity and you need the exact rgba() or hex notation. Print-ready specs — Export CMYK approximations for brand guidelines or print mockups (though always defer to a proper ICC profile for production print). Accessible colour checks — Convert to HSL to see lightness and saturation independently, helping you build accessible palettes that don't rely on hue alone.

Pick or paste. Click the colour swatch to pick from your system colour picker, or paste any HEX, rgb() , rgba() , hsl() , or hsla() value into the input field. See all formats instantly. The tool displays HEX (3- and 8-digit variants), RGB, RGBA, HSL, HSLA, HSV, and CMYK in real time. Adjust opacity. Use the opacity slider to modify the alpha channel. All colour spaces update live. Copy any value. Click the copy button next to any colour notation to copy it to your clipboard, ready to paste into your code or design tool.

Alpha encoding varies by format. CSS accepts rgba() , hsla() , and 8-digit HEX ( #RRGGBBAA ). Older email clients and some design tools don't support #RRGGBBAA ; use rgba() as a fallback. HSL hue is in degrees, not percentage. 0° = red, 120° = green, 240° = blue. CSS also accepts turn , rad , and grad units, but this tool outputs degrees. CMYK is a best guess, not production-ready. Screens are RGB; printers use CMYK and vary by paper and ink profile. Use ICC colour management and a proper soft proof for any professional print work. Newer spaces like OKLCH aren't included. Perceptually uniform spaces like OKLCH and OKLAB are excellent for modern design systems, but browser and tool support is still patchy. Stick to HSL and HSV for broad compatibility.

Color Picker

Pick a color and instantly see it in HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK. Adjust opacity and copy any value.

Pick a color Opacity: 100% Or paste any value

Result

What is this for?

Pick or paste a colour and instantly convert it between HEX, RGB, HSL, HSV, CMYK, and their alpha-supporting variants. Use this when you need a value in one colour space but have it in another, when matching brand colours across CSS, design tools, and print specs, or when you need to adjust opacity without losing precision or re-eyeballing the result.

When to use it

CSS and web development — Convert brand colours to HEX or rgba() format for stylesheets, Tailwind configs, or CSS custom properties.
Design system hand-off — Export colours in multiple formats so engineers can pick whatever their stack prefers (HEX for older browsers, rgb() for modern CSS, HSL for readability).
Matching across tools — Your designer gave you an HSL value from Figma; convert to HEX for your email template or vice versa. No manual transcription, no drift.
Opacity adjustments — Tweak the alpha slider and see the result in all formats at once. Useful when a design calls for 70% opacity and you need the exact rgba() or hex notation.
Print-ready specs — Export CMYK approximations for brand guidelines or print mockups (though always defer to a proper ICC profile for production print).
Accessible colour checks — Convert to HSL to see lightness and saturation independently, helping you build accessible palettes that don't rely on hue alone.

How it works

Pick or paste. Click the colour swatch to pick from your system colour picker, or paste any HEX, rgb(), rgba(), hsl(), or hsla() value into the input field.
See all formats instantly. The tool displays HEX (3- and 8-digit variants), RGB, RGBA, HSL, HSLA, HSV, and CMYK in real time.
Adjust opacity. Use the opacity slider to modify the alpha channel. All colour spaces update live.
Copy any value. Click the copy button next to any colour notation to copy it to your clipboard, ready to paste into your code or design tool.

Colour space quick reference

HEX and RGB — Universal support across CSS, design tools, and web templates. HEX is more compact; RGB is easier to read as distinct red, green, blue values.
HSL — Best for readable, maintainable palettes. Adjust hue, saturation, or lightness independently without the colour drifting on other axes. Natural fit for design tokens and CSS custom properties.
HSV — Matches how Photoshop, Figma, and most desktop colour pickers model shading. Think of it as "pick the hue, then lighten or darken it."
CMYK — For print workflows. Conversion is approximate (real print requires ICC colour profiles and rendering intent). Adequate for brand decks and mockups, not for press-ready files.

Common gotchas

Alpha encoding varies by format. CSS accepts rgba(), hsla(), and 8-digit HEX (#RRGGBBAA). Older email clients and some design tools don't support #RRGGBBAA; use rgba() as a fallback.
HSL hue is in degrees, not percentage. 0° = red, 120° = green, 240° = blue. CSS also accepts turn, rad, and grad units, but this tool outputs degrees.
CMYK is a best guess, not production-ready. Screens are RGB; printers use CMYK and vary by paper and ink profile. Use ICC colour management and a proper soft proof for any professional print work.
Newer spaces like OKLCH aren't included. Perceptually uniform spaces like OKLCH and OKLAB are excellent for modern design systems, but browser and tool support is still patchy. Stick to HSL and HSV for broad compatibility.