Why are there so many color formats?
Different tools, workflows, and industries use different color representations. Web CSS uses HEX (#1a2b3c) and RGB/RGBA for screen work. Designers prefer HSL because it separates hue from lightness, making it intuitive to adjust. Print designers work in CMYK because physical ink mixes subtractively while screens mix additively. HSV (sometimes called HSB) is used in color picker UIs. Relative luminance is used in accessibility contrast calculations (WCAG). ServoDev computes all of these simultaneously from a single input, so you never have to convert manually between tools.
How to use this tool
- 1 Click the color swatch to open the browser color picker, or type a HEX value directly into the Hex value field (e.g. #3b82f6 or just 3b82f6).
- 2 All output rows update instantly: HEX, 8-digit HEX with alpha, RGB, RGBA, HSL, HSLA, HSV, CMYK, nearest CSS color name, and relative luminance.
- 3 Click the copy icon on any row to copy that format to your clipboard.
- 4 The swatch next to the picker shows a live preview of the selected color.
Frequently asked questions
What is the difference between HEX and 8-digit HEX?
Standard 6-digit HEX encodes red, green, and blue (one byte each). 8-digit HEX (CSS Color Level 4) adds an alpha byte at the end — #RRGGBBAA. An alpha of FF is fully opaque, 00 is fully transparent.
What is relative luminance?
Relative luminance is a perceptually weighted measure of how much light a color appears to emit, from 0 (black) to 1 (white). It is used in WCAG accessibility contrast calculations — text on a background must have a luminance contrast ratio of at least 4.5:1 for normal text to pass AA level.
What is CMYK and why does it differ from RGB?
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print: inks absorb light. RGB is additive: lights combine. A colour that looks vivid on screen may be impossible to reproduce in print because the CMYK gamut is smaller than the sRGB gamut.
What does "CSS name (approx)" mean?
CSS has 140+ named colors (red, cornflowerblue, etc.). The field shows the named color if the selected hex matches exactly, or an approximate label for near-matches. For most custom colors it shows — because there is no nearby standard name.
Is my data sent anywhere?
No. All conversion uses arithmetic formulas in your browser.