命名颜色 · #ECD2B4

Fuzzy Scruff

Fuzzy Scruff 即 #ECD2B4：rgb(236 210 180)、hsl(32 60% 82%)、oklch(0.878 0.049 71.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Orange mean? → · Fuzzy Scruff color name →

#ECD2B4

oklch(0.878 0.049 71.1)

颜色转换

HEX: #ecd2b4
RGB: rgb(236 210 180)
HSL: hsl(32 60% 82%)
HWB: hwb(32 71% 7%)
OKLCH: oklch(0.878 0.049 71.1)
OKLab: oklab(0.878 0.016 0.047)
CIE Lab: lab(85.82 6 18.42)
LCH: lch(85.82 19.37 71.9)
CMYK: cmyk(0% 11% 24% 7%)

浅色调 · 深色调 · 灰色调

浅色调

EED6BB
F0DBC3
F2DFCA
F4E4D2
F6E8D9
F8EDE1
F9F1E8
FBF6F0
FDFAF7

深色调

CDB69C
AF9B85
92816E
766858
5B5044
423930
29241D
13100C
030202

灰色调

E1CAAF
D6C1AA
CAB9A4
C0B09F
B5A89A
AAA095
9F9890
95908A
8A8885

配色和谐

互补色 +180°

ECD2B4
Fuzzy Scruff
BFDAF7
≈ Oh Boy!

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.45:1 · APCA Lc 22

Fail

黑底

WCAG 14.44:1 · APCA Lc 82

AAA

最佳文字颜色: #000000

WCAG 14.44:1 (AAA) · APCA Lc 82

Contrast pairs

代码片段

CSS

:root {
  --fuzzy-scruff: #ecd2b4;
  --fuzzy-scruff-rgb: 236 210 180;
  --fuzzy-scruff-oklch: oklch(0.878 0.049 71.1);
}

.element {
  color: var(--fuzzy-scruff);
  background-color: hsl(32 60% 82%);
  border-color: oklch(0.878 0.049 71.1);
}

Tailwind CSS v4

@theme {
  --color-fuzzy-scruff: #ecd2b4;
  --color-fuzzy-scruff-50: #fef3e6;
  --color-fuzzy-scruff-100: #f2e6d6;
  --color-fuzzy-scruff-200: #e2d1be;
  --color-fuzzy-scruff-300: #c7b49c;
  --color-fuzzy-scruff-400: #b19a7f;
  --color-fuzzy-scruff-500: #9b8162;
  --color-fuzzy-scruff-600: #836d53;
  --color-fuzzy-scruff-700: #695742;
  --color-fuzzy-scruff-800: #4e3f30;
  --color-fuzzy-scruff-900: #362c20;
  --color-fuzzy-scruff-950: #211910;
}

SCSS

$fuzzy-scruff: #ecd2b4;
$fuzzy-scruff-rgb: 236, 210, 180;
$fuzzy-scruff-light: mix(#fff, $fuzzy-scruff, 20%);
$fuzzy-scruff-dark: mix(#000, $fuzzy-scruff, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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