🚧 We’re making Tools Pasal better. Found a broken tool or have an idea? Tell us →
Tools Pasal

Colour Converter & Contrast Checker

Pick a colour and convert between HEX, RGB and HSL, then check text/background WCAG contrast for accessible, readable designs. Runs in your browser.

Colour converter

RGB
HSL — 210°, 50%, 50%

Contrast checker (WCAG)

Almost before we knew it
we had left the ground — sample text preview.
16.35: 1 contrast ratio
AA — normal text ✓AA — large text ✓AAA — normal text ✓AAA — large text ✓

WCAG 2.x: normal text needs ≥ 4.5:1 (AA) or ≥ 7:1 (AAA); large text (≥ 18.66px bold or 24px) needs ≥ 3:1 (AA) or ≥ 4.5:1 (AAA).

How to use it

Use the picker or type a HEX code; the RGB fields and HSL sliders stay in sync, and you can copy any format. In the contrast checker, set a text colour and a background — the ratio and the WCAG AA/AAA pass/fail badges update live, with a sample-text preview.

HEX, RGB and HSL — what they mean

  • HEX — #RRGGBB, the web’s common notation (each pair is 0–255 in hex).
  • RGB — red, green, blue from 0–255; how screens mix colour.
  • HSL — hue (0–360°), saturation and lightness (0–100%); intuitive for tweaking shades and tints.

WCAG contrast targets

TextAAAAA
Normal4.5 : 17 : 1
Large (≥24px, or ≥18.66px bold)3 : 14.5 : 1

Aim for at least AA on all text; prefer AAA for long-form body text. Contrast ratio runs from 1:1 (invisible) to 21:1 (black on white).

Sources & notes

Standard sRGB conversions; contrast uses the WCAG 2.x relative-luminance formula. Computed locally.

More developer tools: Base64 Encode/Decode, JSON Formatter.

Frequently asked questions

How do I convert HEX to RGB or HSL?

Type or pick a colour and all three formats update together — HEX (#RRGGBB), RGB (0–255 per channel) and HSL (hue 0–360°, saturation and lightness 0–100%). Copy any format with one click.

What is a WCAG contrast ratio?

It measures how readable text is against its background, from 1:1 (no contrast) to 21:1 (black on white). WCAG sets minimums for accessibility: normal text needs at least 4.5:1 for AA and 7:1 for AAA; large text (about 24px, or 18.66px bold) needs 3:1 for AA and 4.5:1 for AAA.

Which contrast level should I aim for?

AA (4.5:1 for normal text) is the common legal/standard target for websites. AAA (7:1) is stricter and ideal for body text where readability matters most. If you only pass 'large text', increase the font size or pick a higher-contrast colour for small text.

Why does HSL sometimes shift by 1 when I convert back?

HSL values are whole numbers here, so converting HEX → HSL → HEX can drift by one step in a channel due to rounding. That is normal for any integer HSL tool and is visually identical.

Is anything uploaded?

No. All conversions and contrast checks run in your browser.