Color Format Converter — HEX, RGB, HSL & CSS Names Online

What Is a Color Format Converter?

A Color Format Converter translates color values between HEX, RGB, HSL, and CSS named colors — instantly, in your browser. No upload, no server, no data leaving your device.

Supported Formats

HEX — #ff6b6b or the 3-digit shorthand #f66
RGB — rgb(255, 107, 107) (values 0–255 per channel)
HSL — hsl(0, 100%, 71%) (hue 0–360°, saturation and lightness as percentages)
CSS Name — coral, royalblue, mediumseagreen — all 148 standard CSS named colors

How to Use

Type or paste any color value into the input field
The tool auto-detects the format — no dropdown needed
All four formats appear instantly below with a live color preview
Click Copy next to any format to copy it to your clipboard

Color Format Quick Reference

Format	Example	Common Use
HEX	`#ff6b6b`	CSS, HTML, design tools (Figma, Sketch)
RGB	`rgb(255, 107, 107)`	CSS, Canvas API, image processing
HSL	`hsl(0, 100%, 71%)`	CSS custom properties, palette generation
CSS Name	`salmon`	Readable code, quick prototyping

HEX Color Format

HEX colors consist of a # followed by six hexadecimal digits (00–FF) representing the red, green, and blue channels. For example, #ff0000 is pure red. A 3-digit shorthand exists when each pair of digits is identical: #ffaabb shortens to #fab.

RGB Color Format

RGB specifies a color as three numbers, each between 0 and 255, for the red, green, and blue channels. rgb(255, 0, 0) is pure red; rgb(0, 0, 0) is black; rgb(255, 255, 255) is white. RGB maps directly to how screens work, making it ideal for canvas drawing and image manipulation.

HSL Color Format

HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0° and 360° are red, 120° is green, 240° is blue). Saturation is how vivid the color is (0% = gray, 100% = fully saturated). Lightness controls brightness (0% = black, 100% = white, 50% = the pure color).

HSL is easier to reason about than RGB when you need tints, shades, or complementary colors — just adjust the lightness or hue while keeping the others fixed.

CSS Named Colors

CSS includes 148 standardized color names from aliceblue to yellowgreen. They are identical across all browsers, making them safe to use in CSS without knowing the exact hex value. Named colors are convenient for readability but limited to predefined hues — use HEX or RGB for custom colors.

Privacy

All color conversions happen locally in your browser using pure JavaScript math. No color data is ever sent to a server.

FAQ

What color formats does this tool support?

The converter supports four formats: HEX (e.g. #ff6b6b or the 3-digit shorthand #f66), RGB (e.g. rgb(255, 107, 107)), HSL (e.g. hsl(0, 100%, 71%)), and all 148 standard CSS named colors such as coral, royalblue, or mediumseagreen.

How does auto-detection work?

The tool inspects the first characters of your input. Values starting with # are treated as HEX, values starting with rgb( as RGB, values starting with hsl( as HSL, and alphabetic strings are looked up in the CSS color name table. No selector or dropdown needed.

Why does the CSS Name field sometimes show a dash?

Only the 148 standardized CSS named colors (such as red, coral, or steelblue) have a CSS name. Colors like #ff6b6b do not correspond to any named color, so the field shows — to indicate there is no name.

Is my color data sent to a server?

No. All conversions are computed locally in your browser using pure JavaScript. No color value is ever sent to a server, stored, or logged.