Hex Color Formatter & Converter — Hex to RGB, HSL, CSS Variables Online Free | TimeToProgram — Free

How to use the Hex Color Formatter & Converter

Convert your hex colors in four steps:

Enter hex color values

Type or paste one or more hex colors into the input. Accepts 3-digit (#abc), 6-digit (#aabbcc), and 8-digit (#aabbccff) hex values, with or without the # prefix. Multiple colors can be pasted on separate lines or extracted from a block of CSS.

Choose output format

Select the output format: RGB, RGBA, HSL, HSLA, or CSS custom property. Toggle uppercase or lowercase hex output and choose whether to include the # prefix.

Review results and WCAG contrast

Each color is shown with a visual swatch, its converted value, and WCAG contrast ratios against black and white. AAA, AA, and Fail badges indicate accessibility compliance.

Copy or download

Copy individual converted values or download all results as a text or CSS file for use in your project.

When to use this tool

Use the hex color formatter whenever you need to work with CSS color values:

→Converting a brand hex color to RGB or HSL for use in CSS custom properties or design tokens
→Checking WCAG AA/AAA contrast compliance for text and background color combinations
→Normalising inconsistent hex values (mixed 3-digit and 6-digit) in a design system stylesheet
→Extracting all hex colors from a CSS file and batch-converting them to a consistent format
→Generating CSS variable declarations (--color-primary: #1a6b4a) from a hex color palette
→Identifying if a hex color can be shortened to its 3-digit equivalent without quality loss
→Converting 8-digit hex values (with alpha) to their RGBA equivalents for browser compatibility

Frequently asked questions

Q:Which hex color formats are supported?

The tool supports 3-digit shorthand hex (#rgb), 6-digit full hex (#rrggbb), and 8-digit hex with alpha channel (#rrggbbaa). Input can include or omit the leading # symbol. Uppercase and lowercase hex letters are both accepted.

Q:What WCAG contrast ratios does the tool calculate?

The tool calculates the contrast ratio of each color against pure black (#000000) and pure white (#ffffff) using the WCAG 2.1 relative luminance formula. Results are labelled as AAA (contrast ≥ 7:1), AA (contrast ≥ 4.5:1), or Fail (contrast < 4.5:1). This helps identify whether a foreground color meets accessibility standards on a given background.

Q:Can I convert colors with an alpha channel?

Yes — 8-digit hex values like #rrggbbaa are supported. The alpha byte is extracted and included in RGBA and HSLA output as a decimal between 0 and 1. For RGB and HSL output without alpha, the alpha channel is noted separately alongside the converted value.

Q:Does the tool detect named CSS colors?

Yes — when a hex value corresponds to an exact CSS named color (e.g., #ff0000 = red, #008000 = green), the tool displays the named color alongside the converted output. This is useful when standardising a design system to use semantic named colors where appropriate.

Q:Can I process multiple hex colors at once?

Yes — paste a list of hex colors (one per line, or extracted from a CSS block) and the tool processes all of them simultaneously. Each color gets its own row in the results table with a swatch, converted value, and WCAG contrast badges. Individual colors can be removed from the results or copied independently.

Q:Is my color data sent to a server?

No — all color conversion and WCAG calculations run entirely in your browser using JavaScript. No color values are transmitted to any server. This is safe for confidential brand color palettes and proprietary design systems.