HEX ↔ RGB / HSL Color Converter
Translate color specifications in real-time. Select colors from the visual color picker or write standard web values to convert them instantly.
#f68d2c
Click to launch color palette selector
About HEX, RGB, and HSL Color Models
Different design systems and layout files use different color models. Translating these values manually can be tedious. This converter bridges the three most popular color standards:
Understanding the standards:
- HEX (Hexadecimal): A base-16 representation of color channels: Red, Green, and Blue. Consists of a hash followed by six characters (e.g.
#4c6971). Commonly used in HTML, CSS, and Figma. - RGB (Red, Green, Blue): Defines intensities from 0 to 255 of the primary light colors (e.g.
rgb(76, 105, 113)). Useful in programmatic canvas drawings and graphics libraries. - HSL (Hue, Saturation, Lightness): Maps colors based on human perception. Hue stands for the angle on the color wheel (0-360), Saturation represents percentage intensity (0-100), and Lightness dictates brightness (0-100). Essential for calculating gradient shades and relative colors in CSS variables.