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. HSL makes intuitive tweaks (lighter/darker without hue shift) easier than editing hex digits.
Color
Result
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
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.
When to choose something else
• When you must verify WCAG contrast — use the contrast checker.
• When you need CMYK or Pantone for print — use print-specific tools.
• When you generate full gradients — use the CSS gradient generator.
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.
Accessibility starts at conversion
A beautiful #7C3AED purple on white may fail contrast for small text. After picking colors here, run foreground/background pairs through the contrast checker. Prefer HSL tweaks to fix failures: darken text or lighten background while preserving hue. Do not rely on color alone for errors — pair with icons and labels (WCAG 1.4.1).
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.
Is my data sent to a server?
No.
Is this tool free?
Yes.