命名颜色 · #DFD6D1

Kyoto Pearl

Kyoto Pearl 即 #DFD6D1：rgb(223 214 209)、hsl(21 18% 85%)、oklch(0.882 0.012 51.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Kyoto Pearl color name →

#DFD6D1

oklch(0.882 0.012 51.3)

颜色转换

HEX: #dfd6d1
RGB: rgb(223 214 209)
HSL: hsl(21 18% 85%)
HWB: hwb(21 82% 13%)
OKLCH: oklch(0.882 0.012 51.3)
OKLab: oklab(0.882 0.008 0.009)
CIE Lab: lab(86.25 2.56 3.64)
LCH: lch(86.25 4.44 54.9)
CMYK: cmyk(0% 4% 6% 13%)

浅色调 · 深色调 · 灰色调

浅色调

E2DAD6
E5DEDA
E9E2DF
ECE6E3
EFEAE8
F2EEEC
F5F3F1
F9F7F6
FCFBFA

深色调

C2BAB5
A59E9B
8A8481
6F6A68
565250
3D3B39
272523
121010
020202

灰色调

D5CDC9
CBC4C0
C2BBB8
B8B3B0
AEAAA8
A5A1A0
9B9998
929190
898888

配色和谐

互补色 +180°

DFD6D1
Kyoto Pearl
D1DADF
≈ Zen

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.43:1 · APCA Lc 21

Fail

黑底

WCAG 14.67:1 · APCA Lc 83

AAA

最佳文字颜色: #000000

WCAG 14.67:1 (AAA) · APCA Lc 83

Contrast pairs

代码片段

CSS

:root {
  --kyoto-pearl: #dfd6d1;
  --kyoto-pearl-rgb: 223 214 209;
  --kyoto-pearl-oklch: oklch(0.882 0.012 51.3);
}

.element {
  color: var(--kyoto-pearl);
  background-color: hsl(21 18% 85%);
  border-color: oklch(0.882 0.012 51.3);
}

Tailwind CSS v4

@theme {
  --color-kyoto-pearl: #dfd6d1;
  --color-kyoto-pearl-50: #f8f4f2;
  --color-kyoto-pearl-100: #ebe7e4;
  --color-kyoto-pearl-200: #d9d3cf;
  --color-kyoto-pearl-300: #bdb6b2;
  --color-kyoto-pearl-400: #a59d98;
  --color-kyoto-pearl-500: #8d847f;
  --color-kyoto-pearl-600: #77706c;
  --color-kyoto-pearl-700: #5f5956;
  --color-kyoto-pearl-800: #46413f;
  --color-kyoto-pearl-900: #302d2b;
  --color-kyoto-pearl-950: #1d1a18;
}

SCSS

$kyoto-pearl: #dfd6d1;
$kyoto-pearl-rgb: 223, 214, 209;
$kyoto-pearl-light: mix(#fff, $kyoto-pearl, 20%);
$kyoto-pearl-dark: mix(#000, $kyoto-pearl, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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