How I convert colours between HEX, RGB, and HSL

Colour converters help when a design, CSS file, or tool uses a different colour format than the one I have.

I use Color Converter for the quick version of this task, then I review the output before relying on it.

The simple idea

Colour converters help when a design, CSS file, or tool uses a different colour format than the one I have.

The tool is a shortcut for the mechanical work. It does not remove the need to understand what the result means.

Step 1: Paste the colour value

Paste the colour value.

Step 2: Check the HEX output

Check the HEX output.

Step 3: Check RGB values for CSS or design tools

Check RGB values for CSS or design tools.

Step 4: Use HSL when adjusting hue, saturation, or lightness

Use HSL when adjusting hue, saturation, or lightness.

Step 5: Watch alpha/opacity values if present

Watch alpha/opacity values if present.

Step 6: Preview the colour visually

Preview the colour visually.

Step 7: Check contrast separately before using colours for text

Check contrast separately before using colours for text.

My checklist

Before I trust the result, I check:

• Paste the colour value.
• Check the HEX output.
• Check RGB values for CSS or design tools.
• Use HSL when adjusting hue, saturation, or lightness.
• Watch alpha/opacity values if present.
• Preview the colour visually.
• Check contrast separately before using colours for text.

That review step is what keeps a quick tool from becoming a quick mistake.