Color converter (HEX, RGB, HSL)
Convert colors between HEX (#RRGGBB), RGB (0–255), and HSL (hue, saturation, lightness) in real time. Adjust the picker or type values to see all formats update together — ideal for CSS, Figma handoff, and brand guidelines.
How to convert colors
1. Pick a color visually or enter HEX, RGB, or HSL values.
2. See equivalent values in all supported formats instantly.
3. Tweak HSL lightness for hover states while keeping brand hue.
4. Copy the format your stack needs (#hex for CSS, rgb() for modern browsers).
Color conversion examples
Brand blue #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Darken hover: hsl(217, 84%, 45%) without guessing hex.
CSS rgb to HEX for SVG
rgb(255, 87, 51) → #FF5733 for SVG fill and Android XML color resources.
Neutral gray for borders
hsl(220, 10%, 90%) → very light cool gray; increase saturation slightly for tinted UI backgrounds.
When to use this tool
• When you translate design tokens between HEX in Figma and HSL in CSS variables.
• When you build consistent light/dark themes by shifting HSL lightness.
• When you document brand palettes for developers and marketers.
Color theory for UI work
Complementary colors sit opposite on the hue wheel (180° apart) — high contrast, use sparingly for CTAs. Analogous hues (±30°) feel harmonious for dashboards. Neutral UI chrome often uses low-saturation blues or grays (hsl 220, 10%, 96%) rather than pure #EEE, which can look warm/cold under different screens. Limit brand palette to one primary hue, 2–3 neutrals, and semantic greens/reds for status.
Frequently asked questions
What is HSL good for?
Adjusting lightness and saturation while keeping hue stable — e.g. primary, primary-hover, primary-muted from one hue value.
HEX shorthand #RGB?
#F53 expands to #FF5533. We accept 3- or 6-digit hex (optional #).
sRGB vs display-P3?
This tool uses sRGB, standard for web CSS. Wide-gamut displays may render slightly differently.
Alpha / transparency?
8-digit HEX (#RRGGBBAA) and rgba() may be supported where the tool exposes alpha — check UI fields.
Why do my RGB sums look wrong in hex?
Each channel is 0–255 → two hex digits. 255 = FF, not “255” concatenated.