Color Format Converter

About This Tool

Web colors can be expressed in several formats, and switching between them manually is error-prone and tedious. This hex to rgb converter (and RGB to HSL color converter online) lets you work in whichever format feels natural and instantly see equivalent values in all other formats, along with a live color preview swatch.

HEX (hexadecimal) is the most common format in CSS and design tools. It represents red, green, and blue channels as two-digit hexadecimal numbers, e.g., #2563eb. RGB expresses the same channels as decimal values from 0 to 255, e.g., rgb(37, 99, 235). HSL (Hue, Saturation, Lightness) is more intuitive for humans — hue is a degree on the color wheel, saturation and lightness are percentages, e.g., hsl(224, 76%, 53%).

The CSS variable snippet makes it easy to drop the color directly into your stylesheet as a CSS custom property, following modern best practices for design token management.

All conversions use standard mathematical formulas and are performed locally in your browser, with no external libraries or server calls.

How to Use

1. Click the color picker to visually choose a color, or type a value directly into the HEX, RGB, or HSL input fields.
2. All other fields update automatically as you type or pick.
3. Click the Copy button next to any field to copy that format to your clipboard.
4. Use the CSS Variable Snippet section to copy a ready-to-use CSS custom property declaration.

Color Format Reference

• HEX: #RRGGBB — 6 hex digits (0–9, A–F). Shorthand #RGB also supported.
• RGB: R, G, B — three values from 0 to 255.
• HSL: H, S%, L% — hue 0–360°, saturation and lightness 0–100%.