Skip to tool
ecech.
Finance Developer Text & SEO Network Time E-commerce Math Design Health YouTube Image Converters
🎨 Design & Color

Free HEX to RGB Converter with Alpha, HSL, OKLCH and a Tint Scale

Paste any hex — 3, 4, 6 or 8 digits — and get RGB, RGBA, HSL, HSV and OKLCH at once, plus a tint and shade scale you can drop straight into a design system.

Every format

Contrast on white

—

Contrast on black

—

Tint and shade scale
Advertisement

How the calculation works

A hex colour is three base-16 numbers wearing a disguise # 2B 7F FF red green blue 2×16 + 11 7×16 + 15 15×16 + 15 43 127 255 Same colour, four notations #2B7FFF rgb(43 127 255) hsl(217 100% 58%) 8-digit adds alpha: #2B7FFF80 = 50%

How to Use This Tool

Hex and RGB are the same information written two ways. A hex code is three pairs of base-16 digits, one per colour channel, each running from 00 to FF — which is 0 to 255 in the decimal notation CSS's rgb() function uses. Converting between them is arithmetic, not translation, and nothing is lost in either direction.

What you can paste in

The input accepts more than hex. All of these describe the same colour and all of them work:

  • 6-digit hex — #2B7FFF, the everyday form. The hash is optional.
  • 3-digit shorthand — #2BF expands to #22BBFF by doubling each digit. Note that this only reaches 4,096 of the 16.7 million possible colours, so it cannot represent most brand colours exactly.
  • 8-digit hex — #2B7FFF80, where the last pair is alpha. 80 is 128, which is roughly 50% opacity. This is supported by every current browser and is much more compact than writing rgba().
  • 4-digit hex — shorthand with alpha, expanded the same way.
  • Functional notation — paste rgb(43 127 255) or hsl(217 100% 58%) straight from a stylesheet and it converts back.
The 8th and 9th hex digits are opacity — a scale most people memorise wrongly 000% 4025% 8050% BF75% FF100% Common mistake: 50% is 80, not 50. Hex 50 is decimal 80, which is only 31% opacity.
Multiply the opacity you want by 255 and convert to hex. The tool does it for you and prints both the hex and the decimal alpha.

The other formats, and when each is worth using

HSL separates hue, saturation and lightness, which makes it far easier to hand-tune a colour: changing lightness while holding hue produces a sensible tint, whereas nudging RGB channels usually shifts the hue as a side effect. HSV is what most design tools' colour pickers use internally, so it is the format that matches the sliders in Figma or Photoshop. OKLCH is perceptually uniform, meaning equal numeric steps look like equal visual steps — which is exactly what you want when generating a colour scale, and exactly what HSL fails at.

The tint and shade scale

The strip at the bottom generates a 50-to-900 ramp from your colour, the shape design systems and Tailwind expect. It works in OKLCH rather than HSL, so the steps are perceptually even instead of bunching up in the yellows and spreading out in the blues. Copy it as CSS custom properties and paste it into a stylesheet. The contrast figures above it tell you immediately whether your colour is usable as text on white or on black, which decides half your design decisions before you make them.

Advertisement

Frequently Asked Questions

What does the 8-digit hex format mean?
The last two digits are the alpha channel — opacity — on the same 00 to FF scale as the colour channels. #2B7FFF80 is the same blue at roughly 50% opacity. It is supported in every current browser and is more compact than rgba(). Note that 50% is 80 in hex, not 50: hex 50 is decimal 80, which is only 31%.
Is #FFF the same as #FFFFFF?
Yes. Three-digit shorthand expands by doubling each digit, so #2BF becomes #22BBFF. The catch is coverage: shorthand can only express 4,096 colours out of 16.7 million, so most brand colours have no shorthand form. If a designer gives you a three-digit code, the full six-digit expansion is what actually renders.
Why would I use HSL instead of RGB?
Because HSL matches how people think about colour. To make a colour lighter you raise one number, and the hue stays put. Doing the same in RGB means adjusting three channels in the right proportion, and getting it slightly wrong shifts the hue. HSL is far better for generating variants of an existing colour by hand.
What is OKLCH and why does it matter?
It is a perceptually uniform colour space, meaning a fixed numeric change produces a fixed visual change regardless of hue. HSL does not have this property — a yellow and a blue at the same HSL lightness look wildly different in brightness. For generating colour scales that step evenly, OKLCH gives noticeably better results, and every current browser supports it in CSS.
Does converting between formats lose accuracy?
Hex and RGB are exactly equivalent, so that round trip is lossless. HSL and HSV involve division and rounding, so converting to HSL and back can shift a channel by one unit — visually undetectable but occasionally annoying if you are diffing stylesheets. Convert once and store the result rather than round-tripping repeatedly.
Why does my colour look different in print?
Screens emit light using red, green and blue; print reflects light using cyan, magenta, yellow and black. The two gamuts do not overlap completely, and vivid screen colours — particularly bright blues and greens — simply cannot be reproduced with ink. Any RGB to CMYK conversion is an approximation, which is why print work uses a colour-managed proof rather than a formula.
What contrast ratio do I need for text?
4.5:1 for normal body text and 3:1 for large text, to meet WCAG level AA. The two contrast figures shown here tell you at a glance whether your colour works as text on a white or black background. For testing an arbitrary pair of colours rather than against white and black, use our dedicated contrast checker.

What people usually need next

Picked by hand, not by algorithm.

🎨Free WCAG Color Contrast Checker with a One-Click Accessible FixBefore you ship that colour, check it is readable as text.

Related tools in Design & Color

🎨Free WCAG Color Contrast Checker with a One-Click Accessible FixTest any foreground and background pair against every WCAG threshold at once, with a live preview and a one-click suggestion for the nearest passing colour. 🛒Free Amazon FBA Profit Calculator: Fees, Storage, Returns and Ad SpendReferral fee, fulfilment fee by size tier, monthly storage, returns and ad spend — subtracted in the order Amazon actually applies them, down to profit per unit. 💻Free Online Base64 Encoder and Decoder for Text, Images and Any FileText or files, both directions, with correct UTF-8 handling and a URL-safe toggle — plus the 33% size penalty shown before you paste a 4 MB image into a JSON payload.
#color #conversion #css #design
Browse all Design & Color tools