命名颜色 · #DCC7C0

Cheerful Heart

Cheerful Heart 即 #DCC7C0：rgb(220 199 192)、hsl(15 29% 81%)、oklch(0.845 0.026 39.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Cheerful Heart color name →

#DCC7C0

oklch(0.845 0.026 39.3)

颜色转换

HEX: #dcc7c0
RGB: rgb(220 199 192)
HSL: hsl(15 29% 81%)
HWB: hwb(15 75% 14%)
OKLCH: oklch(0.845 0.026 39.3)
OKLab: oklab(0.845 0.02 0.016)
CIE Lab: lab(81.87 6.76 6.34)
LCH: lch(81.87 9.27 43.1)
CMYK: cmyk(0% 10% 13% 14%)

浅色调 · 深色调 · 灰色调

浅色调

E0CDC6
E3D2CC
E7D8D3
EADDD9
EEE3DF
F1E8E5
F5EEEC
F8F4F2
FCF9F9

深色调

BFADA7
A3938E
887A76
6E625F
544C49
3C3634
262120
110E0E
020202

灰色调

D2C0B9
C9B8B3
C0B1AC
B6AAA6
ADA39F
A49C99
9B9593
928E8C
898786

配色和谐

互补色 +180°

DCC7C0
Cheerful Heart
BBD1D8
≈ Bahama Breezes

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.61:1 · APCA Lc 28

Fail

黑底

WCAG 12.97:1 · APCA Lc 75

AAA

最佳文字颜色: #000000

WCAG 12.97:1 (AAA) · APCA Lc 75

Contrast pairs

代码片段

CSS

:root {
  --cheerful-heart: #dcc7c0;
  --cheerful-heart-rgb: 220 199 192;
  --cheerful-heart-oklch: oklch(0.845 0.026 39.3);
}

.element {
  color: var(--cheerful-heart);
  background-color: hsl(15 29% 81%);
  border-color: oklch(0.845 0.026 39.3);
}

Tailwind CSS v4

@theme {
  --color-cheerful-heart: #dcc7c0;
  --color-cheerful-heart-50: #fcf3f0;
  --color-cheerful-heart-100: #f0e5e1;
  --color-cheerful-heart-200: #dfd1cc;
  --color-cheerful-heart-300: #c4b3ad;
  --color-cheerful-heart-400: #ad9a93;
  --color-cheerful-heart-500: #96817a;
  --color-cheerful-heart-600: #7f6d67;
  --color-cheerful-heart-700: #665752;
  --color-cheerful-heart-800: #4b3f3c;
  --color-cheerful-heart-900: #342c29;
  --color-cheerful-heart-950: #1f1917;
}

SCSS

$cheerful-heart: #dcc7c0;
$cheerful-heart-rgb: 220, 199, 192;
$cheerful-heart-light: mix(#fff, $cheerful-heart, 20%);
$cheerful-heart-dark: mix(#000, $cheerful-heart, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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