Skip to content
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
- Enter a color in the input field using HEX (#FF5733), RGB (rgb(255, 87, 51)), or HSL (hsl(9, 100%, 60%)) format.
- Click "Convert".
- 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.