Coastal morning
Skip to content
Draftroom
See it with your project

Free Color Tools

HEX, RGB & HSL Color Converter

Convert colors between HEX, RGB, and HSL formats with a live visual preview.

What this tool does

Translate one color between common design and CSS formats.

The converter accepts HEX, RGB, or HSL input and calculates the equivalent values in all three formats.

A live swatch makes input mistakes easier to spot, and each formatted value can be copied directly.

Use the tool

Convert HEX, RGB, and HSL

Choose the input format, enter the color values, and copy the equivalent CSS-ready outputs.

Converted values

hex#3563E9
rgbrgb(53, 99, 233)
hslhsl(225, 80%, 56%)

How to use it

Three quick steps

  1. 1Choose HEX, RGB, or HSL as the source format.
  2. 2Enter the source color values.
  3. 3Review the swatch and copy any converted format.

Worked example

Convert brand blue for CSS

Enter #3563E9 as HEX.

The tool returns RGB and HSL equivalents alongside the normalized HEX value.

FAQ

Questions about the hex/rgb/hsl converter

Practical details about using the tool and understanding its result.

Keep working

Related tools

Color ToolsFeatured

Color Palette Generator

Build analogous, complementary, triadic, or monochromatic palettes from one HEX color.

Open tool
Color Tools

Palette from Image

Sample five dominant colors from a local image and copy the resulting HEX values.

Open tool
Color Tools

Color Contrast Checker

Check foreground and background colors against WCAG AA and AAA contrast targets.

Open tool

From one asset to the whole workflow

Keep production color values aligned with the approved palette.

Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.

See Draftroom with your project