命名颜色 · #C6BEDD

Purple Dragon

Purple Dragon 即 #C6BEDD：rgb(198 190 221)、hsl(255 31% 81%)、oklch(0.818 0.044 297.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Purple mean? → · Purple Dragon color name →

#C6BEDD

oklch(0.818 0.044 297.2)

颜色转换

HEX: #c6bedd
RGB: rgb(198 190 221)
HSL: hsl(255 31% 81%)
HWB: hwb(255 75% 13%)
OKLCH: oklch(0.818 0.044 297.2)
OKLab: oklab(0.818 0.02 -0.039)
CIE Lab: lab(78.38 7.35 -14.51)
LCH: lch(78.38 16.26 296.9)
CMYK: cmyk(10% 14% 0% 13%)

浅色调 · 深色调 · 灰色调

浅色调

CCC4E0
D1CBE4
D7D1E7
DCD8EB
E2DEEE
E8E5F2
EEEBF5
F3F2F8
F9F8FC

深色调

ACA5C0
928CA4
7A7588
625E6E
4B4855
35333D
211F26
0E0D11
020202

灰色调

BFB8D3
B8B1CA
B0ABC0
A9A5B7
A29FAE
9B98A4
94929B
8E8C92
878689

配色和谐

互补色 +180°

C6BEDD
Purple Dragon
C1C8A8
≈ Rejuvenate

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.77:1 · APCA Lc 33

Fail

黑底

WCAG 11.81:1 · APCA Lc 70

AAA

最佳文字颜色: #000000

WCAG 11.81:1 (AAA) · APCA Lc 70

Contrast pairs

代码片段

CSS

:root {
  --purple-dragon: #c6bedd;
  --purple-dragon-rgb: 198 190 221;
  --purple-dragon-oklch: oklch(0.818 0.044 297.2);
}

.element {
  color: var(--purple-dragon);
  background-color: hsl(255 31% 81%);
  border-color: oklch(0.818 0.044 297.2);
}

Tailwind CSS v4

@theme {
  --color-purple-dragon: #c6bedd;
  --color-purple-dragon-50: #f7f3ff;
  --color-purple-dragon-100: #eae5f5;
  --color-purple-dragon-200: #d6d0e5;
  --color-purple-dragon-300: #bab3cb;
  --color-purple-dragon-400: #a199b6;
  --color-purple-dragon-500: #8980a0;
  --color-purple-dragon-600: #746d87;
  --color-purple-dragon-700: #5d576c;
  --color-purple-dragon-800: #434050;
  --color-purple-dragon-900: #2e2c38;
  --color-purple-dragon-950: #1b1922;
}

SCSS

$purple-dragon: #c6bedd;
$purple-dragon-rgb: 198, 190, 221;
$purple-dragon-light: mix(#fff, $purple-dragon, 20%);
$purple-dragon-dark: mix(#000, $purple-dragon, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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