Blue colors
30 blue colors, sorted light to dark. The lightest is Powder Blue at 80 percent lightness, the darkest is Prussian Blue at 16 percent. Each one has hex, HSL, OKLCH and the contrast it gives against white and ink black.
| Color | Hex | HSL | OKLCH | On white | On ink |
|---|---|---|---|---|---|
| Powder Blue | #B0E0E6 | hsl(187, 52%, 80%) | oklch(87.51% 0.0502 205.73) | 1.43:1 | 13.35:1 |
| Light Blue | #ADD8E6 | hsl(195, 53%, 79%) | oklch(85.62% 0.0489 219.65) | 1.53:1 | 12.52:1 |
| Light Steel Blue | #B0C4DE | hsl(214, 41%, 78%) | oklch(81.36% 0.0428 255.03) | 1.78:1 | 10.75:1 |
| Light Sky Blue | #87CEFA | hsl(203, 92%, 75%) | oklch(82.06% 0.0945 236.75) | 1.72:1 | 11.15:1 |
| Sky Blue | #87CEEB | hsl(197, 71%, 73%) | oklch(81.48% 0.0819 225.75) | 1.74:1 | 10.99:1 |
| Maya Blue | #73C2FB | hsl(205, 94%, 72%) | oklch(78.54% 0.1129 241.53) | 1.94:1 | 9.88:1 |
| Cornflower Blue | #6495ED | hsl(219, 79%, 66%) | oklch(67.46% 0.1414 261.34) | 2.97:1 | 6.44:1 |
| Blue Gray | #6699CC | hsl(210, 50%, 60%) | oklch(66.76% 0.0939 249.39) | 3.00:1 | 6.37:1 |
| Royal Blue | #4169E1 | hsl(225, 73%, 57%) | oklch(55.98% 0.1882 266.40) | 4.85:1 | 3.95:1 |
| Carolina Blue | #4B9CD3 | hsl(204, 61%, 56%) | oklch(66.55% 0.1138 241.09) | 3.00:1 | 6.37:1 |
| Dodger Blue | #1E90FF | hsl(210, 100%, 56%) | oklch(65.20% 0.1901 253.21) | 3.24:1 | 5.91:1 |
| Cobalt | #2563EB | hsl(221, 83%, 53%) | oklch(54.61% 0.2152 262.88) | 5.17:1 | 3.70:1 |
| Air Force Blue | #5D8AA8 | hsl(204, 30%, 51%) | oklch(61.26% 0.0671 238.50) | 3.71:1 | 5.16:1 |
| Blue | #0000FF | hsl(240, 100%, 50%) | oklch(45.20% 0.3132 264.05) | 8.59:1 | 2.23:1 |
| Azure | #007FFF | hsl(210, 100%, 50%) | oklch(61.31% 0.2120 256.33) | 3.83:1 | 4.99:1 |
| Deep Sky Blue | #00BFFF | hsl(195, 100%, 50%) | oklch(75.54% 0.1534 231.64) | 2.12:1 | 9.02:1 |
| Steel Blue | #4682B4 | hsl(207, 44%, 49%) | oklch(58.80% 0.0993 245.74) | 4.11:1 | 4.66:1 |
| Cyan Blue | #00B7EB | hsl(193, 100%, 46%) | oklch(72.71% 0.1408 227.27) | 2.34:1 | 8.18:1 |
| Cerulean Blue | #2A52BE | hsl(224, 64%, 45%) | oklch(47.72% 0.1759 264.93) | 6.89:1 | 2.78:1 |
| Pacific Blue | #1CA9C9 | hsl(191, 76%, 45%) | oklch(68.03% 0.1178 218.59) | 2.77:1 | 6.90:1 |
| Denim | #1560BD | hsl(213, 80%, 41%) | oklch(50.01% 0.1623 256.92) | 6.10:1 | 3.13:1 |
| Medium Blue | #0000CD | hsl(240, 100%, 40%) | oklch(38.35% 0.2657 264.05) | 11.16:1 | 1.71:1 |
| Sapphire | #0F52BA | hsl(216, 85%, 39%) | oklch(46.65% 0.1763 260.01) | 7.15:1 | 2.68:1 |
| Blue Munsell | #0D98BA | hsl(192, 87%, 39%) | oklch(63.03% 0.1140 221.56) | 3.38:1 | 5.67:1 |
| Cobalt Blue | #0047AB | hsl(215, 100%, 34%) | oklch(42.84% 0.1720 259.70) | 8.44:1 | 2.27:1 |
| Yale Blue | #004F98 | hsl(209, 100%, 30%) | oklch(43.06% 0.1366 253.89) | 8.17:1 | 2.34:1 |
| Dark Blue | #00008B | hsl(240, 100%, 27%) | oklch(28.78% 0.1994 264.05) | 15.30:1 | 1.25:1 |
| Midnight Blue | #191970 | hsl(240, 64%, 27%) | oklch(28.81% 0.1436 272.76) | 14.85:1 | 1.29:1 |
| Navy | #000080 | hsl(240, 100%, 25%) | oklch(27.11% 0.1879 264.05) | 16.01:1 | 1.20:1 |
| Prussian Blue | #003153 | hsl(205, 100%, 16%) | oklch(30.35% 0.0779 245.92) | 13.43:1 | 1.43:1 |
Where blue sits on the wheel
In HSL terms this family covers roughly 195 to 260 degrees. Blue is the largest family in this library and the default primary color of most interfaces. It is also the family where sRGB and human vision disagree most: equal steps in HSL lightness across blues do not look like equal steps, which is exactly the problem OKLCH was designed to solve.
Working with blue in an interface
Blues are the reliable choice for links and primary actions, and mid to dark blues are among the few saturated colors that clear AA for normal text on white. Build a blue ramp in OKLCH rather than HSL if you want the steps to look evenly spaced.
In this set, 13 of 30 blue colors clear WCAG AA for normal text on a white background, and 17 of 30 clear it as text on ink black. The most saturated is Blue at an OKLCH chroma of 0.313, the most muted is Light Steel Blue at 0.043. If you are building a ramp, those two are the practical edges of what this family gives you.
The mistake to avoid
Very saturated blues on black or on very dark surfaces read as blurred at small text sizes even when the measured contrast passes. Contrast ratio does not model that effect, so trust your eyes as well as the number here.
Check any pair you are unsure about in the contrast checker, or open the contrast matrix to see which library colors pair safely with each other.
Other families
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.