Cor nomeada · #372252
Powerful Violet
Powerful Violet é #372252: rgb(55 34 82), hsl(266 41% 23%), oklch(0.304 0.085 301.7). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Powerful Violet color name →
#372252
oklch(0.304 0.085 301.7)
Conversões de cor
- HEX
- #372252
- RGB
- rgb(55 34 82)
- HSL
- hsl(266 41% 23%)
- HWB
- hwb(266 13% 68%)
- OKLCH
- oklch(0.304 0.085 301.7)
- OKLab
- oklab(0.304 0.045 -0.073)
- CIE Lab
- lab(17.96 19.02 -26)
- LCH
- lch(17.96 32.22 306.2)
- CMYK
- cmyk(33% 59% 0% 68%)
Tons claros · Sombras · Tons
Tons claros
- 483662
- 5A4A73
- 6D5F84
- 807495
- 948AA6
- A9A0B7
- BEB7C9
- D3CFDB
- E9E7ED
Sombras
- 2E1C46
- 26163B
- 1E112F
- 160B25
- 0F071A
- 080311
- 030108
- 010002
- 000000
Tons
- 3E2B57
- 45355C
- 4C3E61
- 534765
- 5A506A
- 615A6F
- 696373
- 706D77
- 78767C
Harmonias de cor
Complementar +180°
- 372252
Powerful Violet
- 293400
≈ Blind Forest
Análoga -30° +30°
- 372252
Powerful Violet
- 202A59
≈ Ultramarine Violet
- 461C42
≈ Purple Void
Tríade +120° +240°
- 372252
Powerful Violet
- 472500
≈ Ibex Brown
- 003831
≈ Night Turquoise
Complementar dividida +150° +210°
- 372252
Powerful Violet
- 3A2D00
≈ Hidden Passage
- 003A19
≈ Gameboy Contrast
Tétrade +90° +180° +270°
- 372252
Powerful Violet
- 511A11
≈ Chocolate Rush
- 293400
≈ Blind Forest
- 00363E
≈ Natural Indigo
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 13.87:1 · APCA Lc 100
Ag
FailSobre preto
WCAG 1.51:1 · APCA Lc 0
Melhor cor de texto: #FFFFFF
WCAG 13.87:1 (AAA) · APCA Lc 100
Contrast pairs
Trechos de código
CSS
:root {
--powerful-violet: #372252;
--powerful-violet-rgb: 55 34 82;
--powerful-violet-oklch: oklch(0.304 0.085 301.7);
}
.element {
color: var(--powerful-violet);
background-color: hsl(266 41% 23%);
border-color: oklch(0.304 0.085 301.7);
}Tailwind CSS v4
@theme {
--color-powerful-violet: #372252;
--color-powerful-violet-50: #faf0ff;
--color-powerful-violet-100: #eee1ff;
--color-powerful-violet-200: #dcccf3;
--color-powerful-violet-300: #c0addc;
--color-powerful-violet-400: #a793c9;
--color-powerful-violet-500: #9078b6;
--color-powerful-violet-600: #7a6699;
--color-powerful-violet-700: #62527b;
--color-powerful-violet-800: #473c5c;
--color-powerful-violet-900: #312940;
--color-powerful-violet-950: #1d1729;
}SCSS
$powerful-violet: #372252;
$powerful-violet-rgb: 55, 34, 82;
$powerful-violet-light: mix(#fff, $powerful-violet, 20%);
$powerful-violet-dark: mix(#000, $powerful-violet, 20%);
.element {
color: $powerful-violet;
box-shadow: 0 0 0 2px rgba($powerful-violet, 0.35);
}