Color Converter
Enter a color in HEX, RGB, or HSL format to instantly convert it to all three representations.
RGB Components
Related tools
About the Color Converter
Colors on the web can be expressed in several formats. This tool converts between the three most common: HEX, RGB, and HSL. All three represent the same set of colors — they are just different notations for specifying a point in the sRGB color space.
HEX
A hex color is a 6-digit (or 3-digit shorthand) hexadecimal number preceded by a #. Each pair of digits represents the red, green, and blue channel values from 0 (00) to 255 (ff). HEX is the most common format in CSS and design tools.
RGB
RGB specifies a color as three integer values for the red, green, and blue channels, each between 0 and 255. It maps directly to how monitors display colors by mixing light. The CSS function syntax is rgb(r, g, b).
HSL
HSL (Hue, Saturation, Lightness) is a cylindrical representation that is often more intuitive for designers. Hue is a degree on the color wheel (0–360), saturation is the intensity of the color (0–100%), and lightness is how bright the color is (0% = black, 100% = white, 50% = pure color). The CSS syntax is hsl(h, s%, l%).
HEX to RGB and RGB to HEX conversion
Converting between HEX and RGB is a straightforward mathematical operation. Each pair of hex digits is an integer from 0–255 in base 16. For example, #1a2b3c converts to rgb(26, 43, 60) — hex 1a is 26, 2b is 43, and 3c is 60 in decimal. This hex color converter handles the conversion instantly in both directions — enter a HEX code to get RGB and HSL, or enter RGB values to get the equivalent HEX code.
Common use cases
- Converting a designer's HEX color from a style guide into CSS
rgb()for use with opacity - Translating brand colors between design tools (Figma, Sketch) and code
- Generating HSL variants for hover/active states by adjusting lightness
- Verifying that two colors that look similar are actually identical values
- Converting colors from an API or data source into a format your CSS framework expects
Privacy
Color conversion runs entirely in your browser. Learn more about how Dev-Utilities handles privacy.