QuickKit

Color Converter

HEX, RGB, HSL — bidirectional, with a live preview.

Live preview
HEX

HEX (#ff6600), RGB (rgb(255,102,0)), or HSL (hsl(24,100%,50%)).

Conversions
HEX
#ff6600
RGB
rgb(255, 102, 0)
HSL
hsl(24, 100%, 50%)

Examples

  • HEX → RGB
    #ff6600
    → rgb(255, 102, 0)
  • RGB → HSL
    rgb(255, 102, 0)
    → hsl(24, 100%, 50%)
  • HSL → HEX
    hsl(24, 100%, 50%)
    → #ff6600

What it does

Color Converter translates a color between HEX, RGB, and HSL representations in either direction. A large live preview shows the color you are working with at all times.

When you need it

Picking a CSS color, copying a value from a design tool, switching a HEX swatch into HSL to tweak hue, or matching an accessibility contrast target — Color Converter is the small everyday bridge between color formats.

How it works locally

All conversions are computed by a pure TypeScript engine. The graphical tool on this page and the global Quick Command bar call the same code — no duplicated color logic. Your input is not sent anywhere or persisted.

Related tools