Color Picker
Pick a color, adjust opacity, or paste a color code to convert it instantly.
Preview
Synced
HEX + Alpha
#ff6b6bff
Red
255
Green
107
Blue
107
Alpha
1
Supports HEX, HEXA, RGB(A), and HSL(A) input.
Formats
Supports HEX, HEXA, RGB(A), and HSL(A) input.
HEX
#ff6b6b
HEX + Alpha
#ff6b6bff
RGB
rgb(255, 107, 107)
RGBA
rgba(255, 107, 107, 1)
HSL
hsl(0 100% 71%)
HSLA
hsla(0 100% 71% / 1)
HWB
hwb(0 42% 0% / 1)
CMYK
cmyk(0%, 58%, 58%, 0%)
Tips
- Use the native picker for quick visual selection, then fine-tune opacity with the slider.
- Paste HEX, RGB(A), or HSL(A) values into the source field to convert existing design tokens.
- Copy any output format with one click for CSS, design tools, docs, or handoff notes.
- HEX ignores transparency, so use HEX + Alpha or RGBA when opacity matters.
Why use a color converter?
Design and frontend workflows constantly jump between color formats. Designers may hand off a hex value, CSS may need rgb() or hsl(), and print-oriented or brand documentation may call for CMYK approximations. Converting between them manually is tedious and error-prone.
This tool keeps a single color in sync across the most useful web-friendly formats. Pick a color visually or paste an existing code, then copy the exact representation you need without leaving the browser.
When each format is useful
- HEX / HEXA - common in design tokens, Tailwind configs, and UI handoff because it is compact and familiar.
- RGB / RGBA - useful for CSS and canvas work, especially when you need explicit channel values or alpha transparency.
- HSL / HSLA - easier to reason about when adjusting hue, saturation, or lightness during theming.
- HWB / CMYK - handy for broader color communication, rough print comparisons, or documentation.