Nazwany kolor · #6633BB
Purple Emperor
Purple Emperor to #6633BB: rgb(102 51 187), hsl(263 57% 47%), oklch(0.468 0.199 294.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Purple Emperor color name →
#6633BB
oklch(0.468 0.199 294.5)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 734BC3
- 8061CB
- 8F75D3
- 9D89DA
- AD9DE1
- BCB0E8
- CCC4EE
- DDD7F4
- EEEBFA
Odcienie ciemniejsze
- 582BA2
- 4A238A
- 3C1C73
- 2F145C
- 230D46
- 170732
- 0C031F
- 04010D
- 000002
Tony
- 683FB6
- 6A48B1
- 6C51AC
- 6E59A6
- 7160A0
- 74679B
- 766E94
- 79748E
- 7D7A87
Harmonie kolorów
Komplementarna +180°
- 6633BB
Purple Emperor
- 596000
≈ Kirchner Green
Analogowa -30° +30°
- 6633BB
Purple Emperor
- 1F4BC7
≈ New Car
- 8C1B96
≈ Passionate Purple
Triada +120° +240°
- 6633BB
Purple Emperor
- 8A4400
≈ Chocolate Pancakes
- 006A57
≈ Chrysocolla Medium Green
Komplementarna rozszczepiona +150° +210°
- 6633BB
Purple Emperor
- 735500
≈ Pickled Grape Leaves
- 006E17
≈ Bogey Green
Tetrada +90° +180° +270°
- 6633BB
Purple Emperor
- AB001B
≈ Incarnadine
- 596000
≈ Kirchner Green
- 00676F
≈ Trouser Blue
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.61:1 · APCA Lc 86
Ag
FailNa czerni
WCAG 2.75:1 · APCA Lc 16
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.61:1 (AAA) · APCA Lc 86
Contrast pairs
Fragmenty kodu
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);
}