命名颜色 · #D4E4E5
Waterfront
Waterfront 即 #D4E4E5：rgb(212 228 229)、hsl(184 25% 86%)、oklch(0.907 0.017 201.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Waterfront color name →
#D4E4E5
oklch(0.907 0.017 201.4)
颜色转换
- HEX
- #d4e4e5
- RGB
- rgb(212 228 229)
- HSL
- hsl(184 25% 86%)
- HWB
- hwb(184 83% 10%)
- OKLCH
- oklch(0.907 0.017 201.4)
- OKLab
- oklab(0.907 -0.016 -0.006)
- CIE Lab
- lab(89.4 -5.37 -2.42)
- LCH
- lch(89.4 5.89 204.2)
- CMYK
- cmyk(7% 0% 0% 10%)
浅色调 · 深色调 · 灰色调
浅色调
- D8E7E8
- DDE9EA
- E1ECED
- E5EFEF
- E9F1F2
- EEF4F5
- F2F7F7
- F6FAFA
- FBFCFC
深色调
- B8C6C7
- 9DA9AA
- 838D8E
- 697272
- 515858
- 3A3F3F
- 242828
- 101212
- 020303
灰色调
- CBDADA
- C3CFD0
- BAC5C6
- B2BBBB
- A9B1B1
- A1A7A7
- 989D9D
- 909393
- 888A8A
配色和谐
互补色 +180°
- D4E4E5
Waterfront
- ECDCDB
≈ Hyper Light Drifter
类似色 -30° +30°
- D4E4E5
Waterfront
- D6E4DF
≈ Cirrus Blue
- D6E3EA
≈ Ethereal Moonlight
三角配色 +120° +240°
- D4E4E5
Waterfront
- E6DDE7
≈ Orchid Lane
- E6DFD4
≈ White Coffee
分裂互补色 +150° +210°
- D4E4E5
Waterfront
- EADCE2
≈ Purple Emulsion
- EADDD6
≈ Wistful Beige
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.31:1 · APCA Lc 15
Ag
AAA黑底
WCAG 16.02:1 · APCA Lc 88
最佳文字颜色: #000000
WCAG 16.02:1 (AAA) · APCA Lc 88
Contrast pairs
代码片段
CSS
:root {
--waterfront: #d4e4e5;
--waterfront-rgb: 212 228 229;
--waterfront-oklch: oklch(0.907 0.017 201.4);
}
.element {
color: var(--waterfront);
background-color: hsl(184 25% 86%);
border-color: oklch(0.907 0.017 201.4);
}Tailwind CSS v4
@theme {
--color-waterfront: #d4e4e5;
--color-waterfront-50: #f0f7f7;
--color-waterfront-100: #e2eaea;
--color-waterfront-200: #ccd6d7;
--color-waterfront-300: #aebabb;
--color-waterfront-400: #93a2a3;
--color-waterfront-500: #7a8a8b;
--color-waterfront-600: #677575;
--color-waterfront-700: #525d5e;
--color-waterfront-800: #3c4445;
--color-waterfront-900: #292f2f;
--color-waterfront-950: #171c1c;
}SCSS
$waterfront: #d4e4e5;
$waterfront-rgb: 212, 228, 229;
$waterfront-light: mix(#fff, $waterfront, 20%);
$waterfront-dark: mix(#000, $waterfront, 20%);
.element {
color: $waterfront;
box-shadow: 0 0 0 2px rgba($waterfront, 0.35);
}