Polymorpher
The Utility Factory — Free Developer Tools
Convert, transform, beautify & decode — all in one place.
⚡ All Tools
Did You Know?
Select a tool from the sidebar to get started, or explore our free developer utilities.
About this Tool
Color Converter — HEX ⇄ RGB ⇄ HSL
Convert colors between HEX, RGB, and HSL formats instantly. Enter any color in one format and get all three representations plus ready-to-use CSS variable and Tailwind CSS class output. Live color preview swatch shows your exact color.
Supports all input formats: #FF5733, #F53 (shorthand), rgb(255, 87, 51), and hsl(14, 100%, 60%). Auto-detects the input format and converts to all others.
Built for designers and frontend developers who need quick color conversions without switching between tools. Copy the CSS variable or Tailwind class directly into your codebase. Free, instant, no sign-up.
Live Examples
Example 1 — HEX to RGB & HSL
Input: #FF5733
Output:
HEX: #FF5733 RGB: rgb(255, 87, 51) HSL: hsl(11, 100%, 60%) CSS Variable: --color: #FF5733; Tailwind: bg-[#FF5733]
Example 2 — RGB to HEX & HSL
Input: rgb(52, 152, 219)
Output:
HEX: #3498DB RGB: rgb(52, 152, 219) HSL: hsl(204, 70%, 53%)
This is "Belize Hole" blue from the popular Flat UI Colors palette.
Example 3 — HSL input
Input: hsl(120, 100%, 25%)
Output:
HEX: #008000 RGB: rgb(0, 128, 0) HSL: hsl(120, 100%, 25%)
Example 4 — Shorthand HEX
Input: #F00 → Expands to #FF0000 (pure red)
Supported Input Formats
| Format | Example |
|---|---|
| HEX (6-digit) | #1ABC9C |
| HEX (3-digit shorthand) | #F00 |
| HEX (without #) | 1ABC9C |
| RGB function | rgb(26, 188, 156) |
| HSL function | hsl(168, 76%, 42%) |
When to Use
- Converting design tool colors (Figma, Sketch) to CSS
- Translating between HEX and RGB for Tailwind config
- Getting HSL values for creating color variations (adjust lightness/saturation)
- Quick-copying CSS custom properties for design systems
Limitations
- Alpha channel (RGBA, HSLA) is not currently supported
- Named CSS colors (e.g.,
tomato,cornflowerblue) are not recognized — use HEX/RGB/HSL notation
Related Tools: Code Beautifier · Unit Converter · Regex Tester