Color Converter: HEX, RGB, HSL — How to Convert Color Formats Online

The Three Main Color Formats

HEX (Hexadecimal)

Format: #RRGGBB — two hex digits each for Red, Green, Blue channels (00–FF, equivalent to 0–255).

Example: #FF5733 = Red 255, Green 87, Blue 51

Most common in CSS, design tools (Figma, Sketch), and brand style guides.

RGB (Red, Green, Blue)

Format: rgb(R, G, B) — three integers from 0–255.

Example: rgb(255, 87, 51)

Used in CSS, Canvas API, and image processing libraries. With transparency: rgba(R, G, B, A) where A is 0–1.

HSL (Hue, Saturation, Lightness)

Format: hsl(H, S%, L%)

• H (Hue): 0–360° on the color wheel (0°=red, 120°=green, 240°=blue)
• S (Saturation): 0%=gray, 100%=full color
• L (Lightness): 0%=black, 50%=normal, 100%=white

Example: hsl(11, 100%, 60%) (same as #FF5733)

HSL is the most intuitive format for humans — adjusting lightness or saturation while keeping the same hue is trivial.

How to Convert Colors Online

Use the tool.tl Color Converter:

1. Go to tool.tl/color-converter
2. Enter any color value in HEX, RGB, or HSL format
3. All other formats appear instantly with a color preview

When to Use Each Format

Format	Best For	Key Advantage
HEX	CSS, brand guidelines, design handoff	Compact, easy to copy-paste
RGB	CSS, Canvas, image processing	Direct channel control, rgba transparency
HSL	CSS themes, dynamic color generation	Adjust brightness/saturation without changing hue
CMYK	Print design	Matches physical ink mixing

Color in CSS

/* HEX */
color: #FF5733;

/* RGB */
color: rgb(255, 87, 51);

/* RGBA (0=transparent, 1=opaque) */
color: rgba(255, 87, 51, 0.8);

/* HSL */
color: hsl(11, 100%, 60%);

/* HSLA */
color: hsla(11, 100%, 60%, 0.8);

/* CSS custom properties (recommended for theming) */
:root { --primary: #FF5733; }
.button { background: var(--primary); }

HSL for Design Systems

When building a design system, HSL shines for generating color scales — adjust only the L (lightness) to create consistent dark/light variants:

:root {
  --primary-h: 11;
  --primary-s: 100%;

  --primary:       hsl(var(--primary-h), var(--primary-s), 60%);
  --primary-dark:  hsl(var(--primary-h), var(--primary-s), 45%);
  --primary-light: hsl(var(--primary-h), var(--primary-s), 80%);
}

Frequently Asked Questions

What is the 3-digit HEX shorthand?

#RGB is shorthand for #RRGGBB where each digit is doubled: #F53 expands to #FF5533. Shorthand only works when both digits of each channel are identical.

How do I add transparency to a color?

Three CSS options: (1) rgba(R, G, B, 0.5) where the 4th value is 0–1; (2) 8-digit HEX #RRGGBBAA where the last two digits are the alpha channel (FF=opaque, 00=transparent); (3) the opacity CSS property — but this affects the entire element including children, unlike rgba which only applies to that property.

What color format does Figma use?

Figma primarily shows HEX and RGB values in the color picker, and also supports HSL and HSB (Hue/Saturation/Brightness). When copying colors for code, right-click → Copy as CSS gives you the value in CSS-ready format.