命名颜色 · #E4E6DC
Crystal Brooke
Crystal Brooke 即 #E4E6DC：rgb(228 230 220)、hsl(72 17% 88%)、oklch(0.921 0.014 115.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Crystal Brooke color name →
#E4E6DC
oklch(0.921 0.014 115.8)
颜色转换
- HEX
- #e4e6dc
- RGB
- rgb(228 230 220)
- HSL
- hsl(72 17% 88%)
- HWB
- hwb(72 86% 10%)
- OKLCH
- oklch(0.921 0.014 115.8)
- OKLab
- oklab(0.921 -0.006 0.012)
- CIE Lab
- lab(90.93 -2.01 4.64)
- LCH
- lch(90.93 5.06 113.4)
- CMYK
- cmyk(1% 0% 4% 10%)
浅色调 · 深色调 · 灰色调
浅色调
- E7E8DF
- E9EBE3
- ECEDE6
- EFF0EA
- F1F2ED
- F4F5F1
- F7F7F4
- FAFAF8
- FCFCFB
深色调
- C6C8BF
- A9ABA3
- 8D8E88
- 72736E
- 585954
- 3F403C
- 282826
- 121311
- 030302
灰色调
- DADBD2
- CFD1C9
- C5C6BF
- BBBCB6
- B1B2AD
- A7A7A4
- 9D9D9B
- 939392
- 8A8A89
配色和谐
互补色 +180°
- E4E6DC
Crystal Brooke
- E5E3ED
≈ Farsighted
类似色 -30° +30°
- E4E6DC
Crystal Brooke
- E9E4DB
≈ Hot Desert
- DFE7DF
≈ Winter Veil
三角配色 +120° +240°
- E4E6DC
Crystal Brooke
- DDE6ED
≈ White Frost
- EDE1E5
≈ Pink Booties
分裂互补色 +150° +210°
- E4E6DC
Crystal Brooke
- E0E5EE
≈ Radiant Moon
- EAE2EA
≈ Dream Dust
四角配色 +90° +180° +270°
- E4E6DC
Crystal Brooke
- DBE8E9
≈ Wave Crest
- E5E3ED
≈ Farsighted
- EEE2E0
≈ Shattered Porcelain
对比度与无障碍
Ag
Fail白底
WCAG 1.26:1 · APCA Lc 13
Ag
AAA黑底
WCAG 16.65:1 · APCA Lc 91
最佳文字颜色: #000000
WCAG 16.65:1 (AAA) · APCA Lc 91
Contrast pairs
代码片段
CSS
:root {
--crystal-brooke: #e4e6dc;
--crystal-brooke-rgb: 228 230 220;
--crystal-brooke-oklch: oklch(0.921 0.014 115.8);
}
.element {
color: var(--crystal-brooke);
background-color: hsl(72 17% 88%);
border-color: oklch(0.921 0.014 115.8);
}Tailwind CSS v4
@theme {
--color-crystal-brooke: #e4e6dc;
--color-crystal-brooke-50: #f5f6f1;
--color-crystal-brooke-100: #e7e8e3;
--color-crystal-brooke-200: #d3d5cf;
--color-crystal-brooke-300: #b6b8b1;
--color-crystal-brooke-400: #9e9f97;
--color-crystal-brooke-500: #85877d;
--color-crystal-brooke-600: #71736a;
--color-crystal-brooke-700: #5a5c55;
--color-crystal-brooke-800: #42433e;
--color-crystal-brooke-900: #2e2e2a;
--color-crystal-brooke-950: #1a1b18;
}SCSS
$crystal-brooke: #e4e6dc;
$crystal-brooke-rgb: 228, 230, 220;
$crystal-brooke-light: mix(#fff, $crystal-brooke, 20%);
$crystal-brooke-dark: mix(#000, $crystal-brooke, 20%);
.element {
color: $crystal-brooke;
box-shadow: 0 0 0 2px rgba($crystal-brooke, 0.35);
}