logo
CONVERTOOL
Loading search...

Color Converter — HEX, RGB, HSL

Convert any color between HEX, RGB, and HSL instantly. Edit any field or use the color picker — all formats stay in sync.

HEX#3b82f6
Copy
RGBrgb(59, 130, 246)
Copy
HSLhsl(217, 91%, 60%)
Copy
CSS HEX#3b82f6
Copy
CSS RGBrgb(59, 130, 246)
Copy
CSS HSLhsl(217, 91%, 60%)
Copy

Color Format Reference

  • HEX (#rrggbb): The most common format in web development. 6 hex digits represent red, green, and blue channels. Example: #3b82f6
  • RGB (r, g, b): Each channel is a decimal value 0–255. Example: rgb(59, 130, 246)
  • HSL (h, s%, l%): Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Example: hsl(217, 91%, 60%)

When to Use Each Format

  • HEX: Most compact; use in CSS, HTML, design tools like Figma and Sketch
  • RGB: Use when you need alpha transparency (rgba()) or are doing color math in JavaScript
  • HSL: Best for theming and design systems — predictable adjustments: hsl(217, 91%, 40%) is just a darker version of the same blue

Common Web Colors

  • White: #ffffff = rgb(255,255,255) = hsl(0,0%,100%)
  • Black: #000000 = rgb(0,0,0) = hsl(0,0%,0%)
  • Red: #ff0000 = rgb(255,0,0) = hsl(0,100%,50%)
  • Green: #00ff00 = rgb(0,255,0) = hsl(120,100%,50%)
  • Blue: #0000ff = rgb(0,0,255) = hsl(240,100%,50%)

Frequently Asked Questions

What is a HEX color code?

A HEX color code is a 6-digit hexadecimal number preceded by a # symbol (e.g., #3b82f6). The six digits represent pairs of values for red, green, and blue channels, each ranging from 00 (0) to FF (255). Shorthand 3-digit HEX codes (e.g., #fff) are also supported.

What is RGB color?

RGB stands for Red, Green, Blue. Each component ranges from 0 to 255, describing the intensity of each primary color. For example, rgb(255, 0, 0) is pure red, rgb(0, 0, 255) is pure blue, and rgb(255, 255, 255) is white. RGB is the native format of screens and monitors.

What is HSL color?

HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360°: 0°=red, 120°=green, 240°=blue). Saturation is the intensity of the color (0%=gray, 100%=full color). Lightness controls brightness (0%=black, 50%=normal, 100%=white). HSL is more intuitive for designers because you can adjust brightness without changing the hue.

Which color format should I use in CSS?

All three formats work in CSS. HEX (#3b82f6) is compact and widely used. RGB (rgb(59, 130, 246)) is readable and supports alpha via rgba(). HSL (hsl(217, 91%, 60%)) is easiest to manipulate programmatically — changing the lightness value darkens or lightens the color predictably. CSS variables often use HSL for theming.

How do I convert HEX to RGB?

Split the 6-character HEX string into three pairs, then convert each pair from hexadecimal to decimal. For example, #3b82f6: 3b=59, 82=130, f6=246 → rgb(59, 130, 246). Our converter does this automatically for any input you type.