# How I convert colours between HEX, RGB, and HSL

A beginner-friendly guide to colour formats, alpha values, CSS usage, and checking converted colours visually.

- Date: 2026-09-27
- URL: https://ilham.dev/posts/how-to-convert-colors-between-hex-rgb-and-hsl/
- Markdown: https://ilham.dev/posts/how-to-convert-colors-between-hex-rgb-and-hsl/index.md
- Tags: color, css, design, tools
- Reading time: 2 min


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

I use [Color Converter](/tools/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.