HEX, RGB & HSL Color Converter
Convert colors between HEX, RGB, and HSL with a live preview and copy-ready CSS values. Color conversion is handled in the browser for this tool.
Try a common color
r
g
b
h
s%
l%
Preview
#10B981
HEX
#10B981
RGB
rgb(16, 185, 129)
HSL
hsl(160, 84%, 39%)
CSS variable
--color-brand: #10B981;
Color conversions are CSS-ready approximations. Final appearance can vary by display, color profile, theme, and design-system token rules.
A color converter translates the same sRGB color between HEX, RGB, and HSL formats.
Use HEX for compact tokens, RGB for channel values, and HSL when adjusting hue, saturation, or lightness.
Use valid sRGB values
Enter six-digit HEX, short HEX, RGB channels from 0 to 255, or HSL values with percentage saturation and lightness.
Copy for the target system
Use converted values for CSS variables, design token docs, Tailwind config notes, and component style reviews.
HEX stores red, green, and blue channels as hexadecimal pairs. RGB stores the same channels as decimal values from 0 to 255.
HSL stores hue as degrees, then saturation and lightness as percentages, which can be easier when adjusting color families.
#10B981 = rgb(16, 185, 129) = hsl(160, 84%, 39%)
The same color can be copied in different CSS formats depending on whether you are building tokens, inline styles, or theme variables.
Method and Assumption
HEX and RGB use the same sRGB red, green, and blue channels. HSL is derived from normalized RGB values.
Example
#10B981 converts to rgb(16, 185, 129) and hsl(160, 84%, 39%).
Limitation
Actual appearance can vary by display and color profile. Alpha, CMYK, OKLCH, and LAB are outside this tool.
CSS variables
Convert a brand HEX value into RGB or HSL before storing it in token files.
Theme variants
Use HSL values to reason about hue, saturation, and lightness changes.
Design handoff
Translate color specs between design docs, component code, and QA notes.
Accessibility checks
Pair converted values with the contrast checker before shipping UI text colors.
What is the difference between HEX and RGB?
HEX and RGB both describe red, green, and blue channels. HEX uses base-16 pairs like #10B981, while RGB uses decimal channel values like rgb(16, 185, 129).
When should I use HSL?
HSL is useful when adjusting hue, saturation, or lightness directly. It often feels more intuitive for creating shades, tints, and theme variants.
Does this support short HEX colors?
Yes. Three-digit HEX values such as #0F8 are expanded to six-digit values before conversion.
How are colors processed?
Color conversion is handled in the browser for this tool based on the current public implementation.
Suggested workflow
Design token prep path
Move from color conversion to contrast and CSS sizing checks before using values in a real interface.