CSS Color Converter Online

Convert colors between HEX, RGB, and HSL with a live swatch, right in your browser.

Every color you enter is converted locally in your browser, and nothing is uploaded to a server.

Built and maintained by Udit Agarwal

HEX, RGB and HSL Color Codes, Explained

Checking readability? Try the Contrast Checker.

About CSS Color Converter

This CSS color converter turns any color value into HEX, RGB, and HSL at once, with a live swatch preview so you can see the exact shade as you type. Paste a hex code, an rgb() or hsl() value, or a common CSS color name like blue, teal, or gold, and it instantly normalizes the input into all three formats. It handles transparency too, including rgba(), hsla(), and 8-digit hex with an alpha channel. Whether you are doing hex to rgb math for a design token, converting rgb to hex for a stylesheet, or checking an hsl value while tuning a palette, it keeps every format in sync. Built for front-end developers, designers, and QA engineers who juggle color formats daily. Everything runs locally in your browser, so the values you enter never leave your device.

Features

  • Converts HEX, RGB, and HSL all at once from a single input
  • Recognizes common CSS color names such as blue, teal, and gold
  • Supports transparency via rgba(), hsla(), and 8-digit hex alpha
  • Live color swatch preview updates instantly as you type
  • Accepts shorthand 3- and 4-digit hex codes
  • Normalizes percentage and 0-255 RGB channel values
  • Shows a clear inline error when a value cannot be parsed
  • Processed locally in your browser

How to use the CSS Color Converter

  1. Type or paste a color into the Color input box.
  2. Use a hex code, rgb(), hsl(), or a CSS color name like blue.
  3. Read the converted HEX, RGB, and HSL values in the result rows.
  4. Check the swatch beside the input to preview the exact color.

Example

Input

#3b82f6

Output

HEX  #3b82f6
RGB  rgb(59, 130, 246)
HSL  hsl(217, 91%, 60%)

One hex value converted into RGB and HSL with a matching live swatch.

Common errors & troubleshooting

  • "Couldn't parse that color" appears after typing a value. — Use a valid hex code, rgb()/rgba(), hsl()/hsla(), or a supported CSS color name; stray characters or missing parentheses break parsing.
  • A CSS color name like "salmon" is not recognized. — Only a curated set of common names is supported. Enter the equivalent hex or rgb() value instead.
  • Alpha is lost after converting. — Include the alpha channel in the input, such as rgba(0,0,0,0.5) or an 8-digit hex like #00000080, and it will carry into all formats.
  • RGB values above 255 or percentages look wrong. — Channels are clamped to the valid range; pass numbers from 0-255 or percentages from 0%-100% to get the expected result.

Frequently asked questions

What is the CSS Color Converter?
It is an in-browser tool that reads any HEX, rgb()/rgba(), hsl()/hsla(), or common CSS color name and converts it into HEX, RGB, and HSL together with a live swatch preview.
How do I convert HEX to RGB and HSL with this tool?
Paste a hex code such as #3b82f6 into the Color box, and the CSS Color Converter instantly shows the matching rgb() and hsl() values in the result rows.
Does the CSS Color Converter support transparency and alpha channels?
Yes. rgba(), hsla(), and 8-digit hex with an alpha value are all parsed, and the alpha is preserved across every output format.
Can I paste a CSS color name instead of a code?
Yes, standard names such as blue, teal, gold, and indigo are recognized and converted to HEX, RGB, and HSL.
Does it accept shorthand hex codes?
Yes, 3-digit and 4-digit shorthand hex like #f00 or #f00a are expanded automatically before conversion.
Are the color values I enter uploaded anywhere?
No. The CSS Color Converter runs entirely in your browser, so the values you enter are processed locally and never leave your device.

Related tools

  • Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
  • CSS / SCSS Formatter — Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.
  • SVG Optimizer — Minify SVG — strip comments, metadata and editor cruft, and collapse whitespace.
  • Number Base Converter — Convert integers between binary, octal, decimal and hex.
  • HTML Escape / Unescape — Escape and unescape HTML special characters and entities.
  • JS / TS Formatter — Beautify JavaScript, TypeScript and JSX/TSX with Prettier options, or minify plain JavaScript.
  • HTML Formatter — Beautify or minify HTML, format inline CSS/JS, and preview the result.

Guides

More Code Formatters tools

  • Text Diff — Compare two texts line-by-line and see additions and removals.
  • MDX Converter — Render MDX as formatted text, convert HTML → MDX, and escape text to literal MDX.
  • CSS / SCSS Formatter — Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.
  • JS / TS Formatter — Beautify JavaScript, TypeScript and JSX/TSX with Prettier options, or minify plain JavaScript.
  • HTML Formatter — Beautify or minify HTML, format inline CSS/JS, and preview the result.
  • XML Formatter — Beautify, minify and validate XML, and convert XML ↔ JSON.
  • SQL Formatter — Format SQL for MySQL, PostgreSQL, SQL Server, SQLite, BigQuery and Oracle.
  • GraphQL Formatter — Format or minify GraphQL queries and schemas, validate syntax and extract operations.
  • Dockerfile Formatter — Format a Dockerfile and get best-practice / lint suggestions.
  • MongoDB Query Formatter — Format MongoDB shell queries and aggregation pipelines.
  • Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
  • Mermaid Diagram Renderer — Render Mermaid diagrams (flowcharts, sequence, gantt) to SVG in your browser.

See all Code Formatters tools (32) · All tools