命名颜色 · #C4FFF7
Crushed Ice
Crushed Ice 即 #C4FFF7：rgb(196 255 247)、hsl(172 100% 88%)、oklch(0.958 0.06 186)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Crushed Ice color name →
#C4FFF7
oklch(0.958 0.06 186)
颜色转换
- HEX
- #c4fff7
- RGB
- rgb(196 255 247)
- HSL
- hsl(172 100% 88%)
- HWB
- hwb(172 77% 0%)
- OKLCH
- oklch(0.958 0.06 186)
- OKLab
- oklab(0.958 -0.06 -0.006)
- CIE Lab
- lab(95.83 -20.4 -2.54)
- LCH
- lch(95.83 20.56 187.1)
- CMYK
- cmyk(23% 0% 3% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- CAFFF8
- D1FFF9
- D7FFF9
- DDFFFA
- E3FFFB
- E8FFFC
- EEFFFD
- F4FFFD
- F9FFFE
深色调
- AADED7
- 91BEB7
- 789E99
- 61807C
- 4A6360
- 354845
- 212E2C
- 0E1615
- 020303
灰色调
- BDF2EA
- B7E4DE
- B0D7D2
- A9CAC6
- A2BEBA
- 9CB1AE
- 95A5A2
- 8E9897
- 878C8B
配色和谐
互补色 +180°
- C4FFF7
Crushed Ice
- FFEBEF
≈ Just Pink Enough
类似色 -30° +30°
- C4FFF7
Crushed Ice
- D2FEE0
≈ Mint Zest
- DAF7FF
≈ Glacial Day
三角配色 +120° +240°
- C4FFF7
Crushed Ice
- F5EDFF
≈ Placebo Fuchsia
- FFEEDE
≈ Enokitake Mushroom
分裂互补色 +150° +210°
- C4FFF7
Crushed Ice
- FFEAF9
≈ Strawberry Bonbon
- FFEDE7
≈ Peach Breeze
四角配色 +90° +180° +270°
- C4FFF7
Crushed Ice
- EDF0FF
≈ Carte Blanche
- FFEBEF
≈ Just Pink Enough
- FDF2C4
≈ Pound Cake
对比度与无障碍
Ag
Fail白底
WCAG 1.10:1 · APCA Lc 0
Ag
AAA黑底
WCAG 18.99:1 · APCA Lc 100
最佳文字颜色: #000000
WCAG 18.99:1 (AAA) · APCA Lc 100
Contrast pairs
代码片段
CSS
:root {
--crushed-ice: #c4fff7;
--crushed-ice-rgb: 196 255 247;
--crushed-ice-oklch: oklch(0.958 0.06 186);
}
.element {
color: var(--crushed-ice);
background-color: hsl(172 100% 88%);
border-color: oklch(0.958 0.06 186);
}Tailwind CSS v4
@theme {
--color-crushed-ice: #c4fff7;
--color-crushed-ice-50: #e3fbf8;
--color-crushed-ice-100: #d2efeb;
--color-crushed-ice-200: #b8ddd9;
--color-crushed-ice-300: #95c2bd;
--color-crushed-ice-400: #75aaa4;
--color-crushed-ice-500: #55938c;
--color-crushed-ice-600: #487d76;
--color-crushed-ice-700: #3a645f;
--color-crushed-ice-800: #294945;
--color-crushed-ice-900: #1c332f;
--color-crushed-ice-950: #0c1e1c;
}SCSS
$crushed-ice: #c4fff7;
$crushed-ice-rgb: 196, 255, 247;
$crushed-ice-light: mix(#fff, $crushed-ice, 20%);
$crushed-ice-dark: mix(#000, $crushed-ice, 20%);
.element {
color: $crushed-ice;
box-shadow: 0 0 0 2px rgba($crushed-ice, 0.35);
}