How to use it
- Type or paste a color in HEX, RGB, or HSL.
- Press Convert or hit Enter.
- Read the equivalent HEX, RGB, and HSL values, then copy them.
Why use it
- Convert colors for CSS, designs, and code in one click.
- See the live preview as you type.
- Works offline for privacy.
- Simple, fast, and free.
What are HEX, RGB, and HSL?
HEX, RGB, and HSL are three common ways to describe the same color on a screen. HEX uses a base-16 number such as #1a7ff5 where each two-digit pair represents the red, green, and blue channels. RGB states each channel directly, likergb(26, 127, 245). HSL describes color by hue, saturation, and lightness, which many designers find more intuitive because it matches how people think about color.
How the spaces compare
| Space | Channels | Best for |
|---|---|---|
| HEX | RRGGBB | Cascading Style Sheets and dense code |
| RGB | red, green, blue | Direct screen output, image processing |
| HSL | hue, saturation, lightness | Designing palettes and adjusting tone |
Tips when working with color
- Use HSL to tweak a palette. Changing lightness while keeping hue and saturation produces harmonious variations.
- Check contrast for accessibility. Text should have a strong contrast ratio against its background.
- Prefer six-digit hex. Short forms like
#f00save space but are less precise.