Color Converter

Key takeaways

• Accepts #hex, rgb()/rgba(), and hsl()/hsla()
• Outputs normalized hex plus CSS rgb() and hsl()
• Runs entirely client-side — brand palettes stay private
• Send hex into Contrast Checker for WCAG ratios

What is a color converter?

A color converter maps the same color across notations designers and developers use in CSS and design tools — typically hex, RGB, and HSL.

Hex is compact for tokens and Tailwind configs; RGB matches many APIs and canvas calls; HSL is often easier when adjusting lightness for dark mode. This tool parses common CSS forms (including short #rgb) and reports normalized hex plus rgb()/hsl() strings. Alpha channels in rgba/hsla are ignored so you always get an opaque sRGB triple.

Features

• Multi-format input

  Hex, rgb()/rgba(), and hsl()/hsla() in one field.

• Normalized report

  Canonical #rrggbb plus CSS rgb() and hsl() strings.

• Short hex support

  Three-digit #rgb expands to six digits.

• Local only

  Palette values never leave your browser.

How it works

1. 1

   Paste a color

   Use hex or a CSS rgb()/hsl() function.

2. 2

   Convert

   The tool normalizes to hex, RGB, and HSL.

3. 3

   Copy what you need

   Grab the notation your stylesheet or token file expects.

Example walkthroughs

• Hex to RGB/HSL

  Sky-500-style hex expands to rgb() and hsl() equivalents.

  #0ea5e9

• HSL input

  HSL converts to hex and rgb for token exports.

  hsl(199, 89%, 48%)

Use cases

• Design token handoff

  Translate Figma hex into CSS variables your codebase expects.

• Theme experiments

  Nudge HSL lightness, convert back to hex, then contrast-check.

Code snippets

• Hex expand sketch

  js

  Three-digit hex expansion used before RGB parsing.

  const short = "0af";
  const full = short.replace(/./g, (c) => c + c); // "00aaff"
  const hex = "#" + full;

Common errors

• Unrecognized color

  Cause: Typo, missing %, or a non-sRGB format like lab()/oklch().

  Fix: Use #hex, rgb(r,g,b), or hsl(h,s%,l%) with percentages on HSL.

• Alpha disappeared

  Cause: rgba/hsla alpha is intentionally ignored.

  Fix: Convert the opaque base, then re-apply opacity in CSS separately.

About Color Converter

Color Converter is a private workspace for moving between hex, RGB, and HSL without opening a design app or pasting brand values into a random web form. Drop in `#0ea5e9`, `rgb(14, 165, 233)`, or `hsl(199, 89%, 48%)` and get a report with every notation ready to copy into CSS variables, Figma notes, or Tailwind configs.

Teams search for “hex to rgb” and “hsl to hex” when implementing design tokens across stacks. One file may store hex, another expects space-separated RGB, and a dark-mode pass wants HSL lightness tweaks. Converting by hand invites off-by-one mistakes; this tool applies the standard sRGB ↔ HSL math in one click.

Short three-digit hex expands correctly (`#0af` → `#00aaff`). Percentage channels in `rgb()` are supported. When an alpha channel is present it is dropped on purpose — contrast and token work usually needs the opaque base color first. Pair with Contrast Checker to validate text on the resulting background.

Everything runs in your browser on Toolverse by RS. Unpublished brand palettes and client-specific swatches never need to hit a hosted converter. For print-oriented CMYK or Display P3 wide-gamut work, use a color-managed design tool — this page targets everyday CSS sRGB chores.

Best practice: store a single source of truth (usually hex or OKLCH in modern systems), convert at the boundary, and re-check contrast whenever you lighten or darken a token for themes.

Frequently asked questions

Explore more

• All tools

  Browse formatters, converters, encoders, and more.

• Utilities

  QR codes, color conversion, and WCAG contrast checks.

• Privacy

  How client-side tools handle your data.