Color Converter

🎨

HEX ↔ RGB ↔ HSL • live preview

HEX Color ⓘ

RGB

HEX

#2563EB

RGB

rgb(37, 99, 235)

HSL

hsl(221, 83%, 53%)

CSS

#2563EB

How to Use the Color Converter

Enter a HEX code — type 6 hex digits (e.g. 2563EB) and RGB, HSL, and the preview update live.
Or enter RGB — set Red, Green, Blue (0–255) and the HEX/HSL update automatically.
Use the color picker — click the swatch picker to choose visually; all codes sync.
Copy any format — grab the HEX, RGB, or HSL string for your CSS or design tool.

Benefits

💻

Web & CSS

Convert design HEX codes to RGB/RGBA for transparency, or HSL for easy lightness and saturation tweaks in CSS.

🖌️

Graphic Design

Match brand colors across tools — Figma, Photoshop, and Illustrator each prefer different formats.

🎛️

HSL Control

HSL (hue, saturation, lightness) makes it intuitive to create tints, shades, and color variations programmatically.

Color Code Guide — HEX, RGB, and HSL Explained

Digital colors are described in three common formats. HEX (hexadecimal) is the web standard: a 6-digit code like #2563EB, where the pairs represent Red, Green, and Blue from 00 to FF (0–255 in decimal). RGB expresses the same values as decimals — rgb(37, 99, 235) — which is handy when you need an alpha channel (RGBA) for transparency. Both describe identical colors; HEX is just a compact way of writing RGB. Converting between them is constant work for web developers and designers.

HSL (Hue, Saturation, Lightness) takes a different, more human approach: hue is an angle on the color wheel (0–360°), saturation is color intensity (0–100%), and lightness runs from black to white (0–100%). HSL makes it easy to generate a palette — keep the hue and adjust lightness for tints and shades, or rotate the hue for complementary colors. Modern CSS supports all three formats, so converting accurately between HEX, RGB, and HSL lets you pick the most convenient representation for each task, whether matching a brand color, building a design system, or fine-tuning a gradient.

HEX Format

#RRGGBB — two hex digits each for red, green, blue. #FF0000 = pure red, #00FF00 = green, #0000FF = blue, #FFFFFF = white, #000000 = black.

🎚️

RGB Format

rgb(r, g, b) with each 0–255. rgb(255,0,0) = red. Add alpha for transparency: rgba(255,0,0,0.5) = 50% transparent red.

🌈

HSL Format

hsl(hue, sat%, light%). Hue 0/360 = red, 120 = green, 240 = blue. Lightness 0% = black, 50% = pure color, 100% = white.

🎯

Common Colors

Red #FF0000. Blue #0000FF. Green #008000. Black #000000. White #FFFFFF. Gray #808080. Orange #FFA500.

Color Conversion FAQ

How do you convert HEX to RGB? ▾

Split the 6-digit HEX code into three pairs and convert each from hexadecimal to decimal (0–255). For #2563EB: 25₁₆ = 37, 63₁₆ = 99, EB₁₆ = 235, giving rgb(37, 99, 235). This converter does it instantly — just type the HEX code and the RGB values appear.

What is the difference between RGB and HSL? ▾

RGB defines a color by mixing red, green, and blue light (0–255 each), which maps to how screens emit light but isn't intuitive for humans. HSL defines the same color by hue (which color), saturation (how vivid), and lightness (how bright). HSL is easier for design tasks like making a color lighter or finding complementary hues, while RGB/HEX are the storage standard.

What does the # mean in a color code? ▾

The hash symbol (#) signals that the following characters are a hexadecimal color code in CSS and HTML. #FF5733 tells the browser to interpret FF5733 as a hex color. It's required in CSS (color: #FF5733) but this converter accepts the code with or without it.

Can I convert a color to RGBA for transparency? ▾

Yes — RGBA is just RGB plus an alpha (opacity) value from 0 (transparent) to 1 (opaque). Convert your HEX to RGB here, then add the alpha: rgb(37, 99, 235) becomes rgba(37, 99, 235, 0.5) for 50% opacity. The RGB numbers stay the same; only the alpha controls transparency.