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.

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

9 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.

Transparent blue color values

#4A90D9rgb(74, 144, 217)

Color spaces of #4a90d9
RGB	74	144	217
HSL	211°	65%	57%
HSV	211°	66%	85%
CMYK	0.66	0.34	0.00	0.15
XYZ	25.3171	26.4095	69.3955
Yxy	26.4095	0.2090	0.2180
CIE-Lab	58.4238	0.9158	-43.7988
Hunter Lab	51.3902	-1.9960	-44.0899
OKLCH	64.1%	0.131	251.4°

#4A90D9 is 74 red, 144 green and 217 blue. Its blue channel carries the most of it. The nearest of the 216 web safe colors is #3399CC.

CIE-Lab, XYZ and Yxy are measured against D65, the white point sRGB itself is defined against. Hunter Lab uses the original illuminant C constants, which is what paint and plastics specifications quote, so the two Lab rows are not directly comparable. CMYK is the plain arithmetic conversion: real ink values depend on the press, the paper and the profile.

Base numbers
Base	Red	Green	Blue
Binary	01001010	10010000	11011001
Octal	112	220	331
Decimal	74	144	217
Hex	4A	90	D9

#4a90d9 mixed with black

Ten even steps of the classic shade ramp, worked out in RGB, which is how the term has always been defined and how other references list it. The OKLCH scale further down this page answers a different question: it steps by equal perceived amounts, so its values are not the same.

#4A90D9
#4281C3
#3B73AD
#336497
#2C5682
#25486C
#1D3956
#162B41
#0E1C2B
#070E15
#000000

#4a90d9 mixed with white

The tint ramp, by the same rule in the other direction.

#4A90D9
#5C9BDC
#6EA6E0
#80B1E4
#92BCE8
#A4C7EC
#B6D2EF
#C8DDF3
#DAE8F7
#ECF3FB
#FFFFFF

Channel shares

Red17.0%
Green33.1%
Blue49.9%

Color schemes

Turned in OKLCH rather than HSL, so every member keeps the lightness and chroma of the original instead of one of them arriving washed out.

Complementary

#4A90D9
#BD7D18

Triadic

#4A90D9
#CF6778
#6F9C42

Analogous

#4A90D9
#8081DA
#009CBF

Monochromatic

#002A50
#004985
#236BB1
#4A90D9
#72B6FF
#BBDBFF
#F4F9FF

#4a90d9 on black and on white

The quick brown fox jumps over the lazy dog. 6.28:1

The quick brown fox jumps over the lazy dog. 3.34:1

Body text needs 4.5:1 to meet AA and large text needs 3:1, so a ratio tells you which of the two backgrounds this color can be read on, and at what size.

CSS for #4a90d9

color: #4a90d9;
background-color: #4a90d9;
border: 3px solid #4a90d9;
box-shadow: 1px 1px 3px 2px #4a90d9;
text-shadow: 4px 4px 2px rgba(74, 144, 217, 0.8);

/* Perceptually even, and what a modern stylesheet wants */
color: oklch(64.1% 0.131 251.4);

The OKLCH form is the same color stated so that lightening or darkening it moves by an amount the eye agrees with. Every current browser understands 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.

#B9DBCA

#69958F

#618B94

#698A9F

#D7988D

#FFAD90

#57C2E3

#56A3CD

#DCB0CA

#CC9D6B

#405F4F

#83ABE6

#151C26

#182D47

#243E61

#3D5169

#34BDF5

#E07EA6

#ACB200

#3D93D8

#967535

#544A29

#896335

#557EB1

#CAB4A1

#8E7B59

#65979F

#8386AD

#DAE7FF

#B8D1F2

#A6B9D5

#7FA4D5

#F0A358

#CE9A43

#5BA3CC

#63A3DC

#00B0BB

#9AD0E6

#97B5D3

#7E96D1

#CDE5ED

#B9CFDB

#9CCBF2

#B6CBEB

#BFDCE6

#BED5E8

#CED7E9

#CDCAE2

#D3CDE2

#DAD4E9

#DFDBF2

#E7E1FD

#79C5F3

#9EC1E6

#314B8E

#979DFF

#FF9FBB

#F3A400

#28DEBB

#8895E4

#6EACBA

#869CA9

#90ABCF

#6F74A1

#FF9172

#8FF6CA

#A2BAFF

#FF975C

#B4E2B0

#B0D0FB

#FFD5CD

#ABE3CD

#A1CEDA

#7F99AD

#C3D3F7

#D7D3EE

#859FD6

#D1C7F7

#9E8CA8

#AD8A9E

#8EC7DA

#9ABCDA

#A7B4D4

#9A8CD0

#F7A669

#67C692

#74CBFF

#DD9BFD

#FFD6DD

#AFC693

#8AC2F2

#FAA3A4

#B48755

#B68E3C

#00AEC0

#625EA1