HEX ↔ RGB ↔ HSL Color Converter
Convert HEX, RGB, and HSL simultaneously and copy palette presets
No signup • Runs in browser • Free
Design systems juggle multiple color models: product designers think in HSL, CSS variables prefer HEX, and canvas APIs consume RGB arrays. Switching between them manually is error prone. The DevToolBox Color Converter keeps all three in sync, shows a live swatch, and proposes accessible palette variants.
How the converter helps
- Bidirectional updates: change HEX, RGB, or HSL and watch the other fields sync instantly.
- Palette suggestions: lighten, darken, complement, and accent swatches are generated on the fly.
- Contrast hints: the live preview reminds you to check WCAG ratios (4.5 for body text, 7 for AAA).
- Copy-ready output: click a swatch to make it the active color and copy the HEX code straight into CSS variables.
HEX vs RGB vs HSL
| Model | Strengths | Example |
| ----- | --------- | ------- |
| HEX | Compact, widely used in CSS. | #1d4ed8 |
| RGB | Friendly for Canvas/WebGL operations. | 29, 78, 216 |
| HSL | Intuitive for tweaking lightness and saturation. | 221, 76%, 48% |
When building theme tokens, store colors as HSL for human-friendly editing, then export HEX for CSS and RGB for native apps or canvas charts. The converter keeps values consistent so no rounding errors creep in.
Accessibility checklist
- Generate your primary brand color with the converter.
- Use the palette suggestions to grab a
Darkenvariant for text on light backgrounds. - Run the color pair through the Base64 Encoder or JSON tools if you're embedding tokens in config files.
- Document the HEX + RGB values in your design system README.
CSS snippet
:root {
--color-primary: #1d4ed8;
--color-primary-rgb: 29, 78, 216;
}
.btn-primary {
background-color: var(--color-primary);
color: #fff;
box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.2);
}