How it works
The converter keeps one internal RGB value and derives every other representation from it, so all fields stay consistent no matter which one you edit. Type a HEX code, an rgb() triplet, or pick from the color well, and HSL, CMYK and HSB/HSV update instantly alongside a large live preview.
HSL describes colors the way humans tune them: hue on the 360° wheel, saturation from gray to vivid, lightness from black to white. HSB/HSV is the model design tools use for their pickers. CMYK is the subtractive print model — useful when a brand color must survive the journey from screen to paper, where some vivid RGB colors simply cannot be reproduced.
The info panel computes relative luminance (the WCAG formula on linearized RGB channels) and the contrast ratio against white. That ratio is the accessibility gate: WCAG AA requires 4.5:1 for normal text and 3:1 for large text, and AAA pushes to 7:1. Checking it here takes seconds and saves an accessibility failure later.
Ready-to-paste CSS variables are generated for the current color, so a picked value drops straight into a stylesheet. All math runs locally; nothing you pick is transmitted.
Worked example
Convert #7c3aed. The shorthand is expanded to full hex, split into channels, and mapped through the standard color-space formulas.
| Space | Value | Notes |
|---|---|---|
| HEX | #7c3aed | Hexadecimal RGB channels: 7c, 3a, ed. |
| RGB | rgb(124, 58, 237) | Decimal channels used by CSS and canvases. |
| HSL | hsl(262, 83%, 58%) | A vivid violet at 262° on the hue wheel. |
| CMYK | cmyk(48%, 76%, 0%, 7%) | Subtractive print approximation. |
- Enter a color: Type HEX or RGB, or pick from the color well — every field syncs.
- Read every space: Copy HSL, CMYK or HSB values for design tools and print specs.
- Check accessibility: Read luminance and the contrast ratio against white before using text colors.
- Export the tokens: Copy the generated CSS variables into your stylesheet.
Luminance lands around 0.09, giving a contrast ratio of roughly 8.6:1 against white — comfortably beyond WCAG AAA for text. Against black the same color fails normal-text contrast, which is why dark-theme accents need checking on the actual background.
Common errors and edge cases
- Screen vs print. CMYK is device-dependent; the conversion here is a naive mathematical mapping, not a color-managed proof. Saturated RGB colors often have no print equivalent.
- Contrast on the wrong background. A ratio is meaningless without its pair. A color passing on white may fail on your dark surface — test the real combination.
- Shorthand hex.
#7c3expands to#77cc33. The converter accepts it, but confirm the expansion is what you intended. - HSL ≠ HSB. The two cylindrical models differ: HSL lightness centers pure color at 50%, HSB brightness puts it at 100%. Do not copy values between them blindly.
- Rounding drift. Integer-rounded conversions are not perfectly invertible; converting A→B→A can land one unit off. Keep one canonical format in your design tokens.
Code equivalents
Color math is standardized; these snippets reproduce the conversions when you need them in a build script or design-token pipeline.
| Language | Example |
|---|---|
| CSS | color: hsl(262 83% 58%) and rgb(124 58 237) are equivalent in modern CSS Color 4. |
| JavaScript | #${((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1)} converts RGB channels to HEX. |
| WCAG luminance | L = 0.2126R + 0.7152G + 0.0722B on linearized channels; contrast = (L1+0.05)/(L2+0.05). |
Related tools
Frequently asked questions
What contrast ratio do I need for accessibility?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA requires 7:1 for normal text. The panel shows the ratio against white; test your actual pair.
Why does my CMYK print look different from the screen?
Screens emit light (RGB), paper reflects it (CMYK), and the gamuts do not overlap fully. The naive conversion here is a starting point, not a color-managed proof.
What is the difference between HSL and HSB/HSV?
Both are cylindrical RGB reparameterizations, but HSL's lightness and HSB's brightness peak differently. Pure colors sit at 50% lightness in HSL and 100% brightness in HSB.
Is the conversion lossless?
Between HEX, RGB and HSL essentially yes (modulo integer rounding). CMYK and HSB involve rounding and, for print, gamut limits — keep HEX or RGB as your canonical token.
How do I use the generated CSS variables?
Paste them into your :root block and reference var(--color-name) throughout the stylesheet, so a future color change is a one-line edit.
Privacy note
All processing happens in your browser. The values you enter never leave your device and are never transmitted to ToolPlex.