命名颜色 · #C5E5DD
Touch of Frost
Touch of Frost 即 #C5E5DD：rgb(197 229 221)、hsl(165 38% 84%)、oklch(0.896 0.035 178.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Touch of Frost color name →
#C5E5DD
oklch(0.896 0.035 178.7)
颜色转换
- HEX
- #c5e5dd
- RGB
- rgb(197 229 221)
- HSL
- hsl(165 38% 84%)
- HWB
- hwb(165 77% 10%)
- OKLCH
- oklch(0.896 0.035 178.7)
- OKLab
- oklab(0.896 -0.035 0.001)
- CIE Lab
- lab(88.44 -12.05 0.2)
- LCH
- lch(88.44 12.05 179.1)
- CMYK
- cmyk(14% 0% 3% 10%)
浅色调 · 深色调 · 灰色调
浅色调
- CBE8E0
- D1EAE4
- D7EDE7
- DCEFEA
- E2F2EE
- E8F5F1
- EEF7F5
- F3FAF8
- F9FCFC
深色调
- ABC7C0
- 92AAA4
- 798E88
- 61726E
- 4B5855
- 353F3D
- 212826
- 0E1211
- 020302
灰色调
- BEDAD3
- B7D0CA
- B0C6C0
- A9BBB7
- A2B1AD
- 9BA7A4
- 949D9B
- 8E9392
- 878A89
配色和谐
互补色 +180°
- C5E5DD
Touch of Frost
- F2D4DC
≈ Priscilla
类似色 -30° +30°
- C5E5DD
Touch of Frost
- CEE4D0
≈ Lime Flip
- C3E4E9
≈ Touched by the Sea
三角配色 +120° +240°
- C5E5DD
Touch of Frost
- DFD8F2
≈ Lavender Sky
- EFD8C6
≈ Hen of the Woods
分裂互补色 +150° +210°
- C5E5DD
Touch of Frost
- EBD5E9
≈ First Lilac
- F4D5D0
≈ French Bustle
四角配色 +90° +180° +270°
- C5E5DD
Touch of Frost
- D3DDF5
≈ Puffy Cloud
- F2D4DC
≈ Priscilla
- E6DCC3
≈ Natural Radiance
对比度与无障碍
Ag
Fail白底
WCAG 1.34:1 · APCA Lc 17
Ag
AAA黑底
WCAG 15.62:1 · APCA Lc 87
最佳文字颜色: #000000
WCAG 15.62:1 (AAA) · APCA Lc 87
Contrast pairs
代码片段
CSS
:root {
--touch-of-frost: #c5e5dd;
--touch-of-frost-rgb: 197 229 221;
--touch-of-frost-oklch: oklch(0.896 0.035 178.7);
}
.element {
color: var(--touch-of-frost);
background-color: hsl(165 38% 84%);
border-color: oklch(0.896 0.035 178.7);
}Tailwind CSS v4
@theme {
--color-touch-of-frost: #c5e5dd;
--color-touch-of-frost-50: #ebf9f5;
--color-touch-of-frost-100: #dcece8;
--color-touch-of-frost-200: #c5d9d5;
--color-touch-of-frost-300: #a5beb8;
--color-touch-of-frost-400: #89a69f;
--color-touch-of-frost-500: #6d8e86;
--color-touch-of-frost-600: #5d7872;
--color-touch-of-frost-700: #4a605b;
--color-touch-of-frost-800: #364742;
--color-touch-of-frost-900: #25312e;
--color-touch-of-frost-950: #131d1a;
}SCSS
$touch-of-frost: #c5e5dd;
$touch-of-frost-rgb: 197, 229, 221;
$touch-of-frost-light: mix(#fff, $touch-of-frost, 20%);
$touch-of-frost-dark: mix(#000, $touch-of-frost, 20%);
.element {
color: $touch-of-frost;
box-shadow: 0 0 0 2px rgba($touch-of-frost, 0.35);
}