Create account
Interfaces and CSSRuns in your browser

HEX Color Converter

Enter a 3- or 6-digit HEX value and get normalized HEX, RGB, HSL, and numeric channels for a design-token workflow.

  • HEX to RGB/HSL
  • 3/6 digit support
  • Local calculation
Online tool

Try the tool

Add your data, choose the settings, and get the result.

Input

Result

#336699
HEX: #336699
RGB: rgb(51 102 153)
HSL: hsl(210 50% 40%)
Channels: R 51, G 102, B 153

Your data stays here

Text and selected files are processed in the current browser and are not sent to a server to produce the result.

Reviewed: 2026-07-17
01

How to use it

  1. 1

    Enter a HEX color with or without #.

  2. 2

    Review the normalized value and preview.

  3. 3

    Copy the RGB or HSL CSS value.

02

What the tool can do

  • Normalizes short HEX to full #RRGGBB.
  • Calculates RGB channels and CSS rgb() notation.
  • Calculates HSL hue, saturation, and lightness.
03

Common use cases

  • Converting a HEX design token to CSS rgb() or hsl().
  • Checking color channels before documenting a UI kit.
  • Quickly normalizing short HEX from a design.
04

How it works inside

HSL is rounded to whole degrees and percentages for practical CSS output.

The calculation runs in the browser and does not require a network request.

05

Questions and answers

Why is input HEX only?

This keeps the tool deterministic and safe for quick token conversion.

Does this replace the contrast checker?

No. Use the dedicated contrast tool to evaluate an accessible color pair.