Pick any color and instantly convert between HEX, RGB, HSL and CSS formats.
100% Client-side
Or type a value below, or click a preset swatch
Invalid HEX. Enter a 3 or 6-character hex value (e.g. #fff or #3b82f6).
Color Presets
Frequently Asked Questions
A HEX color code is a six-digit hexadecimal number (e.g., #3b82f6) used in HTML and CSS to represent colors. The first two digits represent the red channel, the next two the green channel, and the last two the blue channel. Each pair ranges from 00 (0) to FF (255). HEX codes are the most common format in web design and development.
RGB (Red, Green, Blue) defines colors by mixing levels of red, green, and blue light, each ranging from 0 to 255. HSL (Hue, Saturation, Lightness) describes colors more intuitively: hue is the color wheel angle (0–360°), saturation is the intensity (0–100%), and lightness is how light or dark the color is (0–100%). HSL is easier to reason about when you want to adjust a color while keeping its overall tone.
CSS custom properties (also called CSS variables) let you define a color once and reuse it throughout your stylesheet. Declare the variable inside a :root selector, for example: :root { --color: #3b82f6; }. Then use it anywhere with the var() function: color: var(--color);. This makes it easy to update your color scheme from a single place.
Disclaimer: This tool is provided for convenience and runs entirely in your browser. Color rendering may vary slightly between displays, browsers, and operating systems due to differences in color profiles and screen calibration.