Skip to content
cliplimeClipLime

Convert HEX to RGB

Type a hex code and get the RGB values, the CSS rgb() string and the 0 to 1 fractions.

Runs in your browser, nothing is sent anywhere

HEX to RGB

#

Closest CSS name: yellowgreen #9acd32

Alpha, from fully see-through to solid

100%

RGB

rgb(197, 236, 67)

Red

197

Green

236

Blue

67

As fractions from 0 to 1

0.7725, 0.9255, 0.2627

The form shaders, Unity, Three.js and many graphics libraries expect.

How the hex digits turn into numbers

  • R: c5 = 12 × 16 + 5 = 197
  • G: ec = 14 × 16 + 12 = 236
  • B: 43 = 4 × 16 + 3 = 67

All formats

HSL, HSV and CMYK precision

HEX

#c5ec43

RGB

rgb(197, 236, 67)

Each channel runs from 0 to 255.

HSL

°
%
%

hsl(74, 82%, 59%)

Hue in degrees, saturation and lightness in percent.

HSV (HSB)

°
%
%

hsv(74, 72%, 93%)

The model most color pickers use. Not valid CSS.

CMYK

%
%
%
%

cmyk(17%, 0%, 72%, 7%)

A simple screen to print formula. Real printing needs a color profile, so expect a shift.

HSL, HSV and CMYK are rounded to whole numbers, so converting them back can land one step away from the original. Pick decimals to see more exact values.

Contrast with white and black

With white

1.36:1

Aaon white
Aawhite
  • FailsAA text
  • FailsAA large text
  • FailsAAA text
  • FailsAAA large text
  • FailsIcons and borders

With black

15.45:1

Aaon black
Aablack
  • PassesAA text
  • PassesAA large text
  • PassesAAA text
  • PassesAAA large text
  • PassesIcons and borders

Text on this color reads best in black (15.45:1).

Copy as CSS

Hex

color: #c5ec43;

RGB, comma separated

color: rgb(197, 236, 67);

RGB, space separated

color: rgb(197 236 67);

HSL, comma separated

color: hsl(74, 82%, 59%);

HSL, space separated

color: hsl(74 82% 59%);

Custom property

--color: #c5ec43;

At a glance

Input
Hex codes with 3, 4, 6 or 8 digits, with or without the # sign.
Output
The red, green and blue numbers, the rgb() string, and the same values as fractions from 0 to 1.
Working shown
Each pair of hex digits is broken down into the sum that gives its number.
Preview
A live swatch and a color picker, so you can see what the code looks like.
Opacity
An 8 digit hex or the opacity slider gives rgba() output too.
Other formats
HSL, HSV, CMYK, contrast and copy-ready CSS are on the same page, below the converter.
Privacy
Runs in your browser. Nothing is sent.

How to do it

  1. 1

    Type the hex code

    Enter the six digits, for example c5ec43. The # is optional, and shorthand like fa0 works.

  2. 2

    Read the RGB values

    The red, green and blue numbers and the rgb() string appear straight away, next to a swatch of the color.

  3. 3

    Copy what you need

    Copy the rgb() string for CSS, or the 0 to 1 fractions for a shader or a game engine.

How a hex color becomes RGB

A hex code is three numbers written in base 16, one for each of red, green and blue. Base 16 uses the digits 0 to 9 and then a to f for the values 10 to 15, so two digits can hold any number from 0 to 255. To read a pair, multiply the first digit by 16 and add the second.

In #c5ec43 the red pair is c5: c is 12, so 12 × 16 + 5 = 197. The green pair ec is 14 × 16 + 12 = 236, and the blue pair 43 is 4 × 16 + 3 = 67. The color is rgb(197, 236, 67). Some codes you will recognise:

  • #000000 is rgb(0, 0, 0), black.
  • #ffffff is rgb(255, 255, 255), white.
  • #ff0000 is rgb(255, 0, 0), pure red.
  • #808080 is rgb(128, 128, 128), a middle grey.

A three digit code is shorthand that doubles each digit: #fa0 means #ffaa00, which is rgb(255, 170, 0).

Where you need RGB instead of hex

CSS accepts both, but RGB is the form to use when you want transparency in older syntax (rgba()), when a design tool or API asks for separate red, green and blue fields, or when you need to calculate with the channels, for example to blend two colors.

Graphics code often wants fractions instead of 0 to 255. Divide each channel by 255: 197 becomes 0.7725, 236 becomes 0.9255 and 67 becomes 0.2627. This page shows those numbers, ready for shaders, Three.js, Unity and similar tools. On Android, Color.rgb(197, 236, 67) takes the 0 to 255 values directly.

Hex codes with transparency

An 8 digit code adds a fourth pair for opacity, where 00 is fully see-through and ff is solid. Divide the pair's value by 255 to get the alpha for rgba(). Common values, rounded to the nearest step out of 256:

  • ff is 100%, e6 is 90%, cc is 80%, b3 is 70%, 99 is 60%.
  • 80 is 50%, 66 is 40%, 4d is 30%, 33 is 20%, 1a is 10%, 00 is 0%.

Type an 8 digit code, for example c5ec4380, and the result shows rgba(197, 236, 67, 0.502).

Questions people ask

How do I convert hex to RGB by hand?

Split the code into three pairs. For each pair, multiply the first digit by 16 and add the second, using 10 to 15 for the letters a to f. For example, ff is 15 × 16 + 15 = 255.

Do I need the # sign?

No. This page accepts the code with or without it. CSS itself requires the # in front of a hex color.

What does a 3 digit hex code mean?

It is shorthand where each digit is doubled. #f60 is the same as #ff6600, which is rgb(255, 102, 0). It can only express colors whose pairs have matching digits.

How do I convert a hex code with alpha to rgba?

Convert the first three pairs as usual and divide the last pair's value by 255 for the alpha. 80 is 128, and 128 divided by 255 is about 0.502, so #c5ec4380 is rgba(197, 236, 67, 0.502).

Should I use hex or RGB in CSS?

Either works. Hex is shorter and common in design handoff. Use rgb() when you want to read or change a channel, or hsl() when you want to adjust lightness. Browsers treat them identically.

Is my color sent to a server?

No. The conversion happens in your browser as plain arithmetic, and nothing is uploaded.

Guides that help

All Data and developer guides →

Data and developer

That long token is readable by anyone, so where you paste it matters. Decode a JWT and read it safely

6 min readRead

Data and developer

Base64 looks like encryption and is not. What it does, why it exists and why your decode fails

6 min readRead

Pairs well with

Color Converter

Convert a color between HEX, RGB, HSL, HSV and CMYK and check its contrast with white and black.

Opens HEX, RGB, HSL, HSV, CMYK, CSS names · Saves Copied CSS

Open tool
New

Thumbnail Tester

Preview your thumbnail and title in realistic feeds before publishing.

Opens JPG, PNG, WebP

Open tool

Regex Tester

Test a JavaScript regex with flags, see matches and groups, and preview a replacement.

Opens Pasted text · Saves Copied text

Open tool

Data Converter

Convert CSV, TSV, JSON, XML, YAML and Excel files into each other, with nested data and large files handled.

Opens CSV, TSV, JSON, XML, YAML, XLSX · Saves CSV, TSV, JSON, XML, YAML, XLSX

Open tool