命名颜色 · #D1DFEB

Happy Thoughts

Happy Thoughts 即 #D1DFEB：rgb(209 223 235)、hsl(208 39% 87%)、oklch(0.897 0.022 243.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Happy Thoughts color name →

#D1DFEB

oklch(0.897 0.022 243.8)

颜色转换

HEX: #d1dfeb
RGB: rgb(209 223 235)
HSL: hsl(208 39% 87%)
HWB: hwb(208 82% 8%)
OKLCH: oklch(0.897 0.022 243.8)
OKLab: oklab(0.897 -0.01 -0.02)
CIE Lab: lab(88.03 -3.11 -7.58)
LCH: lch(88.03 8.19 247.7)
CMYK: cmyk(11% 5% 0% 8%)

浅色调 · 深色调 · 灰色调

浅色调

D6E2ED
DAE5EF
DFE9F1
E3ECF3
E8EFF5
ECF2F7
F1F5F9
F6F9FB
FAFCFD

深色调

B5C2CC
9BA5AE
818A91
686F75
50565B
393D41
232729
101213
020203

灰色调

C9D5E0
C0CBD5
B8C2CA
B0B8BF
A8AEB4
A0A5A9
989B9F
909294
88898A

配色和谐

互补色 +180°

D1DFEB
Happy Thoughts
E8DACE
≈ Malted Milk

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.35:1 · APCA Lc 18

Fail

黑底

WCAG 15.46:1 · APCA Lc 86

AAA

最佳文字颜色: #000000

WCAG 15.46:1 (AAA) · APCA Lc 86

Contrast pairs

代码片段

CSS

:root {
  --happy-thoughts: #d1dfeb;
  --happy-thoughts-rgb: 209 223 235;
  --happy-thoughts-oklch: oklch(0.897 0.022 243.8);
}

.element {
  color: var(--happy-thoughts);
  background-color: hsl(208 39% 87%);
  border-color: oklch(0.897 0.022 243.8);
}

Tailwind CSS v4

@theme {
  --color-happy-thoughts: #d1dfeb;
  --color-happy-thoughts-50: #f0f6fb;
  --color-happy-thoughts-100: #e2e9ef;
  --color-happy-thoughts-200: #cdd5dd;
  --color-happy-thoughts-300: #aeb9c2;
  --color-happy-thoughts-400: #94a0ab;
  --color-happy-thoughts-500: #7a8894;
  --color-happy-thoughts-600: #67737d;
  --color-happy-thoughts-700: #535c64;
  --color-happy-thoughts-800: #3c434a;
  --color-happy-thoughts-900: #292f33;
  --color-happy-thoughts-950: #171b1f;
}

SCSS

$happy-thoughts: #d1dfeb;
$happy-thoughts-rgb: 209, 223, 235;
$happy-thoughts-light: mix(#fff, $happy-thoughts, 20%);
$happy-thoughts-dark: mix(#000, $happy-thoughts, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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