命名颜色 · #6633BB

Purple Emperor

Purple Emperor 即 #6633BB：rgb(102 51 187)、hsl(263 57% 47%)、oklch(0.468 0.199 294.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

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

#6633BB

oklch(0.468 0.199 294.5)

颜色转换

HEX: #6633bb
RGB: rgb(102 51 187)
HSL: hsl(263 57% 47%)
HWB: hwb(263 20% 27%)
OKLCH: oklch(0.468 0.199 294.5)
OKLab: oklab(0.468 0.083 -0.181)
CIE Lab: lab(34.68 45.44 -64.29)
LCH: lch(34.68 78.73 305.2)
CMYK: cmyk(45% 73% 0% 27%)

浅色调 · 深色调 · 灰色调

浅色调

734BC3
8061CB
8F75D3
9D89DA
AD9DE1
BCB0E8
CCC4EE
DDD7F4
EEEBFA

深色调

582BA2
4A238A
3C1C73
2F145C
230D46
170732
0C031F
04010D
000002

灰色调

683FB6
6A48B1
6C51AC
6E59A6
7160A0
74679B
766E94
79748E
7D7A87

配色和谐

互补色 +180°

6633BB
Purple Emperor
596000
≈ Kirchner Green

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 7.61:1 · APCA Lc 86

AAA

黑底

WCAG 2.75:1 · APCA Lc 16

Fail

最佳文字颜色: #FFFFFF

WCAG 7.61:1 (AAA) · APCA Lc 86

Contrast pairs

代码片段

CSS

:root {
  --purple-emperor: #6633bb;
  --purple-emperor-rgb: 102 51 187;
  --purple-emperor-oklch: oklch(0.468 0.199 294.5);
}

.element {
  color: var(--purple-emperor);
  background-color: hsl(263 57% 47%);
  border-color: oklch(0.468 0.199 294.5);
}

Tailwind CSS v4

@theme {
  --color-purple-emperor: #6633bb;
  --color-purple-emperor-50: #faeaff;
  --color-purple-emperor-100: #eedbff;
  --color-purple-emperor-200: #dcc2ff;
  --color-purple-emperor-300: #c2a0ff;
  --color-purple-emperor-400: #a881ff;
  --color-purple-emperor-500: #935ff9;
  --color-purple-emperor-600: #7c52d2;
  --color-purple-emperor-700: #6341a9;
  --color-purple-emperor-800: #472f80;
  --color-purple-emperor-900: #31205a;
  --color-purple-emperor-950: #1d0f3d;
}

SCSS

$purple-emperor: #6633bb;
$purple-emperor-rgb: 102, 51, 187;
$purple-emperor-light: mix(#fff, $purple-emperor, 20%);
$purple-emperor-dark: mix(#000, $purple-emperor, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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