Loading
Loading
Translate colors between HEX, RGB, and HSL with a live swatch preview — built for CSS work, brand palette design, and converting Tailwind shades between formats.
Utility
Generated on May 23, 2026
#3B82F6 · rgb(59, 130, 246) · hsl(217, 91%, 60%)
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Formula
HEX → split into RR/GG/BB pairs → parse each as base-16 → 0-255 RGB → HSL via min/max normalization.
Translate colors between HEX, RGB, and HSL with a live swatch preview — built for CSS work, brand palette design, and converting Tailwind shades between formats.
A color converter moves colors between the three most common digital color formats: HEX (used for web CSS), RGB (used by screens and printers internally), and HSL (preferred by designers for its intuitive hue/saturation/lightness components). It includes a live color swatch preview so you can see exactly what each value represents. This tool is essential for web developers writing CSS, graphic designers moving between design and development tools, UX designers building color palettes, and anyone who has ever needed to translate a brand color from one format into another.
Formula
HEX #RRGGBB: 6 hex digits encoding 3 bytes (Red, Green, Blue), each 0–255 (00–FF). HSL: Hue 0°–360°, Saturation 0%–100%, Lightness 0%–100%.Designer hands you a Figma file with a brand color labeled #3B82F6. You drop it into your Tailwind config, but the hover state needs to be 10 percent darker — and now you're stuck doing color math in your head. In HEX, that's painful. In HSL it's trivial: same hue (217), same saturation (91 percent), drop the lightness from 60 to 50, done. That's exactly why HSL exists and why most modern design systems define their color tokens in HSL even when they output HEX for the final CSS. This converter goes all three ways — HEX, RGB, HSL — with a live swatch preview so you can actually see the color, not just stare at abstract numbers. Worth knowing: HEX and RGB are mathematically identical (HEX is just compact base-16 encoding of RGB byte values), while HSL is a genuine transformation into a more designer-friendly coordinate system. The hover-state and tint-generation trick alone justifies HSL existing. For alpha transparency (modals, overlays, glass-morphism), modern browsers accept eight-character hex like #FF000080 where the last two digits encode alpha — or the more readable rgba()/hsla() functions. One annoyance to know about: Pantone colors don't convert mathematically to HEX. Pantone is a proprietary print system; you have to look up the manufacturer's official conversion table for each Pantone code. Even then, the screen approximation can look noticeably different from the printed version because some Pantone inks (metallics, fluorescents) genuinely can't be reproduced on a regular monitor.
A color converter moves colors between the three most common digital color formats: HEX (used for web CSS), RGB (used by screens and printers internally), and HSL (preferred by designers for its intuitive hue/saturation/lightness components). It includes a live color swatch preview so you can see exactly what each value represents. This tool is essential for web developers writing CSS, graphic designers moving between design and development tools, UX designers building color palettes, and anyone who has ever needed to translate a brand color from one format into another.
HEX is simply a compact base-16 encoding of RGB values — each 8-bit channel (0–255) is written as a 2-digit hex code. HSL is a mathematical transformation of RGB: Hue represents the dominant color angle on a color wheel (0° = red, 120° = green, 240° = blue), Saturation is how pure vs gray the color is, and Lightness is how bright it is from black to white. HSL is usually easier for designers because shifting one slider produces intuitive results — changing saturation does not simultaneously affect brightness as it does in RGB.
The most-used named CSS colors with their HEX, RGB, and HSL equivalents.
| Color Name | HEX | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Lime / Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Gray (50%) | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Tailwind Blue-500 | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| Tailwind Emerald-500 | #10B981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) |
| Tailwind Rose-500 | #F43F5E | rgb(244, 63, 94) | hsl(350, 89%, 60%) |
24-bit color (HEX 6 digits) can represent 16,777,216 colors — far beyond the human eye's distinguishable limit (~10 million).
sRGB is the universal web color space; use it unless you have a calibrated wide-gamut workflow.
HSL is preferred by designers because adjusting one slider (hue, saturation, or lightness) produces predictable results.
CSS supports #RGB shorthand: #F00 = #FF0000, #0F0 = #00FF00 — works only when pairs are identical.
#FF0000 equals rgb(255, 0, 0) and hsl(0, 100%, 50%) — pure red, the zero-degree hue at full saturation and mid lightness.
#00FF00 equals rgb(0, 255, 0) and hsl(120, 100%, 50%) — pure green at 120° on the color wheel.
#3B82F6 equals rgb(59, 130, 246) and hsl(217, 91%, 60%) — the popular Tailwind CSS blue-500 color.
#000000 is black (rgb 0,0,0, lightness 0%); #FFFFFF is white (rgb 255,255,255, lightness 100%).
To darken a color for a hover effect, keep the same hue and reduce lightness by 10% — HSL makes this trivial.
Brand colors are often defined in HEX for web and PANTONE for print, with RGB and CMYK as intermediate conversions.
Jump to a ready-made conversion — useful for quick reference and sharing:
Base Converter
Convert integers between binary (base 2), octal (base 8), decimal (base 10), and hexadecimal (base 16) — built for programmers debugging memory addresses, bitmasks, and hex colors.
Unix Timestamp Converter
Translate Unix epoch timestamps (seconds or milliseconds since Jan 1 1970 UTC) to readable ISO, UTC, and local-timezone dates — auto-detects format and handles the Y2038 problem.
Word Counter
Live word, character, sentence, and paragraph counter with reading and speaking time estimates — ideal for essays, blog SEO, tweets within 280 chars, and timed speeches.
Case Converter
Instantly convert text between UPPERCASE, lowercase, Title Case, Sentence case, camelCase, PascalCase, snake_case, and kebab-case — ideal for variable renaming, URL slugs, and headings.
Password Generator
Generate cryptographically secure random passwords (6 to 64 chars) using the browser's Web Crypto API, with strength meter and optional uppercase, digits, and symbol character sets.
Text Reverser / Palindrome Checker
Reverse any text character-by-character or word-by-word, plus check classic palindromes like "A man, a plan, a canal: Panama" while ignoring spaces, punctuation, and case.
QR Code Generator
Create QR codes from URLs, text, Wi-Fi, contact cards, email, phone, SMS, and locations. Free PNG and SVG download.
Barcode Generator
Generate Code 128, EAN-13, UPC-A, Code 39, ITF-14, and more. Free PNG and SVG download with format-aware validation.
Browse all Utility calculators & converters
See every tool in this category, plus FAQs and category-specific guides.