Named color · #3F4C5A
Cavalry
Cavalry is #3F4C5A: rgb(63 76 90), hsl(211 18% 30%), oklch(0.411 0.029 250.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Cavalry color name →
#3F4C5A
oklch(0.411 0.029 250.4)
Color conversions
- HEX
- #3f4c5a
- RGB
- rgb(63 76 90)
- HSL
- hsl(211 18% 30%)
- HWB
- hwb(211 25% 65%)
- OKLCH
- oklch(0.411 0.029 250.4)
- OKLab
- oklab(0.411 -0.01 -0.027)
- CIE Lab
- lab(31.59 -2.56 -10.1)
- LCH
- lch(31.59 10.42 255.8)
- CMYK
- cmyk(30% 16% 0% 65%)
Tints · Shades · Tones
Tints
- 505C69
- 626D79
- 747E88
- 868F99
- 9AA1A9
- ADB3BA
- C1C6CB
- D5D8DC
- EAECED
Shades
- 35414D
- 2C3641
- 232C35
- 1B2229
- 12181E
- 0A0F13
- 040609
- 010203
- 000000
Tones
- 45515E
- 4C5662
- 525B65
- 586069
- 5F666D
- 656B71
- 6C7075
- 737578
- 797B7C
Color harmonies
Complementary +180°
- 3F4C5A
Cavalry
- 55483A
≈ Kuri Black
Analogous -30° +30°
- 3F4C5A
Cavalry
- 394E56
≈ Aircraft Blue
- 47495A
≈ Black Flame
Triadic +120° +240°
- 3F4C5A
Cavalry
- 594447
≈ Huckleberry
- 454E3E
≈ Duffel Bag
Split-complementary +150° +210°
- 3F4C5A
Cavalry
- 59463F
≈ Mystic Taupe
- 4E4B39
≈ Sooty Willow Bamboo
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 8.77:1 · APCA Lc 90
Ag
FailOn black
WCAG 2.39:1 · APCA Lc 12
Best text color: #FFFFFF
WCAG 8.77:1 (AAA) · APCA Lc 90
Contrast pairs
Code snippets
CSS
:root {
--cavalry: #3f4c5a;
--cavalry-rgb: 63 76 90;
--cavalry-oklch: oklch(0.411 0.029 250.4);
}
.element {
color: var(--cavalry);
background-color: hsl(211 18% 30%);
border-color: oklch(0.411 0.029 250.4);
}Tailwind CSS v4
@theme {
--color-cavalry: #3f4c5a;
--color-cavalry-50: #eff6fd;
--color-cavalry-100: #e1e9f2;
--color-cavalry-200: #ccd5e1;
--color-cavalry-300: #adb9c6;
--color-cavalry-400: #92a0af;
--color-cavalry-500: #788899;
--color-cavalry-600: #667381;
--color-cavalry-700: #515c68;
--color-cavalry-800: #3b434c;
--color-cavalry-900: #282f35;
--color-cavalry-950: #161b20;
}SCSS
$cavalry: #3f4c5a;
$cavalry-rgb: 63, 76, 90;
$cavalry-light: mix(#fff, $cavalry, 20%);
$cavalry-dark: mix(#000, $cavalry, 20%);
.element {
color: $cavalry;
box-shadow: 0 0 0 2px rgba($cavalry, 0.35);
}