Named color · #9EB3DE
Myrtle Flower
Myrtle Flower is #9EB3DE: rgb(158 179 222), hsl(220 49% 75%), oklch(0.766 0.066 264.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Myrtle Flower color name →
#9EB3DE
oklch(0.766 0.066 264.5)
Color conversions
- HEX
- #9eb3de
- RGB
- rgb(158 179 222)
- HSL
- hsl(220 49% 75%)
- HWB
- hwb(220 62% 13%)
- OKLCH
- oklch(0.766 0.066 264.5)
- OKLab
- oklab(0.766 -0.006 -0.066)
- CIE Lab
- lab(72.46 -0.13 -24.29)
- LCH
- lch(72.46 24.29 269.7)
- CMYK
- cmyk(29% 19% 0% 13%)
Tints · Shades · Tones
Tints
- A7BBE2
- B1C2E5
- BACAE8
- C4D1EC
- CED9EF
- D7E0F2
- E1E8F6
- EBF0F9
- F5F7FC
Shades
- 899BC1
- 7484A5
- 606E89
- 4D586F
- 3A4355
- 292F3D
- 181D26
- 090C12
- 010102
Tones
- 9BAED4
- 98A9CB
- 95A4C1
- 929EB8
- 8F99AE
- 8C94A5
- 898F9C
- 868A92
- 838589
Color harmonies
Complementary +180°
- 9EB3DE
Myrtle Flower
- C7B083
≈ Desert Floor
Analogous -30° +30°
- 9EB3DE
Myrtle Flower
- 89BAD7
≈ Simply Posh
- B5ABD9
≈ Purple Hibiscus
Triadic +120° +240°
- 9EB3DE
Myrtle Flower
- DAA39E
≈ Passive Pink
- 9ABF99
≈ Spruce Stone
Split-complementary +150° +210°
- 9EB3DE
Myrtle Flower
- D5A88B
≈ Peachy Confection
- B1B888
≈ Lima Green
Tetradic +90° +180° +270°
- 9EB3DE
Myrtle Flower
- D6A2B5
≈ Gizmo
- C7B083
≈ Desert Floor
- 86C1B0
≈ Seaborn
Contrast & accessibility
Ag
FailOn white
WCAG 2.10:1 · APCA Lc 41
Ag
AAAOn black
WCAG 9.95:1 · APCA Lc 61
Best text color: #000000
WCAG 9.95:1 (AAA) · APCA Lc 61
Contrast pairs
Code snippets
CSS
:root {
--myrtle-flower: #9eb3de;
--myrtle-flower-rgb: 158 179 222;
--myrtle-flower-oklch: oklch(0.766 0.066 264.5);
}
.element {
color: var(--myrtle-flower);
background-color: hsl(220 49% 75%);
border-color: oklch(0.766 0.066 264.5);
}Tailwind CSS v4
@theme {
--color-myrtle-flower: #9eb3de;
--color-myrtle-flower-50: #ecf5ff;
--color-myrtle-flower-100: #dee8ff;
--color-myrtle-flower-200: #c7d4f2;
--color-myrtle-flower-300: #a8b7da;
--color-myrtle-flower-400: #8b9ec6;
--color-myrtle-flower-500: #7086b3;
--color-myrtle-flower-600: #5f7197;
--color-myrtle-flower-700: #4c5b79;
--color-myrtle-flower-800: #36425a;
--color-myrtle-flower-900: #252e3f;
--color-myrtle-flower-950: #131b28;
}SCSS
$myrtle-flower: #9eb3de;
$myrtle-flower-rgb: 158, 179, 222;
$myrtle-flower-light: mix(#fff, $myrtle-flower, 20%);
$myrtle-flower-dark: mix(#000, $myrtle-flower, 20%);
.element {
color: $myrtle-flower;
box-shadow: 0 0 0 2px rgba($myrtle-flower, 0.35);
}