How it works
Convert colors between HEX, RGB, and HSL formats.
Input query strings and outputs
Use an input name in this page’s URL as ?name=value, and join additional inputs with &. Portable shared links may instead use the compact ?ac= state parameter.
Input query strings
3-
?hex=HEXText · Optional · Default: #FF5733
-
?rgb=RGBText · Optional · Default: 255, 87, 51
-
?hsl=HSLText · Optional · Default: 10, 100%, 60%
Outputs
1-
resultResultText · Primary output
result contains the calculator’s complete rendered result area, including its visible result cards, tables, charts, and messages.
Convert colors between HEX, RGB, and HSL
Description
The Color Converter is a specialized tool for designers and front-end developers. It bridges the gap between different color representation systems: HEX (standard for web), RGB (standard for monitors), and HSL (more intuitive for human adjustment). As you type a code, the tool updates the other formats and provides a live visual preview of the color.
Inputs
- HEX: Hexadecimal color code starts with # (e.g.,
#FF5733). - RGB: Red, Green, Blue values (e.g.,
255, 87, 51). - HSL: Hue, Saturation, Lightness values (e.g.,
10, 100%, 60%).
Outputs
- Live Preview: A large box showing the selected color.
- Shade Palette: A row of boxes showing the color at different opacity levels (80%, 60%, 40%) to help with UI design.
Chart
- N/A: This tool provides a live visual design preview.
“Good to Know”
- Redox: RGB is an “additive” color model. When all three colors are at 255 (max), you get pure white. At 0, you get pure black.
- HSL Intuition: HSL is often preferred by designers because “Lightness” makes it very easy to create lighter or darker versions of the same color without changing the “Hue.”
- Browser Support: All modern browsers support all three formats in CSS, but HEX remains the most popular for branding and documentation.
Examples
Example 1: Classic Red
- Input: HEX: #FF0000
- Output: RGB: 255, 0, 0
Example 2: Royal Blue
- Input: HEX: #4169E1
- Output: RGB: 65, 105, 225
Example 3: Slate Gray
- Input: HEX: #708090
- Output: RGB: 112, 128, 144