What is the hex code for transparent blue?

There is not one. Transparency is an alpha channel, not a color. You can write eight-digit hex — #4A90D980 is a blue at 50% alpha — but the visible result depends on the backdrop.

How do I make a color transparent in CSS?

Use rgb(74 144 217 / 50%) or the older rgba(74, 144, 217, 0.5) on the property itself, or append two hex digits: #4A90D980. Avoid the opacity property unless you want the element's text and children faded too.

What is the difference between opacity and alpha?

Alpha applies to one color value, so a background can be semi-transparent while the text on it stays solid. The opacity property applies to the whole element and everything inside it.

Does a transparent color have a contrast ratio?

Not on its own. Contrast is only defined once the color is composited over a known backdrop, which is why automated checkers usually skip semi-transparent values. Flatten it against the real background and test that.

Transparent blue color: hex codes, shades and palettes

Palettes built around transparent blue. Click any swatch to copy its hex code.

Transparency is not a color, it is a fourth channel. There is no hex code for "transparent blue" — there is a blue plus an alpha value, and the result depends entirely on what sits behind it. The base used here is #4A90D9.

#FF9744

#39F5E1

#C0B5FF

#E3A542

#9EDF69

#3BF289

#B7C5FF

#FF4A9F

#00C5B6

#83B2FF

#FA8CB2

#AFA035

#79B6B3

#A1BFC3

#9FC2CC

#CFE3F0

#00567E

#4D769B

#659AD2

#A7BBE7

#82E8EA

#B4C2FF

#FFA9B2

#B8C85C

#A7926F

#756446

#AD907B

#7D8EAF

#E19897

#D88E78

#16BA96

#49A4CE

#009DBE

#FF99C4

#DDB500

#64C1FF

#6C8792

#62A7C1

#9ABECB

#A1DFF3

#FFA55E

#76DB75

#55B8FF

#CD5BAF

#404C63

#2B3B69

#283042

#1D232E

#B7E8F9

#93CADA

#5EAEC3

#6F8990

#66CF85

#7CBB9A

#B4B0EC

#FFBAC4

#9CB4E5

#CBD0FF

#D1B672

#D9C576

#8FD6D9

#A2D2DA

#B4D7E4

#56778D

#899FA6

#CCE4F0

#57A7B4

#CD9393

#F88674

#653D2C

#E27B72

#6EA7CC

#6C807D

#ADC3C5

#81C8DB

#ABCCE3

#FF9C96

#673A29

#70BCAC

#1DB3EB

#AEBBD6

#797798

#D4B4F5

#DFB5E3

#DE9A5E

#00BC7A

#23B5FF

#D97CD7

#146279

#0184BB

#6CA3DC

#A5C5FF

#ABE3FA

#8FCBEA

#95AFBF

#8297A6

Transparent blue hex, RGB, HSL and OKLCH

#4A90D9

HEX: #4A90D9
RGB: rgb(74, 144, 217)
HSL: hsl(211, 65%, 57%)
OKLCH: oklch(64.1% 0.131 251.4)
On white: 3.34:1
On black: 6.28:1

Shades of transparent blue

Eleven steps from one base color, generated in OKLCH so each step is an equal perceived step rather than an equal numeric one. Click a swatch to copy it.

Named shades and close relatives

Four ways to write a transparent blue in CSS

The modern form is rgb(74 144 217 / 50%), and the older rgba(74, 144, 217, 0.5) still works everywhere. Hex takes an alpha pair too — #4A90D980 is the same color at 50%, where the last two digits run from 00 to FF. And opacity: 0.5 is a fourth option that behaves differently: it fades the entire element including its text and children, not just the background.

That last distinction causes most transparency bugs. If a button looks washed out including its label, it has opacity where it wanted an alpha channel on background-color.

Transparency and contrast

A semi-transparent color has no fixed contrast ratio, because the ratio depends on the backdrop. The same blue at 50% clears WCAG AA over white and fails over a photograph — and accessibility tools generally cannot check it, since they cannot know what will be behind it at runtime.

The safe approach is to compute the flattened result and test that. The values above show this blue composited over white and over black at three alpha levels, which is the range any overlay has to survive. Paste any of them into the contrast checker to see where it stands.

Contrast and readability

Transparent blue on white measures 3.34:1 and on black 6.28:1. WCAG AA asks for 4.5:1 on normal text and 3:1 on large text and UI components, so the higher of those two decides which background it belongs on. In the scale above, 500 is the first to clear 4.5:1 on white, at 5.29:1.

The contrast checker reports every level for a given pair and suggests the nearest passing shade on the same hue. The color picker builds this same scale from any color you paste in.

Transparent blue color questions

What is the hex code for transparent blue?: There is not one. Transparency is an alpha channel, not a color. You can write eight-digit hex — #4A90D980 is a blue at 50% alpha — but the visible result depends on the backdrop.
How do I make a color transparent in CSS?: Use rgb(74 144 217 / 50%) or the older rgba(74, 144, 217, 0.5) on the property itself, or append two hex digits: #4A90D980. Avoid the opacity property unless you want the element's text and children faded too.
What is the difference between opacity and alpha?: Alpha applies to one color value, so a background can be semi-transparent while the text on it stays solid. The opacity property applies to the whole element and everything inside it.
Does a transparent color have a contrast ratio?: Not on its own. Contrast is only defined once the color is composited over a known backdrop, which is why automated checkers usually skip semi-transparent values. Flatten it against the real background and test that.

Related colors:blue, navy, royal blue, cobalt, periwinkle, steel blue. See every shade on the colors index.