命名颜色 · #D8E2DF
Streetwise
Streetwise 即 #D8E2DF：rgb(216 226 223)、hsl(162 15% 87%)、oklch(0.904 0.011 176.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Streetwise color name →
#D8E2DF
oklch(0.904 0.011 176.3)
颜色转换
- HEX
- #d8e2df
- RGB
- rgb(216 226 223)
- HSL
- hsl(162 15% 87%)
- HWB
- hwb(162 85% 11%)
- OKLCH
- oklch(0.904 0.011 176.3)
- OKLab
- oklab(0.904 -0.011 0.001)
- CIE Lab
- lab(89.05 -3.88 0.25)
- LCH
- lch(89.05 3.89 176.4)
- CMYK
- cmyk(4% 0% 1% 11%)
浅色调 · 深色调 · 灰色调
浅色调
- DCE5E2
- E0E8E5
- E4EBE9
- E7EEEC
- EBF0EF
- EFF3F2
- F3F6F5
- F7F9F9
- FBFCFC
深色调
- BCC4C2
- A0A8A5
- 858C8A
- 6B716F
- 535756
- 3B3E3D
- 252727
- 111212
- 020302
灰色调
- CFD8D5
- C6CECB
- BDC4C2
- B4BAB8
- ABB0AE
- A2A6A5
- 9A9C9B
- 919392
- 888989
配色和谐
互补色 +180°
- D8E2DF
Streetwise
- E6DCDF
≈ White Cherry
类似色 -30° +30°
- D8E2DF
Streetwise
- DBE2DB
≈ Wishy-Washy Mint
- D7E2E3
≈ Glassine
三角配色 +120° +240°
- D8E2DF
Streetwise
- E0DEE6
≈ Frozen Statues
- E6DED8
≈ Pale Starlet
分裂互补色 +150° +210°
- D8E2DF
Streetwise
- E4DDE3
≈ Rusty Pebble
- E7DDDB
≈ Red Dust
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.32:1 · APCA Lc 16
Ag
AAA黑底
WCAG 15.86:1 · APCA Lc 88
最佳文字颜色: #000000
WCAG 15.86:1 (AAA) · APCA Lc 88
Contrast pairs
代码片段
CSS
:root {
--streetwise: #d8e2df;
--streetwise-rgb: 216 226 223;
--streetwise-oklch: oklch(0.904 0.011 176.3);
}
.element {
color: var(--streetwise);
background-color: hsl(162 15% 87%);
border-color: oklch(0.904 0.011 176.3);
}Tailwind CSS v4
@theme {
--color-streetwise: #d8e2df;
--color-streetwise-50: #f2f6f5;
--color-streetwise-100: #e4e9e8;
--color-streetwise-200: #cfd6d4;
--color-streetwise-300: #b2b9b7;
--color-streetwise-400: #98a19e;
--color-streetwise-500: #7f8986;
--color-streetwise-600: #6b7471;
--color-streetwise-700: #565d5b;
--color-streetwise-800: #3e4442;
--color-streetwise-900: #2b2f2e;
--color-streetwise-950: #181b1a;
}SCSS
$streetwise: #d8e2df;
$streetwise-rgb: 216, 226, 223;
$streetwise-light: mix(#fff, $streetwise, 20%);
$streetwise-dark: mix(#000, $streetwise, 20%);
.element {
color: $streetwise;
box-shadow: 0 0 0 2px rgba($streetwise, 0.35);
}