1. Home
  2. Tools
  3. Developer and encoders
  4. CSS Color Converter

CSS Color Converter

Convert any CSS color between HEX, RGB and HSL with a live preview and contrast ratios against white and black text.

Free, no sign-upRuns in your browserDeveloper and encoders

Input

Accepts #RGB, #RRGGBB, rgb(113, 148, 48) or hsl(81, 51%, 38%).

Conversions

HEX-
RGB-
HSL-
Contrast with white text-
Contrast with black text-

Why color formats matter

The same color can be written several ways in CSS. Design tools usually hand over HEX codes. RGB is handy when you need transparency with rgb() or rgba(). HSL describes a color by hue, saturation and lightness, which makes it easy to build lighter and darker shades of a brand color. Converting cleanly between them keeps your design tokens consistent.

How to use the converter

Paste a HEX, RGB or HSL value, or pick a color with the color picker. The tool shows the color in all three formats with a preview, and you can copy any of them with one click. It also shows the contrast ratio against white and black text, using the WCAG 2 formula, so you can see at a glance which text color is readable on it.

Reading the contrast badges

  • AAA: a ratio of 7:1 or more, the strictest level for normal text.
  • AA: 4.5:1 or more, the usual target for body text.
  • AA large text only: 3:1 or more, fine for large headings but not body text.

Frequently asked questions

Should I use HEX or HSL in my CSS?

Both work in every modern browser. HEX is compact for fixed values. HSL is easier when you want to adjust lightness or saturation, for example to create hover states or a palette of tints.

Why does converting back and forth change a value slightly?

HSL values are rounded to whole numbers here, so a round trip can shift a channel by one step. The difference is not visible, but use the HEX or RGB value as your source of truth.

Does the tool support transparency?

It reads rgba() and hsla() values but ignores the alpha channel, since contrast and HEX conversion here are for solid colors.

Related tools

All tools
Binary TranslatorConvert text, including emoji and accented letters, to UTF-8 binary, or decode binary back to readable text.YAML to JSON ConverterPaste a YAML config file or snippet and convert it to clean JSON, or turn JSON back into YAML, right in your browser.Base64 Encoder / DecoderEncode text to Base64 or decode Base64 back to text, with full UTF-8 support and a URL-safe Base64Url mode.Website Security CheckerCheck a site's HTTPS setup, security headers, cookie flags and mixed content, then get a grade and plain-language fixes for each issue.Webhook Payload BuilderTurn a webhook URL and JSON payload into a ready-to-run cURL command or fetch snippet for testing Zapier, Make, n8n and custom integrations.Hex ConverterConvert text to hex and back, hex to decimal and back, or a CSS hex color to RGB and HSL values, right in your browser.