命名颜色 · #C1E8EA
Light Opale
Light Opale 即 #C1E8EA:rgb(193 232 234)、hsl(183 49% 84%)、oklch(0.904 0.041 200.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度,以及 CSS、Tailwind v4 和 SCSS 代码。
What does Cyan mean? → · Light Opale color name →
#C1E8EA
oklch(0.904 0.041 200.3)
颜色转换
- HEX
- #c1e8ea
- RGB
- rgb(193 232 234)
- HSL
- hsl(183 49% 84%)
- HWB
- hwb(183 76% 8%)
- OKLCH
- oklch(0.904 0.041 200.3)
- OKLab
- oklab(0.904 -0.038 -0.014)
- CIE Lab
- lab(89.25 -12.8 -5.42)
- LCH
- lch(89.25 13.91 203)
- CMYK
- cmyk(18% 1% 0% 8%)
浅色调 · 深色调 · 灰色调
浅色调
- C7EAEC
- CEEDEE
- D4EFF0
- DAF1F2
- E0F4F4
- E6F6F7
- EDF8F9
- F3FAFB
- F9FDFD
深色调
- A7CACB
- 8FACAE
- 779091
- 5F7475
- 49595A
- 344041
- 202929
- 0E1313
- 020303
灰色调
- BADDDF
- B4D2D4
- ADC8C9
- A7BDBE
- A0B3B4
- 9AA8A9
- 939E9F
- 8D9494
- 868A8A
配色和谐
互补色 +180°
- C1E8EA
Light Opale
- F9D5D4
≈ Ballet
类似色 -30° +30°
- C1E8EA
Light Opale
- C6E9DB
≈ Mint Tulip
- C5E5F6
≈ Icy Landscape
三角配色 +120° +240°
- C1E8EA
Light Opale
- ECD7F0
≈ Scented Spring
- EEDDC2
≈ Napery
分裂互补色 +150° +210°
- C1E8EA
Light Opale
- F6D5E3
≈ Pink Frosting
- F7D8C8
≈ Peach Sachet
四角配色 +90° +180° +270°
- C1E8EA
Light Opale
- DEDBF9
≈ Nostalgia Perfume
- F9D5D4
≈ Ballet
- E0E2C4
≈ Healing Springs
对比度与无障碍
Ag
Fail白底
WCAG 1.31:1 · APCA Lc 15
Ag
AAA黑底
WCAG 15.99:1 · APCA Lc 88
最佳文字颜色: #000000
WCAG 15.99:1 (AAA) · APCA Lc 88
Contrast pairs
代码片段
CSS
:root {
--light-opale: #c1e8ea;
--light-opale-rgb: 193 232 234;
--light-opale-oklch: oklch(0.904 0.041 200.3);
}
.element {
color: var(--light-opale);
background-color: hsl(183 49% 84%);
border-color: oklch(0.904 0.041 200.3);
}Tailwind CSS v4
@theme {
--color-light-opale: #c1e8ea;
--color-light-opale-50: #e9f9fa;
--color-light-opale-100: #d9ecee;
--color-light-opale-200: #c1dadc;
--color-light-opale-300: #a0bec0;
--color-light-opale-400: #83a6a8;
--color-light-opale-500: #668f91;
--color-light-opale-600: #57797b;
--color-light-opale-700: #456162;
--color-light-opale-800: #324747;
--color-light-opale-900: #223131;
--color-light-opale-950: #111d1d;
}SCSS
$light-opale: #c1e8ea;
$light-opale-rgb: 193, 232, 234;
$light-opale-light: mix(#fff, $light-opale, 20%);
$light-opale-dark: mix(#000, $light-opale, 20%);
.element {
color: $light-opale;
box-shadow: 0 0 0 2px rgba($light-opale, 0.35);
}