Color con nombre · #372252
Powerful Violet
Powerful Violet es #372252: rgb(55 34 82), hsl(266 41% 23%), oklch(0.304 0.085 301.7). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Purple mean? → · Powerful Violet color name →
#372252
oklch(0.304 0.085 301.7)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- 483662
- 5A4A73
- 6D5F84
- 807495
- 948AA6
- A9A0B7
- BEB7C9
- D3CFDB
- E9E7ED
Sombras
- 2E1C46
- 26163B
- 1E112F
- 160B25
- 0F071A
- 080311
- 030108
- 010002
- 000000
Tonos
- 3E2B57
- 45355C
- 4C3E61
- 534765
- 5A506A
- 615A6F
- 696373
- 706D77
- 78767C
Armonías de color
Complementario +180°
- 372252
Powerful Violet
- 293400
≈ Blind Forest
Análogo -30° +30°
- 372252
Powerful Violet
- 202A59
≈ Ultramarine Violet
- 461C42
≈ Purple Void
Triádico +120° +240°
- 372252
Powerful Violet
- 472500
≈ Ibex Brown
- 003831
≈ Night Turquoise
Complementario dividido +150° +210°
- 372252
Powerful Violet
- 3A2D00
≈ Hidden Passage
- 003A19
≈ Gameboy Contrast
Tetrádico +90° +180° +270°
- 372252
Powerful Violet
- 511A11
≈ Chocolate Rush
- 293400
≈ Blind Forest
- 00363E
≈ Natural Indigo
Contraste y accesibilidad
Ag
AAASobre blanco
WCAG 13.87:1 · APCA Lc 100
Ag
FailSobre negro
WCAG 1.51:1 · APCA Lc 0
Mejor color de texto: #FFFFFF
WCAG 13.87:1 (AAA) · APCA Lc 100
Contrast pairs
Fragmentos 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);
}