Nearest named color · #5F72BD
#5F72BD
Nearest named color: Flood
#5F72BD (rgb(95 114 189), hsl(228 42% 56%), oklch(0.571 0.118 271.5)) is closest to the named color Flood. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#5F72BD
oklch(0.571 0.118 271.5)
Color conversions
- HEX
- #5f72bd
- RGB
- rgb(95 114 189)
- HSL
- hsl(228 42% 56%)
- HWB
- hwb(228 37% 26%)
- OKLCH
- oklch(0.571 0.118 271.5)
- OKLab
- oklab(0.571 0.003 -0.118)
- CIE Lab
- lab(49.12 8.98 -42.35)
- LCH
- lch(49.12 43.29 282)
- CMYK
- cmyk(50% 40% 0% 26%)
Tints · Shades · Tones
Tints
- 6D80C4
- 7C8ECB
- 8C9CD2
- 9BAAD9
- ABB8E0
- BBC6E6
- CCD4ED
- DDE2F3
- EEF1F9
Shades
- 5262A4
- 44538C
- 384474
- 2C365D
- 202847
- 151B33
- 0A0E1F
- 03040D
- 000102
Tones
- 6274B7
- 6576B1
- 6977AC
- 6C79A6
- 6F7AA0
- 727C9A
- 767D93
- 797E8D
- 7D7F87
Color harmonies
Complementary +180°
- 5F72BD
Flood
- 917400
≈ Vermin Brown
Analogous -30° +30°
- 5F72BD
Flood
- 267FB7
≈ Tall Ships
- 8465B2
≈ Lavish Spending
Triadic +120° +240°
- 5F72BD
Flood
- B25A4B
≈ Ant Red
- 388B53
≈ Shamrock Field
Split-complementary +150° +210°
- 5F72BD
Flood
- A96520
≈ Sattle
- 6D8227
≈ Pacifika
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 4.53:1 · APCA Lc 71
Ag
AAOn black
WCAG 4.62:1 · APCA Lc 30
Best text color: #000000
WCAG 4.62:1 (AA) · APCA Lc 30
Contrast pairs
Code snippets
CSS
:root {
--flood: #5f72bd;
--flood-rgb: 95 114 189;
--flood-oklch: oklch(0.571 0.118 271.5);
}
.element {
color: var(--flood);
background-color: hsl(228 42% 56%);
border-color: oklch(0.571 0.118 271.5);
}Tailwind CSS v4
@theme {
--color-flood: #5f72bd;
--color-flood-50: #eaf4ff;
--color-flood-100: #dbe6ff;
--color-flood-200: #c4d1ff;
--color-flood-300: #a4b3f4;
--color-flood-400: #859ae4;
--color-flood-500: #6a80d4;
--color-flood-600: #5a6cb3;
--color-flood-700: #485790;
--color-flood-800: #32406b;
--color-flood-900: #222c4b;
--color-flood-950: #111932;
}SCSS
$flood: #5f72bd;
$flood-rgb: 95, 114, 189;
$flood-light: mix(#fff, $flood, 20%);
$flood-dark: mix(#000, $flood, 20%);
.element {
color: $flood;
box-shadow: 0 0 0 2px rgba($flood, 0.35);
}