命名颜色 · #E2C4AF

Gypsum Rose

Gypsum Rose 即 #E2C4AF：rgb(226 196 175)、hsl(25 47% 79%)、oklch(0.84 0.045 57.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Orange mean? → · Gypsum Rose color name →

#E2C4AF

oklch(0.84 0.045 57.1)

颜色转换

HEX: #e2c4af
RGB: rgb(226 196 175)
HSL: hsl(25 47% 79%)
HWB: hwb(25 69% 11%)
OKLCH: oklch(0.84 0.045 57.1)
OKLab: oklab(0.84 0.024 0.037)
CIE Lab: lab(81.34 8.6 14.71)
LCH: lch(81.34 17.04 59.7)
CMYK: cmyk(0% 13% 23% 11%)

浅色调 · 深色调 · 灰色调

浅色调

E5CAB7
E8D0BF
EBD6C7
EEDBCF
F1E1D7
F4E7DF
F7EDE7
F9F3EF
FCF9F7

深色调

C4AA98
A89181
8C786B
716156
574A41
3E352E
27211C
120E0B
030201

灰色调

D8BDAA
CEB6A6
C4AFA1
BAA89C
B0A197
A69B93
9D948E
938D89
898785

配色和谐

互补色 +180°

E2C4AF
Gypsum Rose
B0D0E5
≈ Vive le Vent

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.64:1 · APCA Lc 29

Fail

黑底

WCAG 12.74:1 · APCA Lc 74

AAA

最佳文字颜色: #000000

WCAG 12.74:1 (AAA) · APCA Lc 74

Contrast pairs

代码片段

CSS

:root {
  --gypsum-rose: #e2c4af;
  --gypsum-rose-rgb: 226 196 175;
  --gypsum-rose-oklch: oklch(0.84 0.045 57.1);
}

.element {
  color: var(--gypsum-rose);
  background-color: hsl(25 47% 79%);
  border-color: oklch(0.84 0.045 57.1);
}

Tailwind CSS v4

@theme {
  --color-gypsum-rose: #e2c4af;
  --color-gypsum-rose-50: #fff2e9;
  --color-gypsum-rose-100: #f4e5da;
  --color-gypsum-rose-200: #e3d0c2;
  --color-gypsum-rose-300: #c9b2a1;
  --color-gypsum-rose-400: #b49885;
  --color-gypsum-rose-500: #9e7f6a;
  --color-gypsum-rose-600: #856c5a;
  --color-gypsum-rose-700: #6b5647;
  --color-gypsum-rose-800: #4f3f34;
  --color-gypsum-rose-900: #372b23;
  --color-gypsum-rose-950: #221812;
}

SCSS

$gypsum-rose: #e2c4af;
$gypsum-rose-rgb: 226, 196, 175;
$gypsum-rose-light: mix(#fff, $gypsum-rose, 20%);
$gypsum-rose-dark: mix(#000, $gypsum-rose, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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