Skip to content
Tooletto

HEX to RGB Converter

A preset of Color Picker & Converter

Convert a hex color code to RGB values. Shorthand like #abc expands correctly to #aabbcc, and every other format is shown alongside so you can grab whichever your code needs.

  • Files never leave your device
  • Free, no signup
  • No watermarks
  • Works offline once loaded
Loading tool…

How to color picker & converter

  1. 1

    Choose a color

    Use the swatch, or type a HEX or RGB value directly.

  2. 2

    Copy any format

    HEX, RGB, HSL, HSV and CMYK are all shown at once.

  3. 3

    Check contrast

    Set a background to see whether text passes WCAG AA and AAA.

Why shorthand hex codes exist and how they expand

CSS and design tools both support a three-character shorthand hex notation — `#abc` — as a compact way to write colors where each channel happens to use a repeated digit, and it expands by doubling each character rather than padding with zeros: `#abc` becomes `#aabbcc`, not `#0a0b0c`. This distinction matters because the two possible expansions produce genuinely different colors, and getting it backwards when converting by hand is an easy, common mistake — correctly doubling each digit rather than zero-padding is exactly what a proper conversion needs to get right.

Reading RGB values correctly across different tools

RGB values are conventionally written as three numbers from 0 to 255 for red, green and blue respectively, but the exact notation varies by where they are being pasted — CSS accepts `rgb(171, 187, 204)` with commas, some design and illustration tools expect the same three numbers space-separated with no commas at all, and a few contexts express each channel as a 0–1 fraction rather than a 0–255 integer. Seeing the value broken out here removes the need to manually convert between whichever specific notation a target tool or codebase happens to expect.

A quick way to check a value pulled from a screenshot or design file

A hex code copied from a design tool's eyedropper, a brand style guide, or a screenshot color picker is frequently the only value available, with no accompanying RGB breakdown — pasting it here to see the RGB, HSL and CMYK equivalents together is faster than looking each conversion up individually or running the arithmetic by hand.

Frequently asked questions

What is the difference between HEX, RGB and HSL?

HEX and RGB describe the same thing in different notation — how much red, green and blue to mix. HSL restates it as hue, saturation and lightness, which is far easier to reason about: to make a color lighter you change one number instead of guessing at three.

What does the contrast ratio mean?

It compares the relative luminance of two colors on a scale from 1 (identical) to 21 (black on white). WCAG requires at least 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at AAA.

Why does my color fail contrast when it looks fine to me?

Because the ratio is computed from relative luminance, not from how different two colors appear. Two vivid colors of similar brightness — orange on red, say — look distinct but carry almost no luminance contrast, and become unreadable for anyone with low vision or on a sunlit screen.

Is the CMYK conversion accurate for printing?

It is the standard arithmetic conversion, which is a starting point rather than a color-managed result. Real print work needs an ICC profile for the specific press and paper, because CMYK cannot reproduce many bright RGB colors at all.