Adlandırılmış renk · #57446A
Haunted Candelabra
Haunted Candelabra, #57446A: rgb(87 68 106), hsl(270 22% 34%), oklch(0.423 0.066 306.7). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Purple mean? → · Haunted Candelabra color name →
#57446A
oklch(0.423 0.066 306.7)
Renk dönüşümleri
- HEX
- #57446a
- RGB
- rgb(87 68 106)
- HSL
- hsl(270 22% 34%)
- HWB
- hwb(270 27% 58%)
- OKLCH
- oklch(0.423 0.066 306.7)
- OKLab
- oklab(0.423 0.039 -0.053)
- CIE Lab
- lab(32.12 14.63 -19.16)
- LCH
- lch(32.12 24.11 307.4)
- CMYK
- cmyk(18% 36% 0% 58%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 665578
- 766686
- 867895
- 968AA4
- A79DB2
- B8B0C1
- C9C3D1
- DBD7E0
- EDEBEF
Koyu tonlar
- 4B3A5B
- 3E304D
- 33263F
- 271D31
- 1C1424
- 120C18
- 08050D
- 030204
- 000000
Gri tonlar
- 5B4A6C
- 5F506F
- 635671
- 675C73
- 6B6276
- 6F6878
- 736E7A
- 78747C
- 7C7A7E
Renk uyumları
Tamamlayıcı +180°
- 57446A
Haunted Candelabra
- 44542C
≈ Trefoil
Analog -30° +30°
- 57446A
Haunted Candelabra
- 444A71
≈ Egyptian Violet
- 653F5B
≈ Royal Plum
Üçlü +120° +240°
- 57446A
Haunted Candelabra
- 664624
≈ Florida’s Alligator
- 165954
≈ Baltic Prince
Bölünmüş tamamlayıcı +150° +210°
- 57446A
Haunted Candelabra
- 584E20
≈ Bronze Olive
- 2C593F
≈ Green Stain
Dörtlü +90° +180° +270°
- 57446A
Haunted Candelabra
- 6D4034
≈ Rich Chocolate
- 44542C
≈ Trefoil
- 185665
≈ Baltic Trench
Kontrast ve erişilebilirlik
Ag
AAABeyaz üzerinde
WCAG 8.60:1 · APCA Lc 90
Ag
FailSiyah üzerinde
WCAG 2.44:1 · APCA Lc 13
En iyi metin rengi: #FFFFFF
WCAG 8.60:1 (AAA) · APCA Lc 90
Contrast pairs
Kod parçacıkları
CSS
:root {
--haunted-candelabra: #57446a;
--haunted-candelabra-rgb: 87 68 106;
--haunted-candelabra-oklch: oklch(0.423 0.066 306.7);
}
.element {
color: var(--haunted-candelabra);
background-color: hsl(270 22% 34%);
border-color: oklch(0.423 0.066 306.7);
}Tailwind CSS v4
@theme {
--color-haunted-candelabra: #57446a;
--color-haunted-candelabra-50: #faf0ff;
--color-haunted-candelabra-100: #eee2f9;
--color-haunted-candelabra-200: #dccdea;
--color-haunted-candelabra-300: #c1afd2;
--color-haunted-candelabra-400: #a895bd;
--color-haunted-candelabra-500: #917ba9;
--color-haunted-candelabra-600: #7b688f;
--color-haunted-candelabra-700: #625372;
--color-haunted-candelabra-800: #473d55;
--color-haunted-candelabra-900: #312a3b;
--color-haunted-candelabra-950: #1d1725;
}SCSS
$haunted-candelabra: #57446a;
$haunted-candelabra-rgb: 87, 68, 106;
$haunted-candelabra-light: mix(#fff, $haunted-candelabra, 20%);
$haunted-candelabra-dark: mix(#000, $haunted-candelabra, 20%);
.element {
color: $haunted-candelabra;
box-shadow: 0 0 0 2px rgba($haunted-candelabra, 0.35);
}