Nearest named color · #3B6CA7
#3B6CA7
Nearest named color: Queen Blue
#3B6CA7 (rgb(59 108 167), hsl(213 48% 44%), oklch(0.525 0.108 254.2)) is closest to the named color Queen Blue. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#3B6CA7
oklch(0.525 0.108 254.2)
Color conversions
- HEX
- #3b6ca7
- RGB
- rgb(59 108 167)
- HSL
- hsl(213 48% 44%)
- HWB
- hwb(213 23% 35%)
- OKLCH
- oklch(0.525 0.108 254.2)
- OKLab
- oklab(0.525 -0.029 -0.104)
- CIE Lab
- lab(44.33 -2.27 -37.31)
- LCH
- lch(44.33 37.38 266.5)
- CMYK
- cmyk(65% 35% 0% 35%)
Tints · Shades · Tones
Tints
- 4E7AB0
- 6189B9
- 7497C2
- 87A6CB
- 9BB4D4
- AEC3DD
- C2D2E6
- D6E1EE
- EAF0F7
Shades
- 325D91
- 294E7B
- 214066
- 193252
- 11253E
- 09192C
- 040D1A
- 01040A
- 000001
Tones
- 436EA3
- 4A71A0
- 52739C
- 597599
- 5F7795
- 667991
- 6D7B8D
- 737D89
- 7A7E84
Color harmonies
Complementary +180°
- 3B6CA7
Queen Blue
- 8F5F0A
≈ Rat Brown
Analogous -30° +30°
- 3B6CA7
Queen Blue
- 007694
≈ Blue Luxury
- 6460A6
≈ Blue Iris
Triadic +120° +240°
- 3B6CA7
Queen Blue
- 9F4D57
≈ Black Pudding
- 4F7833
≈ Luscious Lemongrass
Split-complementary +150° +210°
- 3B6CA7
Queen Blue
- 9D5432
≈ Piper
- 756D0A
≈ Brown Green
Tetradic +90° +180° +270°
- 3B6CA7
Queen Blue
- 954F79
≈ Sugar Plum
- 8F5F0A
≈ Rat Brown
- 0E7D5A
≈ Sharp Green
Contrast & accessibility
Ag
AAOn white
WCAG 5.39:1 · APCA Lc 77
Ag
FailOn black
WCAG 3.88:1 · APCA Lc 25
Best text color: #FFFFFF
WCAG 5.39:1 (AA) · APCA Lc 77
Contrast pairs
Code snippets
CSS
:root {
--queen-blue: #3b6ca7;
--queen-blue-rgb: 59 108 167;
--queen-blue-oklch: oklch(0.525 0.108 254.2);
}
.element {
color: var(--queen-blue);
background-color: hsl(213 48% 44%);
border-color: oklch(0.525 0.108 254.2);
}Tailwind CSS v4
@theme {
--color-queen-blue: #3b6ca7;
--color-queen-blue-50: #e2f7ff;
--color-queen-blue-100: #d1eaff;
--color-queen-blue-200: #b7d7ff;
--color-queen-blue-300: #93baee;
--color-queen-blue-400: #71a1dd;
--color-queen-blue-500: #5188cc;
--color-queen-blue-600: #4574ac;
--color-queen-blue-700: #375c8a;
--color-queen-blue-800: #254467;
--color-queen-blue-900: #192f48;
--color-queen-blue-950: #091b2f;
}SCSS
$queen-blue: #3b6ca7;
$queen-blue-rgb: 59, 108, 167;
$queen-blue-light: mix(#fff, $queen-blue, 20%);
$queen-blue-dark: mix(#000, $queen-blue, 20%);
.element {
color: $queen-blue;
box-shadow: 0 0 0 2px rgba($queen-blue, 0.35);
}