Categories
Color Converter
Convert color codes between HEX, RGB, and HSL.
Overview
Enter a color in HEX, RGB, or HSL format, and see all three notations along with a color preview at once.
Useful when you need to quickly convert a color notation you have into another one for CSS or a design tool.
Also supports 3-digit HEX shorthand (e.g. #F00), automatically expanding it to 6 digits before converting.
Usage
- 1
Enter a color in the input field using HEX (#FF5733), RGB (rgb(255, 87, 51)), or HSL (hsl(9, 100%, 60%)) format.
- 2
Click "Convert".
- 3
The color is displayed in HEX, RGB, and HSL notation along with a preview swatch.
Example
Input
#FF5733
Output
rgb(255, 87, 51) / hsl(9, 100%, 60%)
Use Cases
Converting a HEX color checked in a design tool (such as Figma) into RGB/HSL notation for use in CSS
Converting a color whose lightness and saturation were adjusted in HSL into a HEX code for implementation
Converting a color specified in a design mockup into a different notation to use in implementation
FAQ
Can I enter a 3-digit HEX code like #F00?
Yes. A 3-digit shorthand is automatically expanded to 6 digits (#FF0000) before conversion.
Is an alpha (transparency) value supported?
rgba() and hsla() values are accepted, but the alpha value is ignored; only the RGB/HSL color is converted.
What happens if I enter an out-of-range value (e.g. RGB 256 or higher)?
An error message "A value is out of range" is displayed.
Notes
Formats containing an alpha (transparency) value, such as rgba() or hsla(), are accepted, but the alpha value is ignored and only the RGB/HSL color is converted.
Entering an out-of-range value, such as an RGB component of 256 or more, or HSL saturation/lightness over 100%, results in an error.
The conversion result exists only on the page and is lost on reload, so copy and save it if you need to keep it.
Related Tools
Generate linear-gradient or radial-gradient CSS from colors and positions.
Generate multi-size favicon PNGs, a manifest, and HTML tags from an image.
Generate CSS Grid styles from column count, row count, and gap.
Convert between px, rem, em, and pt.