Convert colors between HEX, RGB, HSL formats with a live preview and color picker.
Colours in digital design are described in multiple formats depending on the tool or context. A brand's exact colour specified as #1a73e8 in your CSS might need to be entered as rgb(26, 115, 232) in Figma or hsl(217, 80%, 51%) in a design token file. Converting between these formats manually is error-prone and slow — this tool does it instantly.
Hexadecimal colour codes like #FF5733 are the most common format in web development. The six digits are three pairs representing Red, Green, and Blue values from 00 (minimum) to FF (maximum) in base-16. #000000 is black (all zero), #FFFFFF is white (all maximum), #FF0000 is pure red. CSS, HTML, and most graphic design tools accept HEX directly.
Screens display colour by mixing red, green, and blue light at different intensities from 0 to 255. rgb(255, 87, 51) is the RGB equivalent of #FF5733. RGB is intuitive once you understand the additive colour model — red + green = yellow, all three at full = white, all at zero = black. JavaScript, canvas APIs, and many animation tools work primarily in RGB values.
HSL (Hue, Saturation, Lightness) is the most human-intuitive colour format. Hue is the colour angle on a 360° wheel (0° = red, 120° = green, 240° = blue). Saturation is the intensity from grey (0%) to pure colour (100%). Lightness is from black (0%) through the colour (50%) to white (100%). HSL is ideal in CSS for creating colour variations — change only the lightness to get different shades of the same colour without recalculating HEX values.
Maintaining exact brand colours across web (HEX), print (CMYK — a separate format), and presentations (RGB) is critical for professional work. Keep a record of all three format values for your brand colours so you can apply them correctly regardless of which tool you're using.
A HEX color code is a 6-digit hexadecimal number that represents a color's red, green and blue components. For example, #FF0000 is pure red (R=255, G=0, B=0). The # prefix is required in CSS.
RGB defines a color using Red, Green, Blue values (each 0–255). RGBA adds an Alpha channel (0–1) for transparency. rgb(255,0,0) is solid red; rgba(255,0,0,0.5) is 50% transparent red.
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360), saturation is a percentage (0% = grey, 100% = full color), and lightness is a percentage (0% = black, 100% = white). HSL is easier to reason about than HEX or RGB.
All formats work in CSS. Use HEX (#rrggbb) for static colors, RGB/RGBA when you need transparency control, and HSL when you want to programmatically adjust brightness or saturation.
A CSS custom property (variable) stores a color value and lets you reuse it. Example: --primary: #7c5af3; Then use it anywhere with color: var(--primary);. Great for theming and maintaining consistent color systems.