Color Converter

Convert colors between HEX, RGB, RGBA, HSL, and HSLA formats with a live preview swatch. All client-side.

Color Picker

HEX Input

Alpha: 1.00

Color Codes

Frequently Asked Questions

HEX is compact and universally supported — best in CSS when exact values matter. RGB/RGBA is explicit and easy to tweak programmatically. HSL/HSLA is human-friendly: hue 0–360 is the color, saturation is intensity, lightness is brightness — making it easy to create color variations by simply adjusting one parameter.

Alpha controls opacity. A value of 1 (or ff in HEX8) is fully opaque; 0 is fully transparent. In rgba() and hsla() it ranges from 0 to 1. In 8-digit HEX (#rrggbbaa) it ranges from 00 to ff.

How Color Conversion Works

All color formats describe the same color using different mathematical representations. Converting between them uses standard formulas over the same underlying RGB components.

Parse HEX to RGB

A HEX color like #3d85c8 is split into three byte pairs: 3d, 85, c8. Each pair is parsed as hexadecimal (base 16) to give R=61, G=133, B=200 in the 0–255 range.

Compute HSL

R, G, B are normalized to 0–1. The max and min components determine the hue (angle on the color wheel), saturation (intensity), and lightness using the standard Hue-Saturation-Lightness conversion formula.

Format All Outputs

From the same R/G/B/A values, all six formats (HEX, HEX8, RGB, RGBA, HSL, HSLA) are generated simultaneously. The alpha slider adjusts only the A channel, regenerating all outputs in real time.

Common Use Cases

Design-to-Code Translation

Design tools (Figma, Sketch, Adobe XD) often output colors in HEX or RGB. Convert them to the format your CSS framework or design token system uses — HEX for conciseness, HSL for palette variations.

Dark Mode Theme Tokens

HSL is ideal for dark mode. Keep the hue constant, increase lightness for light mode, decrease it for dark mode. This tool converts a base color to HSL so you can derive the full tone scale without manual math.

Accessibility Contrast Checking

WCAG contrast ratio calculations require the relative luminance of a color, which is computed from the linear RGB values. Convert your brand color to RGB here as the first step in a contrast analysis.

CSS Variables & Custom Properties

Modern CSS design systems define colors as custom properties. Convert a single brand hex code into all formats and paste the correct one into your :root {} — whether the project uses HEX, rgb(), or hsl().

Transparent Color Overlays

Use the alpha slider to find the right rgba() or hsla() value for semi-transparent backgrounds, modal overlays, and hover states. Preview the transparency in the live swatch above.

Cross-Tool Color Migration

When migrating a design system between tools, colors may be stored in different formats. Convert each color to a canonical format (e.g., hsl()) and update the design tokens consistently across the entire system.