命名颜色 · #E4EAED

Calla Lily

Calla Lily 即 #E4EAED：rgb(228 234 237)、hsl(200 20% 91%)、oklch(0.933 0.008 228.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Calla Lily color name →

#E4EAED

oklch(0.933 0.008 228.9)

颜色转换

HEX: #e4eaed
RGB: rgb(228 234 237)
HSL: hsl(200 20% 91%)
HWB: hwb(200 89% 7%)
OKLCH: oklch(0.933 0.008 228.9)
OKLab: oklab(0.933 -0.005 -0.006)
CIE Lab: lab(92.3 -1.66 -2.2)
LCH: lch(92.3 2.76 232.8)
CMYK: cmyk(4% 1% 0% 7%)

浅色调 · 深色调 · 灰色调

浅色调

E7ECEF
E9EEF1
ECF0F2
EFF2F4
F1F4F6
F4F7F8
F7F9FA
FAFBFB
FCFDFD

深色调

C6CBCE
A9AEB0
8D9193
727577
585A5C
3F4142
28292A
121314
030303

灰色调

DADFE2
CFD4D6
C5C9CB
BBBEC0
B1B4B5
A7A9AA
9D9F9F
939495
8A8A8A

配色和谐

互补色 +180°

E4EAED
Calla Lily
EDE8E5
≈ Heavenly White

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

四角配色 +90° +180° +270°

对比度与无障碍

白底

WCAG 1.21:1 · APCA Lc 11

Fail

黑底

WCAG 17.29:1 · APCA Lc 94

AAA

最佳文字颜色: #000000

WCAG 17.29:1 (AAA) · APCA Lc 94

Contrast pairs

代码片段

CSS

:root {
  --calla-lily: #e4eaed;
  --calla-lily-rgb: 228 234 237;
  --calla-lily-oklch: oklch(0.933 0.008 228.9);
}

.element {
  color: var(--calla-lily);
  background-color: hsl(200 20% 91%);
  border-color: oklch(0.933 0.008 228.9);
}

Tailwind CSS v4

@theme {
  --color-calla-lily: #e4eaed;
  --color-calla-lily-50: #f3f5f7;
  --color-calla-lily-100: #e5e8ea;
  --color-calla-lily-200: #d1d5d7;
  --color-calla-lily-300: #b4b8ba;
  --color-calla-lily-400: #9a9fa2;
  --color-calla-lily-500: #81878a;
  --color-calla-lily-600: #6d7275;
  --color-calla-lily-700: #575b5e;
  --color-calla-lily-800: #404344;
  --color-calla-lily-900: #2c2e2f;
  --color-calla-lily-950: #191b1c;
}

SCSS

$calla-lily: #e4eaed;
$calla-lily-rgb: 228, 234, 237;
$calla-lily-light: mix(#fff, $calla-lily, 20%);
$calla-lily-dark: mix(#000, $calla-lily, 20%);

.element {
  color: $calla-lily;
  box-shadow: 0 0 0 2px rgba($calla-lily, 0.35);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

取色器配色组合对比度检测 Studio JSON API