命名颜色 · #C2E7E8
On Cloud Nine
On Cloud Nine 即 #C2E7E8：rgb(194 231 232)、hsl(182 45% 84%)、oklch(0.902 0.039 198.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · On Cloud Nine color name →
#C2E7E8
oklch(0.902 0.039 198.5)
颜色转换
- HEX
- #c2e7e8
- RGB
- rgb(194 231 232)
- HSL
- hsl(182 45% 84%)
- HWB
- hwb(182 76% 9%)
- OKLCH
- oklch(0.902 0.039 198.5)
- OKLab
- oklab(0.902 -0.037 -0.012)
- CIE Lab
- lab(89.01 -12.32 -4.73)
- LCH
- lch(89.01 13.2 201)
- CMYK
- cmyk(16% 0% 0% 9%)
浅色调 · 深色调 · 灰色调
浅色调
- C8E9EA
- CEECED
- D5EEEF
- DBF1F1
- E1F3F3
- E7F5F6
- EDF8F8
- F3FAFA
- F9FDFD
深色调
- A8C9CA
- 8FABAC
- 778F90
- 607374
- 495959
- 344040
- 202829
- 0E1313
- 020303
灰色调
- BBDCDD
- B5D2D2
- AEC7C8
- A7BDBD
- A1B2B3
- 9AA8A8
- 949E9E
- 8D9494
- 878A8A
配色和谐
互补色 +180°
- C2E7E8
On Cloud Nine
- F7D5D5
≈ Ballet
类似色 -30° +30°
- C2E7E8
On Cloud Nine
- C7E7DA
≈ Mint Whisper
- C5E4F3
≈ Icy Landscape
三角配色 +120° +240°
- C2E7E8
On Cloud Nine
- EAD7EF
≈ Pouty Purple
- EDDCC3
≈ Navajo
分裂互补色 +150° +210°
- C2E7E8
On Cloud Nine
- F3D5E3
≈ Hopeful
- F5D8C9
≈ Angelic Pink
四角配色 +90° +180° +270°
- C2E7E8
On Cloud Nine
- DDDBF7
≈ Nostalgia Perfume
- F7D5D5
≈ Ballet
- E0E1C4
≈ Lilylock
对比度与无障碍
Ag
Fail白底
WCAG 1.32:1 · APCA Lc 16
Ag
AAA黑底
WCAG 15.88:1 · APCA Lc 88
最佳文字颜色: #000000
WCAG 15.88:1 (AAA) · APCA Lc 88
Contrast pairs
代码片段
CSS
:root {
--on-cloud-nine: #c2e7e8;
--on-cloud-nine-rgb: 194 231 232;
--on-cloud-nine-oklch: oklch(0.902 0.039 198.5);
}
.element {
color: var(--on-cloud-nine);
background-color: hsl(182 45% 84%);
border-color: oklch(0.902 0.039 198.5);
}Tailwind CSS v4
@theme {
--color-on-cloud-nine: #c2e7e8;
--color-on-cloud-nine-50: #e9f9f9;
--color-on-cloud-nine-100: #daeced;
--color-on-cloud-nine-200: #c2dadb;
--color-on-cloud-nine-300: #a1bebf;
--color-on-cloud-nine-400: #84a6a7;
--color-on-cloud-nine-500: #688e90;
--color-on-cloud-nine-600: #587879;
--color-on-cloud-nine-700: #466061;
--color-on-cloud-nine-800: #334747;
--color-on-cloud-nine-900: #223131;
--color-on-cloud-nine-950: #111d1d;
}SCSS
$on-cloud-nine: #c2e7e8;
$on-cloud-nine-rgb: 194, 231, 232;
$on-cloud-nine-light: mix(#fff, $on-cloud-nine, 20%);
$on-cloud-nine-dark: mix(#000, $on-cloud-nine, 20%);
.element {
color: $on-cloud-nine;
box-shadow: 0 0 0 2px rgba($on-cloud-nine, 0.35);
}