命名颜色 · #9EB3DE
Myrtle Flower
Myrtle Flower 即 #9EB3DE：rgb(158 179 222)、hsl(220 49% 75%)、oklch(0.766 0.066 264.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Blue mean? → · Myrtle Flower color name →
#9EB3DE
oklch(0.766 0.066 264.5)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- A7BBE2
- B1C2E5
- BACAE8
- C4D1EC
- CED9EF
- D7E0F2
- E1E8F6
- EBF0F9
- F5F7FC
深色调
- 899BC1
- 7484A5
- 606E89
- 4D586F
- 3A4355
- 292F3D
- 181D26
- 090C12
- 010102
灰色调
- 9BAED4
- 98A9CB
- 95A4C1
- 929EB8
- 8F99AE
- 8C94A5
- 898F9C
- 868A92
- 838589
配色和谐
互补色 +180°
- 9EB3DE
Myrtle Flower
- C7B083
≈ Desert Floor
类似色 -30° +30°
- 9EB3DE
Myrtle Flower
- 89BAD7
≈ Simply Posh
- B5ABD9
≈ Purple Hibiscus
三角配色 +120° +240°
- 9EB3DE
Myrtle Flower
- DAA39E
≈ Passive Pink
- 9ABF99
≈ Spruce Stone
分裂互补色 +150° +210°
- 9EB3DE
Myrtle Flower
- D5A88B
≈ Peachy Confection
- B1B888
≈ Lima Green
四角配色 +90° +180° +270°
- 9EB3DE
Myrtle Flower
- D6A2B5
≈ Gizmo
- C7B083
≈ Desert Floor
- 86C1B0
≈ Seaborn
对比度与无障碍
Ag
Fail白底
WCAG 2.10:1 · APCA Lc 41
Ag
AAA黑底
WCAG 9.95:1 · APCA Lc 61
最佳文字颜色: #000000
WCAG 9.95:1 (AAA) · APCA Lc 61
Contrast pairs
代码片段
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);
}