Cor nomeada · #4E0550
Beaten Purple
Beaten Purple é #4E0550: rgb(78 5 80), hsl(298 88% 17%), oklch(0.303 0.133 327). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Beaten Purple color name →
#4E0550
oklch(0.303 0.133 327)
Conversões de cor
- HEX
- #4e0550
- RGB
- rgb(78 5 80)
- HSL
- hsl(298 88% 17%)
- HWB
- hwb(298 2% 69%)
- OKLCH
- oklch(0.303 0.133 327)
- OKLab
- oklab(0.303 0.112 -0.073)
- CIE Lab
- lab(16.94 38.4 -25.98)
- LCH
- lch(16.94 46.36 325.9)
- CMYK
- cmyk(2% 94% 0% 69%)
Tons claros · Sombras · Tons
Tons claros
- 602361
- 713B71
- 835382
- 946A94
- A682A5
- B79AB7
- C9B2C8
- DBCBDA
- EDE5ED
Sombras
- 430444
- 380339
- 2D022E
- 230124
- 19011A
- 0F0010
- 070007
- 020002
- 000000
Tons
- 541855
- 5A255A
- 5F315F
- 643D64
- 694869
- 6E536E
- 735E72
- 776A77
- 7C757C
Harmonias de cor
Complementar +180°
- 4E0550
Beaten Purple
- 003A0F
≈ Gameboy Contrast
Análoga -30° +30°
- 4E0550
Beaten Purple
- 381567
≈ Candied Blueberry
- 59002F
≈ Mulberry Wood
Tríade +120° +240°
- 4E0550
Beaten Purple
- 3C2C00
≈ Hidden Passage
- 00363C
≈ Artist Blue
Complementar dividida +150° +210°
- 4E0550
Beaten Purple
- 2C3300
≈ Wasabi Nori
- 00372E
≈ Night Turquoise
Tétrade +90° +180° +270°
- 4E0550
Beaten Purple
- 492300
≈ Chrysophobia
- 003A0F
≈ Gameboy Contrast
- 00334B
≈ Cosmos Blue
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 14.36:1 · APCA Lc 100
Ag
FailSobre preto
WCAG 1.46:1 · APCA Lc 0
Melhor cor de texto: #FFFFFF
WCAG 14.36:1 (AAA) · APCA Lc 100
Contrast pairs
Trechos de código
CSS
:root {
--beaten-purple: #4e0550;
--beaten-purple-rgb: 78 5 80;
--beaten-purple-oklch: oklch(0.303 0.133 327);
}
.element {
color: var(--beaten-purple);
background-color: hsl(298 88% 17%);
border-color: oklch(0.303 0.133 327);
}Tailwind CSS v4
@theme {
--color-beaten-purple: #4e0550;
--color-beaten-purple-50: #ffe8ff;
--color-beaten-purple-100: #ffd9fe;
--color-beaten-purple-200: #f5c0f1;
--color-beaten-purple-300: #de9fd9;
--color-beaten-purple-400: #c881c7;
--color-beaten-purple-500: #b363b4;
--color-beaten-purple-600: #975498;
--color-beaten-purple-700: #7a437a;
--color-beaten-purple-800: #59305b;
--color-beaten-purple-900: #3e2140;
--color-beaten-purple-950: #271029;
}SCSS
$beaten-purple: #4e0550;
$beaten-purple-rgb: 78, 5, 80;
$beaten-purple-light: mix(#fff, $beaten-purple, 20%);
$beaten-purple-dark: mix(#000, $beaten-purple, 20%);
.element {
color: $beaten-purple;
box-shadow: 0 0 0 2px rgba($beaten-purple, 0.35);
}