Named color · #5786B4
Blue Smart
Blue Smart is #5786B4: rgb(87 134 180), hsl(210 38% 52%), oklch(0.606 0.087 248.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Blue Smart color name →
#5786B4
oklch(0.606 0.087 248.9)
Color conversions
- HEX
- #5786b4
- RGB
- rgb(87 134 180)
- HSL
- hsl(210 38% 52%)
- HWB
- hwb(210 34% 29%)
- OKLCH
- oklch(0.606 0.087 248.9)
- OKLab
- oklab(0.606 -0.031 -0.081)
- CIE Lab
- lab(54 -6.42 -29.63)
- LCH
- lch(54 30.32 257.8)
- CMYK
- cmyk(52% 26% 0% 29%)
Tints · Shades · Tones
Tints
- 6892BC
- 789EC3
- 88AACB
- 99B6D3
- AAC2DA
- BACEE2
- CBDAE9
- DCE6F0
- EEF3F8
Shades
- 4B749C
- 3E6285
- 33516E
- 274058
- 1C3044
- 122130
- 08131D
- 03060C
- 000102
Tones
- 5C86AF
- 6085AA
- 6585A5
- 6984A0
- 6D849A
- 718395
- 758290
- 79828B
- 7C8185
Color harmonies
Complementary +180°
- 5786B4
Blue Smart
- A47845
≈ Invitation Gold
Analogous -30° +30°
- 5786B4
Blue Smart
- 3A8EA5
≈ Winter Time
- 767CB6
≈ Astro Zinger
Triadic +120° +240°
- 5786B4
Blue Smart
- AF6B77
≈ Mauvewood
- 728C53
≈ Bright Forest
Split-complementary +150° +210°
- 5786B4
Blue Smart
- AF6F5A
≈ Clovedust
- 8F8341
≈ Galia Melon
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.83:1 · APCA Lc 66
Ag
AAOn black
WCAG 5.47:1 · APCA Lc 36
Best text color: #000000
WCAG 5.47:1 (AA) · APCA Lc 36
Contrast pairs
Code snippets
CSS
:root {
--blue-smart: #5786b4;
--blue-smart-rgb: 87 134 180;
--blue-smart-oklch: oklch(0.606 0.087 248.9);
}
.element {
color: var(--blue-smart);
background-color: hsl(210 38% 52%);
border-color: oklch(0.606 0.087 248.9);
}Tailwind CSS v4
@theme {
--color-blue-smart: #5786b4;
--color-blue-smart-50: #e3f8ff;
--color-blue-smart-100: #d3ebff;
--color-blue-smart-200: #b9d8f9;
--color-blue-smart-300: #97bbe3;
--color-blue-smart-400: #76a3d0;
--color-blue-smart-500: #568bbe;
--color-blue-smart-600: #4975a0;
--color-blue-smart-700: #3a5e80;
--color-blue-smart-800: #28455f;
--color-blue-smart-900: #1b3043;
--color-blue-smart-950: #0b1c2b;
}SCSS
$blue-smart: #5786b4;
$blue-smart-rgb: 87, 134, 180;
$blue-smart-light: mix(#fff, $blue-smart, 20%);
$blue-smart-dark: mix(#000, $blue-smart, 20%);
.element {
color: $blue-smart;
box-shadow: 0 0 0 2px rgba($blue-smart, 0.35);
}