This domain & website is for sale — just $200huzaifa.pro.dev@gmail.com

Color Converter (HEX, RGB, HSL)

Convert colours between HEX, RGB, HSL and HSV with alpha, check WCAG contrast against white, black or any colour, and copy tints and shades. Everything runs in your browser.

  • HEX, RGB, HSL and HSV
  • WCAG contrast checker
  • Tints and shades

Conversions

Edit any field and the others update. Values are rounded for display.

CMYK (display only)

cmyk(82%, 71%, 0%, 0%)

Simple formula without an ICC profile; ask your printer for exact values.

WCAG contrast checker

Your colour used as text on each background. Translucent colours are blended onto the background first.

Contrast 5.88 to 1 on white, 3.57 to 1 on black, 5.30 to 1 on the custom colour.

On white

5.88:1

Aa Large text

Normal body text sample

  • AA normalPass
  • AA largePass
  • AAA normalFail
  • AAA largePass

On black

3.57:1

Aa Large text

Normal body text sample

  • AA normalFail
  • AA largePass
  • AAA normalFail
  • AAA largeFail

On custom colour

5.30:1

Aa Large text

Normal body text sample

  • AA normalPass
  • AA largePass
  • AAA normalFail
  • AAA largePass

Thresholds: AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold); AAA needs 7:1 and 4.5:1.

Tints and shades

Mixed with white (tints) and black (shades) in 10% steps. Click a swatch to copy its HEX code.

Tints

Shades

How to use

How to Convert Colours and Check Contrast

  1. 1

    Enter a colour

    Use the picker, or paste a value such as #1e90ff, rgb(30 144 255) or hsl(210, 100%, 56%) into Paste any colour. The format is detected for you.

  2. 2

    Edit any field

    Change the HEX, RGB, HSL or HSV field and the others update. Use the opacity slider to add transparency.

  3. 3

    Check contrast

    Read the contrast ratio and AA and AAA results for your colour as text on white, black and a custom background.

  4. 4

    Copy what you need

    Copy any converted value, or click a tint or shade swatch to copy its HEX code.

Accepted Colour Formats

The converter parses these formats and shows the result in all four colour models.

#1e90ff

HEX with 3, 4, 6 or 8 digits. The # is optional. 4 and 8 digit forms include alpha.

rgb(30, 144, 255)

RGB channels as 0 to 255 or percentages. Commas or spaces, with rgba() or a slash for alpha.

hsl(210, 100%, 56%)

HSL with hue in degrees, turns, radians or gradians. hsla() is also accepted.

hsv(210, 88%, 100%)

HSV, also written hsb(). Output uses hsv().

#ff000080

8-digit HEX with alpha. 80 hex is about 50% opacity, shown as 0.502.

Not supported

Named colours such as red, and modern spaces like lab() or oklch(), are not parsed.

Worked Example: #2f4bff

The same colour in each model, and how it fares as text on white. Values are rounded for display.

Conversions

HEX   #2f4bff
RGB   rgb(47, 75, 255)
HSL   hsl(232, 100%, 59%)
HSV   hsv(232, 82%, 100%)

Reference contrast

#777777 on white = 4.48:1
AA normal text needs 4.5:1, so it fails
AA large text needs 3:1, so it passes
#767676 on white = 4.54:1, passes AA

Contrast ratios follow WCAG 2.x. A ratio just under a threshold is never rounded up into a pass.

Common Use Cases

Translating design values

Turn a HEX code from a design file into the rgb() or hsl() form your CSS or framework expects.

Accessibility checks

Test text and background pairs against WCAG AA and AAA before shipping a design.

Building a palette

Generate lighter and darker variations of a brand colour to use as hover states or backgrounds.

Working with transparency

Convert between 8-digit HEX and rgba() or hsla() and see how a translucent colour reads on a background.

FAQ

Frequently Asked Questions

How do I convert HEX to RGB?

Type or paste the HEX code into the HEX field. The RGB field updates straight away. For example, #2f4bff becomes rgb(47, 75, 255). You can also go the other way by editing the RGB field.

Which colour formats can I paste?

HEX with 3, 4, 6 or 8 digits, rgb() and rgba(), hsl() and hsla(), and hsv() or hsb(). Commas or the modern space-separated syntax with a slash for alpha both work. Named colours like red are not supported.

How is the WCAG contrast ratio calculated?

The tool uses the WCAG 2.x relative luminance formula. If your colour is translucent it is first blended onto the background. The ratio is (lighter + 0.05) / (darker + 0.05), from 1:1 to 21:1. For example, #777777 on white is 4.48:1.

What do AA and AAA mean?

They are WCAG conformance levels. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Large text means 24px, or 18.66px bold.

Why can converting back and forth change a value slightly?

HSL, HSV and RGB values are rounded to whole numbers for display. Converting from a rounded HSL string back to RGB can be off by a few steps on some colours, while HEX and RGB convert exactly.

Is the CMYK value accurate for printing?

No. The CMYK value uses a simple formula with no colour profile, so it is only an estimate. Ask your printer for exact values. Nothing you enter is sent to a server; everything runs in your browser.

Keep going

Related Tools

Hand-picked tools that pair well with this one. All free, no sign-up.

  1. Everyday

    QR Code Generator

    Generate scannable QR codes for URLs, text, and data.

    • Multiple formats
    • Customizable size
    • PNG download
    Open tool
  2. Everyday

    Image Compressor

    Compress images and scrape images from webpages instantly.

    • 30-70% compression
    • Batch processing
    • ZIP download
    Open tool
  3. Developers

    Expo App Icon Generator

    Generate all React Native Expo app assets from one logo.

    • All assets included
    • Customizable colors
    • app.json
    Open tool