🎨

HexLab Color Tool

Convert between HEX, RGB and HSL color formats, pick colors visually from a canvas picker, and mix colors using real-time RGB and HSL sliders.

Color Converter
Invalid hex code. Use format #RRGGBB
Enter valid R, G, B values (0-255)
Enter valid H (0-360), S and L (0-100) values
Visual Color Picker
#2F62DE
47,98,222
225,70,53
#2F62DE
RGB Color Mixer
#000000
R0
G0
B0
0, 0, 0
0, 0%, 0%
HSL Color Mixer
#000000
H0
S0
L50
0, 0%, 50%
128, 128, 128

About HexLab Color Tool

HexLab is a browser-based color tool designed for web developers, UI/UX designers and front-end engineers who regularly work with color values in CSS, HTML and design tools. Color codes appear in three main formats in web work: HEX (like #2F62DE), RGB (like rgb(47, 98, 222)) and HSL (like hsl(225, 70%, 53%)). Each format has its use, and being able to convert between them instantly saves time when translating between a design spec and CSS code.

The visual canvas picker lets you click or drag to select any color, with the hue slider below controlling the base hue. This is faster than opening Photoshop or Figma just to grab a color value. The RGB and HSL mixer cards let you build colors by adjusting individual channel sliders, which makes it intuitive to lighten, darken, saturate or shift the hue of a color by feel rather than calculation.

Common Use Cases

  • 🎨
    CSS color conversion. A design tool gives you RGB values but your CSS variable needs HEX. Paste the RGB values in and copy the HEX output instantly.
  • 🌗
    Dark mode palette. Use the HSL mixer to create dark mode variants of your brand colors by reducing the lightness while keeping the hue and saturation consistent.
  • ♿
    Accessibility checks. Use the visual picker to find a color with better contrast by adjusting lightness in the HSL mixer until the foreground and background combination meets WCAG standards.
  • 🖥️
    Brand color verification. Verify that a color used in a web page matches the exact brand HEX value by converting from the inspected RGB values shown in browser dev tools.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) describes color by the intensity of each light channel from 0 to 255. HSL (Hue, Saturation, Lightness) describes color in a more human-readable way: hue is the color angle (0-360 degrees around the color wheel), saturation is how vivid it is (0% is grey, 100% is full color) and lightness is how bright it is (0% is black, 100% is white, 50% is the pure color).
When should I use HEX vs RGB in CSS?
HEX is the most compact format and is widely supported everywhere. RGB is useful when you need to set the alpha (transparency) channel with rgba(). HSL is the most intuitive for programmatic color manipulation, for example creating color variants for hover states or dark mode by adjusting only the L value.
Can I use this tool to pick colors for print design?
This tool works with screen (RGB) color spaces. Print design uses CMYK which has a different gamut. The colors you pick here are accurate for digital screens but will need to be converted to CMYK by a professional print tool before sending to a printer.

Quick Color Reference

Click a swatch to load it into the converter.
Common Web Colors
Color Format Cheat Sheet
#RRGGBB — 6-digit HEX, most common in CSS
rgb(R, G, B) — each channel 0 to 255
rgba(R,G,B,A) — with alpha 0.0 to 1.0
hsl(H, S%, L%) — hue 0-360, sat/light 0-100%
hsla(H,S%,L%,A) — with alpha transparency