Nearest named color · #0C4CA8
#0C4CA8
Nearest named color: Le Grand Bleu
#0C4CA8 (rgb(12 76 168), hsl(215 87% 35%), oklch(0.438 0.16 259.2)) is closest to the named color Le Grand Bleu. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#0C4CA8
oklch(0.438 0.16 259.2)
Color conversions
- HEX
- #0c4ca8
- RGB
- rgb(12 76 168)
- HSL
- hsl(215 87% 35%)
- HWB
- hwb(215 5% 34%)
- OKLCH
- oklch(0.438 0.16 259.2)
- OKLab
- oklab(0.438 -0.03 -0.157)
- CIE Lab
- lab(33.21 10.8 -55.75)
- LCH
- lch(33.21 56.79 281)
- CMYK
- cmyk(93% 55% 0% 34%)
Tints · Shades · Tones
Tints
- 295FB2
- 4171BC
- 5882C5
- 6F94CE
- 86A6D7
- 9EB7DF
- B6C9E8
- CEDBF0
- E6EDF7
Shades
- 094192
- 06367C
- 042C67
- 032252
- 02183F
- 010F2C
- 00061A
- 00020A
- 000001
Tones
- 1D53A5
- 2B59A2
- 365F9E
- 42649B
- 4C6997
- 576E93
- 61738E
- 6C778A
- 767C85
Color harmonies
Complementary +180°
- 0C4CA8
Le Grand Bleu
- 6C4B00
≈ Antique Bronze
Analogous -30° +30°
- 0C4CA8
Le Grand Bleu
- 005A78
≈ Ink Blue
- 533AA2
≈ Royalty
Triadic +120° +240°
- 0C4CA8
Le Grand Bleu
- 96172C
≈ Bacchic Burgundy
- 1F6300
≈ Keen Green
Split-complementary +150° +210°
- 0C4CA8
Le Grand Bleu
- 833900
≈ Coffee Addiction
- 565600
≈ Douro
Tetradic +90° +180° +270°
- 0C4CA8
Le Grand Bleu
- 8C1C5F
≈ Violettuce
- 6C4B00
≈ Antique Bronze
- 00614A
≈ Sci-Fi Takeout
Contrast & accessibility
Ag
AAAOn white
WCAG 8.03:1 · APCA Lc 87
Ag
FailOn black
WCAG 2.61:1 · APCA Lc 15
Best text color: #FFFFFF
WCAG 8.03:1 (AAA) · APCA Lc 87
Contrast pairs
Code snippets
CSS
:root {
--le-grand-bleu: #0c4ca8;
--le-grand-bleu-rgb: 12 76 168;
--le-grand-bleu-oklch: oklch(0.438 0.16 259.2);
}
.element {
color: var(--le-grand-bleu);
background-color: hsl(215 87% 35%);
border-color: oklch(0.438 0.16 259.2);
}Tailwind CSS v4
@theme {
--color-le-grand-bleu: #0c4ca8;
--color-le-grand-bleu-50: #dcf6ff;
--color-le-grand-bleu-100: #cae9ff;
--color-le-grand-bleu-200: #aed5ff;
--color-le-grand-bleu-300: #89b7ff;
--color-le-grand-bleu-400: #629efc;
--color-le-grand-bleu-500: #3e83ee;
--color-le-grand-bleu-600: #366fc9;
--color-le-grand-bleu-700: #2a59a1;
--color-le-grand-bleu-800: #194178;
--color-le-grand-bleu-900: #102d55;
--color-le-grand-bleu-950: #031a39;
}SCSS
$le-grand-bleu: #0c4ca8;
$le-grand-bleu-rgb: 12, 76, 168;
$le-grand-bleu-light: mix(#fff, $le-grand-bleu, 20%);
$le-grand-bleu-dark: mix(#000, $le-grand-bleu, 20%);
.element {
color: $le-grand-bleu;
box-shadow: 0 0 0 2px rgba($le-grand-bleu, 0.35);
}