命名颜色 · #D1C1DD

Fresh Heather

Fresh Heather 即 #D1C1DD：rgb(209 193 221)、hsl(274 29% 81%)、oklch(0.833 0.042 310.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Purple mean? → · Fresh Heather color name →

#D1C1DD

oklch(0.833 0.042 310.8)

颜色转换

HEX: #d1c1dd
RGB: rgb(209 193 221)
HSL: hsl(274 29% 81%)
HWB: hwb(274 76% 13%)
OKLCH: oklch(0.833 0.042 310.8)
OKLab: oklab(0.833 0.028 -0.032)
CIE Lab: lab(80.07 9.64 -11.89)
LCH: lch(80.07 15.31 309.1)
CMYK: cmyk(5% 13% 0% 13%)

浅色调 · 深色调 · 灰色调

浅色调

D6C7E0
DACDE4
DFD3E7
E3DAEB
E8E0EE
ECE6F1
F1ECF5
F6F2F8
FAF9FC

深色调

B5A7C0
9B8FA4
817788
685F6E
504955
39343D
232026
100E11
020202

灰色调

C9BAD3
C0B4CA
B8ADC0
B0A6B7
A8A0AD
A099A4
98939B
908D92
888689

配色和谐

互补色 +180°

D1C1DD
Fresh Heather
BFCEB2
≈ Rhys

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.69:1 · APCA Lc 30

Fail

黑底

WCAG 12.38:1 · APCA Lc 73

AAA

最佳文字颜色: #000000

WCAG 12.38:1 (AAA) · APCA Lc 73

Contrast pairs

代码片段

CSS

:root {
  --fresh-heather: #d1c1dd;
  --fresh-heather-rgb: 209 193 221;
  --fresh-heather-oklch: oklch(0.833 0.042 310.8);
}

.element {
  color: var(--fresh-heather);
  background-color: hsl(274 29% 81%);
  border-color: oklch(0.833 0.042 310.8);
}

Tailwind CSS v4

@theme {
  --color-fresh-heather: #d1c1dd;
  --color-fresh-heather-50: #f9f2fe;
  --color-fresh-heather-100: #ede4f2;
  --color-fresh-heather-200: #dbcfe1;
  --color-fresh-heather-300: #bfb2c7;
  --color-fresh-heather-400: #a698b1;
  --color-fresh-heather-500: #8f7f9b;
  --color-fresh-heather-600: #796b83;
  --color-fresh-heather-700: #615669;
  --color-fresh-heather-800: #473f4e;
  --color-fresh-heather-900: #312b36;
  --color-fresh-heather-950: #1d1821;
}

SCSS

$fresh-heather: #d1c1dd;
$fresh-heather-rgb: 209, 193, 221;
$fresh-heather-light: mix(#fff, $fresh-heather, 20%);
$fresh-heather-dark: mix(#000, $fresh-heather, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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