Color Converter
Convert colors between HEX, RGB, and HSL formats.
How to use the Color Converter
Every color on screen can be expressed as a HEX code, an RGB triplet, or an HSL value — three representations of the same color. This tool converts between all three formats live as you type.
- 1
Enter a HEX color
Type a six-digit hex code in the HEX field, with or without the
#prefix (e.g.#c1ff72orc1ff72). Conversion to RGB and HSL happens automatically as you type. - 2
Watch the live preview
The color swatch below the inputs updates instantly so you can see exactly what the color looks like. Use it to confirm the color is what you expect before copying.
- 3
Read RGB and HSL values
The RGB and HSL fields update automatically to show the equivalent values. Read off whichever format you need for CSS, design software, or code.
- 4
Copy all formats
Click "Copy All Formats" to copy HEX, RGB, and HSL values together to your clipboard in a multi-line format, ready to paste into your stylesheet or notes.
Frequently asked questions
What is a HEX color code?
A HEX color is a six-character code (e.g. #c1ff72) where each pair of characters represents the red, green, and blue channel as a hexadecimal value from 00 (0) to FF (255). It is the most common color format in web development.
What is RGB?
RGB stands for Red, Green, Blue. Each channel is a number from 0 to 255, so rgb(255, 0, 0) is pure red and rgb(0, 0, 0) is black. It maps directly to how computer monitors emit light using three colored sub-pixels.
What is HSL and why is it useful for design?
HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It is intuitive for designers because you can adjust brightness or vibrancy without changing the base color. Changing lightness from 50% to 80% gives a pastel tint of the same hue.
What does the # symbol mean in a HEX color?
The # is simply a prefix indicating that the following value is hexadecimal. It is required in CSS (color: #ff0000) but some design tools accept the six digits without it.
Does this tool support alpha transparency?
Not currently. Transparent colors in CSS use RGBA (rgba(0,0,0,0.5)) or HSLA, or an eight-digit HEX code like #c1ff7280. You can add the alpha channel manually after converting with this tool.
What CSS color formats exist?
CSS supports named colors (red), HEX (#ff0000), RGB (rgb(255,0,0)), RGBA, HSL, HSLA, and the newer oklch() and lab() color spaces. HEX and RGB are the most widely supported across browsers and design tools.