命名颜色 · #EFE8DC

Sugar Soap

Sugar Soap 即 #EFE8DC：rgb(239 232 220)、hsl(38 37% 90%)、oklch(0.933 0.018 81.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Sugar Soap color name →

#EFE8DC

oklch(0.933 0.018 81.3)

颜色转换

HEX: #efe8dc
RGB: rgb(239 232 220)
HSL: hsl(38 37% 90%)
HWB: hwb(38 86% 6%)
OKLCH: oklch(0.933 0.018 81.3)
OKLab: oklab(0.933 0.003 0.018)
CIE Lab: lab(92.31 0.94 6.74)
LCH: lch(92.31 6.81 82.1)
CMYK: cmyk(0% 3% 8% 6%)

浅色调 · 深色调 · 灰色调

浅色调

F1EADF
F2EDE3
F4EFE6
F5F1EA
F7F3ED
F9F6F1
FAF8F4
FCFAF8
FDFDFB

深色调

D0CABF
B1ACA3
949088
78746E
5C5954
42403C
2A2926
141311
030302

灰色调

E3DDD2
D8D2C9
CCC8BF
C1BDB6
B6B3AD
ABA8A4
A09E9B
959492
8B8A89

配色和谐

互补色 +180°

EFE8DC
Sugar Soap
E2E9F5
≈ Harbour Afternoon

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.21:1 · APCA Lc 11

Fail

黑底

WCAG 17.24:1 · APCA Lc 93

AAA

最佳文字颜色: #000000

WCAG 17.24:1 (AAA) · APCA Lc 93

Contrast pairs

代码片段

CSS

:root {
  --sugar-soap: #efe8dc;
  --sugar-soap-rgb: 239 232 220;
  --sugar-soap-oklch: oklch(0.933 0.018 81.3);
}

.element {
  color: var(--sugar-soap);
  background-color: hsl(38 37% 90%);
  border-color: oklch(0.933 0.018 81.3);
}

Tailwind CSS v4

@theme {
  --color-sugar-soap: #efe8dc;
  --color-sugar-soap-50: #f7f5f0;
  --color-sugar-soap-100: #ebe7e1;
  --color-sugar-soap-200: #d8d4cc;
  --color-sugar-soap-300: #bcb7ad;
  --color-sugar-soap-400: #a49e93;
  --color-sugar-soap-500: #8c8579;
  --color-sugar-soap-600: #777167;
  --color-sugar-soap-700: #5f5a52;
  --color-sugar-soap-800: #46423c;
  --color-sugar-soap-900: #302d29;
  --color-sugar-soap-950: #1c1a17;
}

SCSS

$sugar-soap: #efe8dc;
$sugar-soap-rgb: 239, 232, 220;
$sugar-soap-light: mix(#fff, $sugar-soap, 20%);
$sugar-soap-dark: mix(#000, $sugar-soap, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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