Screen HEX is not a print match
I convert colors here when a CSS variable, a Figma inspect panel, and a slide deck disagree on the same red. The page speaks HEX, RGB, HSL, and a naive CMYK. That last one is arithmetic on sRGB, not an ICC profile. A visiting-card printer in Pune will not hit the same ink from these CMYK percentages. Use this to move between CSS notations and to nudge lightness for dark mode. Do not use it as a WCAG oracle, an OKLCH playground, or a brand-guideline source of truth.
Brand colors are rarely secret. Unreleased mockups sometimes are. I still keep the conversion local because a “palette extractor” SaaS does not need a screenshot of next quarter’s campaign. Eyedropping a pixel off a photograph is an OS job; this page converts a value you already have.
Worked example: vermilion #D1431F
Enter #D1431F — the accent on this site. RGB is rgb(209, 67, 31). HSL lands near hsl(12, 74%, 47%). For dark mode I keep the hue and saturation and raise or lower L: hsl(12, 74%, 62%) reads as the same family on charcoal, not a second brand hue you invented at 1am. Complementary in the palette generator is 255 minus each channel, which for this red is a teal-ish opposite. That is a color-theory toy, not a pair you should put on adjacent buttons without a contrast check.
Worked example: India saffron #FF9933
#FF9933 is rgb(255, 153, 51), HSL about hsl(30, 100%, 60%). People paste it into slides and then wonder why the flag on screen looks louder than the cloth. sRGB on a cheap laptop is not a calibrated press. The naive CMYK for this HEX will look something like a high-Y, medium-M, low-K mix — useful as a starting conversation with a printer, useless as a purchase order. If the file is for offset, ask for a coated/uncoated swatch, not a website HEX.
Worked example: 3-digit HEX and alpha
CSS allows #D31 as a short form of #DD3311. This converter’s HEX parser wants six digits. Type #DD3311, not the shorthand, or you get nothing useful. Eight-digit HEX with alpha (#D1431F80 at 50% opacity) is also outside the 6-digit read. Opacity belongs in a separate CSS / 0.5 or rgba(209, 67, 31, 0.5) — which this page will not emit. Paper-gray text on #E9EDF2 behind vermilion is a contrast problem this tool will not score. Pair with a contrast checker before you ship body copy in accent red.
Palette and naming limits
The palette button builds lighter, darker, complementary, analogous, and triadic cousins by shifting RGB or hue in coarse steps (±30, ±50, +120). It is not a designer’s ramp and not Tailwind’s scale. Named colors on the preview are a tiny lookup (#ff0000 → Red). Almost everything else is “Custom Color,” including #D1431F. Do not file a bug because vermilion has no CSS keyword. OKLCH, Display-P3, and wide-gamut hex are not here; if your Figma file is P3, the HEX you copied may already be a clipped sRGB neighbor.
Questions
Will the CMYK numbers match my printer in India?
No. This is a naive sRGB-to-CMYK conversion without an ICC profile. Use it as a hint. Ask the press for a proof.
Does this certify WCAG contrast?
No. It converts. White-on-vermilion or vermilion-on-paper-gray needs a contrast checker.
Why did #D31 not convert?
The HEX reader expects six digits. Expand short HEX yourself: D31 → DD3311.
What about 8-digit HEX or rgba()?
Alpha is not in the HEX parser. Use a 6-digit HEX for the color and set opacity in CSS separately.
Is the generated palette a design system?
No. It is coarse RGB/hue shifts. Treat it as a sketch, then pick by eye on the actual background.
OKLCH or Display-P3?
Not on this page. HEX/RGB/HSL (and toy CMYK) only. Wide-gamut values from Figma may already be clipped.