Named color · #334159
Passionate Blueberry
Passionate Blueberry is #334159: rgb(51 65 89), hsl(218 27% 27%), oklch(0.374 0.045 261). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Passionate Blueberry color name →
#334159
oklch(0.374 0.045 261)
Color conversions
- HEX
- #334159
- RGB
- rgb(51 65 89)
- HSL
- hsl(218 27% 27%)
- HWB
- hwb(218 20% 65%)
- OKLCH
- oklch(0.374 0.045 261)
- OKLab
- oklab(0.374 -0.007 -0.045)
- CIE Lab
- lab(27.11 -0.5 -16.37)
- LCH
- lch(27.11 16.38 268.3)
- CMYK
- cmyk(43% 27% 0% 65%)
Tints · Shades · Tones
Tints
- 455268
- 576378
- 6B7688
- 7E8898
- 939BA9
- A7AEBA
- BDC2CB
- D2D6DC
- E8EAED
Shades
- 2B374C
- 232E40
- 1C2534
- 141C28
- 0D131D
- 070B13
- 030509
- 010103
- 000000
Tones
- 3A475D
- 424D61
- 495365
- 515A69
- 58606D
- 606671
- 686D74
- 707378
- 78797C
Color harmonies
Complementary +180°
- 334159
Passionate Blueberry
- 4D3E24
≈ Avocado Stone
Analogous -30° +30°
- 334159
Passionate Blueberry
- 264554
≈ Rainstorm
- 413D57
≈ Purple Velvet
Triadic +120° +240°
- 334159
Passionate Blueberry
- 563736
≈ Blood Mahogany
- 334730
≈ Palm Leaf
Split-complementary +150° +210°
- 334159
Passionate Blueberry
- 543A2A
≈ Bonanza
- 424326
≈ Strong Tone Wash
Tetradic +90° +180° +270°
- 334159
Passionate Blueberry
- 533744
≈ Ritual Experience
- 4D3E24
≈ Avocado Stone
- 26493D
≈ Te Papa Green
Contrast & accessibility
Ag
AAAOn white
WCAG 10.28:1 · APCA Lc 94
Ag
FailOn black
WCAG 2.04:1 · APCA Lc 9
Best text color: #FFFFFF
WCAG 10.28:1 (AAA) · APCA Lc 94
Contrast pairs
Code snippets
CSS
:root {
--passionate-blueberry: #334159;
--passionate-blueberry-rgb: 51 65 89;
--passionate-blueberry-oklch: oklch(0.374 0.045 261);
}
.element {
color: var(--passionate-blueberry);
background-color: hsl(218 27% 27%);
border-color: oklch(0.374 0.045 261);
}Tailwind CSS v4
@theme {
--color-passionate-blueberry: #334159;
--color-passionate-blueberry-50: #eef5ff;
--color-passionate-blueberry-100: #e0e8f8;
--color-passionate-blueberry-200: #cad5e8;
--color-passionate-blueberry-300: #abb8cf;
--color-passionate-blueberry-400: #8f9fba;
--color-passionate-blueberry-500: #7587a5;
--color-passionate-blueberry-600: #63728b;
--color-passionate-blueberry-700: #4f5b70;
--color-passionate-blueberry-800: #394352;
--color-passionate-blueberry-900: #272e39;
--color-passionate-blueberry-950: #151b24;
}SCSS
$passionate-blueberry: #334159;
$passionate-blueberry-rgb: 51, 65, 89;
$passionate-blueberry-light: mix(#fff, $passionate-blueberry, 20%);
$passionate-blueberry-dark: mix(#000, $passionate-blueberry, 20%);
.element {
color: $passionate-blueberry;
box-shadow: 0 0 0 2px rgba($passionate-blueberry, 0.35);
}