命名颜色 · #CCC4B4

Villa Grey

Villa Grey 即 #CCC4B4：rgb(204 196 180)、hsl(40 19% 75%)、oklch(0.822 0.024 84.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Villa Grey color name →

#CCC4B4

oklch(0.822 0.024 84.6)

颜色转换

HEX: #ccc4b4
RGB: rgb(204 196 180)
HSL: hsl(40 19% 75%)
HWB: hwb(40 71% 20%)
OKLCH: oklch(0.822 0.024 84.6)
OKLab: oklab(0.822 0.002 0.024)
CIE Lab: lab(79.49 0.86 9.11)
LCH: lch(79.49 9.15 84.6)
CMYK: cmyk(0% 4% 12% 20%)

浅色调 · 深色调 · 灰色调

浅色调

D1CABB
D6D0C3
DBD5CA
E0DBD2
E5E1D9
EAE7E1
EFEDE8
F5F3F0
FAF9F7

深色调

B1AA9C
979185
7E786E
656158
4E4A44
373530
22211D
0F0E0C
020202

灰色调

C4BDAF
BCB6A9
B5AFA4
ADA89F
A5A19A
9E9B94
96948F
8F8D8A
878785

配色和谐

互补色 +180°

CCC4B4
Villa Grey
BDC5D5
≈ Himalayan Poppy

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.73:1 · APCA Lc 31

Fail

黑底

WCAG 12.12:1 · APCA Lc 71

AAA

最佳文字颜色: #000000

WCAG 12.12:1 (AAA) · APCA Lc 71

Contrast pairs

代码片段

CSS

:root {
  --villa-grey: #ccc4b4;
  --villa-grey-rgb: 204 196 180;
  --villa-grey-oklch: oklch(0.822 0.024 84.6);
}

.element {
  color: var(--villa-grey);
  background-color: hsl(40 19% 75%);
  border-color: oklch(0.822 0.024 84.6);
}

Tailwind CSS v4

@theme {
  --color-villa-grey: #ccc4b4;
  --color-villa-grey-50: #f8f5ee;
  --color-villa-grey-100: #ebe7df;
  --color-villa-grey-200: #d9d4c9;
  --color-villa-grey-300: #bdb7aa;
  --color-villa-grey-400: #a59e8f;
  --color-villa-grey-500: #8d8575;
  --color-villa-grey-600: #787163;
  --color-villa-grey-700: #605a4f;
  --color-villa-grey-800: #464239;
  --color-villa-grey-900: #312d27;
  --color-villa-grey-950: #1d1a15;
}

SCSS

$villa-grey: #ccc4b4;
$villa-grey-rgb: 204, 196, 180;
$villa-grey-light: mix(#fff, $villa-grey, 20%);
$villa-grey-dark: mix(#000, $villa-grey, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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