Design
Color Converter
Convert between HEX, RGB and HSL instantly. Use the visual color picker or type a value directly.
Choose a color
Click the color swatch to open the picker. All three formats (HEX, RGB, HSL) update automatically.
Preview
#3B82F6
You can also type directly in any field and the others will update automatically.
#
color: #3b82f6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);
Key concepts
The hexadecimal format represents a color as six digits in base 16 (0–9, A–F), grouped in three pairs: red, green, and blue. For example,
#FF0000 is pure red. It is the most common format in HTML and CSS.
RGB (Red, Green, Blue) describes a color using three numeric values between 0 and 255, one per channel.
rgb(255, 0, 0) is pure red. CSS also supports rgba(), which adds an opacity (alpha) channel.
HSL represents color in terms of Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). It is the most intuitive format for manually adjusting colors because its dimensions match how we perceive color.
Use HEX for fixed brand colors (CSS variables or design tokens). Use RGB/RGBA when you need dynamic opacity. Use HSL when building palettes or varying hue/saturation/lightness programmatically — for example in themes or color variant generation.