Translate brand palettes between hex, RGB and HSL without guesswork
Design systems, chart libraries and CSS variables rarely agree on a single colour syntax. Marketing hands you hex from a slide deck; D3 wants RGB tuples; Tailwind tokens often read as HSL with alpha channels. Manual conversion invites off-by-one channel mistakes that show up only on retina displays or dark mode. This converter keeps hex, RGB and HSL in sync as you type so data viz engineers, frontend developers and technical writers can document exact values in runbooks and Storybook entries without a desktop colour picker installed.
Palette workflow
- Paste the canonical hex from your brand guide or chart spec.
- Confirm the live swatch matches what you expect on your monitor profile.
- Copy RGB for canvas APIs or HSL for theme tokens with alpha.
- Store the chosen format in your design-tokens file with a short comment on source.
When each format wins
Hex is compact in spreadsheets and commit messages. RGB maps directly to many imaging APIs and Python matplotlib defaults. HSL separates hue from lightness so you can generate hover states by nudging only the L channel. None of the formats encode transparency by themselves unless you extend into rgba() or hsla() in your stylesheet — plan alpha at the component layer rather than assuming the hex alone carries opacity.
Colours in data products
Dashboard palettes should reserve saturated hues for alerts and muted tones for background series so colour-blind readers can still distinguish lines. When you embed colours in JSON theme configs, validate the file with the JSON Formatter after you paste converted values. If you ship hashed asset names or inline SVG, the Hash Generator helps fingerprint bundles while you iterate on CSS variables. For URL-encoded theme query params, use the URL Encoder & Decoder so plus signs and hashes survive transit.
Consistency across light and dark themes
A swatch that looks correct in a slide may fail contrast on slate-900 backgrounds. Document paired foreground colours beside every background token. When you port a chart from Excel, re-check series colours after export — spreadsheet defaults rarely match web sRGB. Keep a single source of truth in your repo and convert here only when a tool forces a different syntax.
Dark mode and print
A palette that passes contrast on a white marketing page may fail on charcoal UI shells. Re-run the contrast checker after you toggle theme tokens. For PDF exports, remember that printers desaturate light tints — keep body text on solid backgrounds rather than faint gradient overlays when compliance reviewers sign off accessibility statements.