How to Convert Colors Between HEX, RGB, and HSL
Working with colors in web development means constantly switching between HEX, RGB, and HSL. A designer gives you a HEX code, but you need HSL to create hover states. An API returns RGB values, but your CSS uses HEX. This guide shows you how to convert between all three instantly.
When You Need Color Conversion
- Translating a brand color from a design file into CSS
- Creating lighter/darker variants of a base color
- Matching colors across tools that use different formats
- Debugging color values in browser dev tools
- Building a color palette with consistent hue and varying lightness
How to Convert Colors
Step 1: Open the tool
Go to the Color Converter.
Step 2: Enter a color
You can enter a color in any of three ways: type a HEX code (e.g. #6366f1), adjust the RGB or HSL sliders, or use the visual color picker. All three panels update in real time.
Step 3: Read the converted values
The three format cards show the same color in HEX, RGB, and HSL simultaneously. The large preview square shows the actual color.
Step 4: Copy the value you need
Click "Copy" on any format card to copy the CSS-ready value to your clipboard. For example, rgb(99, 102, 241) or hsl(239, 84%, 67%).
Understanding Color Formats
HEX — most compact
A 6-digit hexadecimal notation where pairs represent red, green, and blue. #ff0000 is pure red, #00ff00 is pure green. It's the most common format in CSS and design tools.
RGB — channel-based
Specifies each channel as a number from 0 to 255. Useful when you need to compute colors programmatically or work with APIs that return individual channel values.
HSL — most intuitive
Hue is the color angle (0° red, 120° green, 240° blue), saturation is intensity (0% gray, 100% vivid), lightness is brightness (0% black, 100% white). HSL is the best format for creating color variations.
Tips
- To create a hover state, take your base color in HSL and reduce lightness by 5-10%.
- For accessible color pairs, ensure at least 4.5:1 contrast ratio between text and background.
- When building a palette, keep the same hue and saturation and vary only lightness: 95% (lightest), 50% (base), 15% (darkest).
FAQ
What is the difference between HEX, RGB, and HSL?
HEX is a compact notation using 6 hexadecimal digits (e.g. #6366f1). RGB specifies red, green, and blue channels from 0-255 (e.g. rgb(99, 102, 241)). HSL describes hue (0-360°), saturation (0-100%), and lightness (0-100%) — it's the most intuitive for adjusting colors.
Which format should I use in CSS?
All three work in CSS. HEX is the most common and compact. RGB is useful when you need to calculate channel values programmatically. HSL is best when you want to create color variations (lighter, darker, more saturated) because you can adjust a single value.
How do I make a color lighter or darker?
Use HSL and adjust the L (lightness) value. Higher L values make the color lighter (100% is white), lower values make it darker (0% is black). The hue and saturation stay the same.
Is my data uploaded to a server?
No. All color conversion happens entirely in your browser using JavaScript. No data is sent anywhere.
Try It Now
Ready to convert? Open the Color Converter — it works entirely in your browser with no sign-up required.