Color Converter Online — HEX to RGB, RGB to HSL & More

IP & Network — 閲覧

Three Color Formats Explained

HEX (Hexadecimal)

A # followed by 6 hex digits — each pair represents red, green, and blue channels (00–FF).

#FF5733  →  Red=255, Green=87, Blue=51
#000000  →  Black
#FFFFFF  →  White
#3B82F6  →  Blue (Tailwind blue-500)

Use when: CSS properties, HTML attributes, design tools (Figma, Sketch)

RGB (Red, Green, Blue)

Three integers from 0–255 for each color channel. RGBA adds a 0–1 opacity value.

rgb(255, 87, 51)        → orange-red
rgba(255, 87, 51, 0.5)  → 50% transparent orange-red

Use when: CSS, dynamic color calculation in JavaScript, image processing

HSL (Hue, Saturation, Lightness)

Hue (0–360°), saturation (0–100%), lightness (0–100%) — the most intuitive format for humans.

hsl(14, 100%, 60%)   → orange-red
hsl(0, 0%, 0%)       → black
hsl(0, 0%, 100%)     → white

Use when: Generating color variants (hover states), building color scales, design system tokens

How to Convert Colors Online

Use tool.tl's color converter:

  1. Go to tool.tl/color-converter
  2. Enter a color value in any format (HEX, RGB, or HSL)
  3. All other formats update in real time with a live color preview
  4. Click to copy any format instantly

HEX ↔ RGB Conversion in Code

# Python
hex_color = '#FF5733'
r = int(hex_color[1:3], 16)  # 255
g = int(hex_color[3:5], 16)  # 87
b = int(hex_color[5:7], 16)  # 51

// JavaScript — RGB to HEX
const toHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('').toUpperCase();
toHex(255, 87, 51);  // '#FF5733'

Why HSL Is Best for Color Scales

HSL makes it trivial to generate tints and shades — just adjust lightness while keeping hue and saturation constant:

hsl(217, 91%, 90%)  → blue-100 (lightest)
hsl(217, 91%, 60%)  → blue-400
hsl(217, 91%, 50%)  → blue-500 (base)
hsl(217, 91%, 35%)  → blue-700
hsl(217, 91%, 20%)  → blue-900 (darkest)

Frequently Asked Questions

When should I use HEX vs RGB vs HSL?

They're equivalent in what they can express. HEX is most concise for static values in CSS. RGB/RGBA is convenient when you need transparency. HSL is best when you need to programmatically adjust colors — lightness changes are predictable and intuitive.

Is HEX case-sensitive?

No — #FF5733 and #ff5733 produce identical colors. Pick one style and be consistent within a project.

Is the tool free?

Yes — tool.tl's color converter is completely free, real-time conversion, no account needed.