命名颜色 · #D3DCDC

Ripple

Ripple 即 #D3DCDC：rgb(211 220 220)、hsl(180 11% 85%)、oklch(0.888 0.01 197)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Ripple color name →

#D3DCDC

oklch(0.888 0.01 197)

颜色转换

HEX: #d3dcdc
RGB: rgb(211 220 220)
HSL: hsl(180 11% 85%)
HWB: hwb(180 83% 14%)
OKLCH: oklch(0.888 0.01 197)
OKLab: oklab(0.888 -0.009 -0.003)
CIE Lab: lab(87.06 -3.14 -1.11)
LCH: lch(87.06 3.33 199.5)
CMYK: cmyk(4% 0% 0% 14%)

浅色调 · 深色调 · 灰色调

浅色调

D7DFDF
DCE3E3
E0E6E6
E4EAEA
E9EDED
EDF1F1
F2F4F4
F6F8F8
FBFBFB

深色调

B7BFBF
9CA3A3
828888
696E6E
515454
3A3C3C
242626
101111
020202

灰色调

CAD2D2
C2C9C9
B9BFBF
B1B6B6
A9ADAD
A0A4A4
989B9B
909292
888989

配色和谐

互补色 +180°

D3DCDC
Ripple
E0D7D8
≈ Cautious Grey

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.39:1 · APCA Lc 19

Fail

黑底

WCAG 15.04:1 · APCA Lc 84

AAA

最佳文字颜色: #000000

WCAG 15.04:1 (AAA) · APCA Lc 84

Contrast pairs

代码片段

CSS

:root {
  --ripple: #d3dcdc;
  --ripple-rgb: 211 220 220;
  --ripple-oklch: oklch(0.888 0.01 197);
}

.element {
  color: var(--ripple);
  background-color: hsl(180 11% 85%);
  border-color: oklch(0.888 0.01 197);
}

Tailwind CSS v4

@theme {
  --color-ripple: #d3dcdc;
  --color-ripple-50: #f2f6f6;
  --color-ripple-100: #e4e9e9;
  --color-ripple-200: #d0d5d6;
  --color-ripple-300: #b2b9b9;
  --color-ripple-400: #98a0a0;
  --color-ripple-500: #7f8888;
  --color-ripple-600: #6c7373;
  --color-ripple-700: #565c5c;
  --color-ripple-800: #3f4343;
  --color-ripple-900: #2b2f2e;
  --color-ripple-950: #181b1b;
}

SCSS

$ripple: #d3dcdc;
$ripple-rgb: 211, 220, 220;
$ripple-light: mix(#fff, $ripple, 20%);
$ripple-dark: mix(#000, $ripple, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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