Colore con nome · #DD2211
Halloween Punch
Halloween Punch è #DD2211: rgb(221 34 17), hsl(5 86% 47%), oklch(0.575 0.22 30.1). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Halloween Punch color name →
#DD2211
oklch(0.575 0.22 30.1)
Conversioni di colore
- HEX
- #dd2211
- RGB
- rgb(221 34 17)
- HSL
- hsl(5 86% 47%)
- HWB
- hwb(5 7% 13%)
- OKLCH
- oklch(0.575 0.22 30.1)
- OKLab
- oklab(0.575 0.19 0.11)
- CIE Lab
- lab(48.6 68.55 58.07)
- LCH
- lch(48.6 89.83 40.3)
- CMYK
- cmyk(0% 85% 92% 13%)
Tinte · Ombre · Toni
Tinte
- E44533
- EA5F4C
- F07663
- F48A7A
- F89F90
- FBB2A6
- FEC6BC
- FFD9D2
- FFECE8
Ombre
- C01C0D
- A41609
- 881106
- 6E0B04
- 550702
- 3D0301
- 260100
- 110000
- 020000
Toni
- D53726
- CE4534
- C65040
- BD594B
- B56154
- AB695E
- A26F67
- 97756F
- 8C7B78
Armonie di colore
Complementare +180°
- DD2211
Halloween Punch
- 008899
≈ Atlantic Blue
Analogo -30° +30°
- DD2211
Halloween Punch
- D51C73
≈ Pink Peacock
- B16200
≈ Orange Brown
Triadico +120° +240°
- DD2211
Halloween Punch
- 009142
≈ Viper Green
- 4B65F8
≈ Secret of Mana
Complementare divisa +150° +210°
- DD2211
Halloween Punch
- 008D7B
≈ Greenlake
- 0081BE
≈ Phuket Palette
Tetradico +90° +180° +270°
- DD2211
Halloween Punch
- 6F8400
≈ Swamp Green
- 008899
≈ Atlantic Blue
- 904BE4
≈ Pericallis Hybrida
Contrasto e accessibilità
Ag
AASu bianco
WCAG 4.87:1 · APCA Lc 72
Ag
FailSu nero
WCAG 4.31:1 · APCA Lc 30
Miglior colore del testo: #FFFFFF
WCAG 4.87:1 (AA) · APCA Lc 72
Contrast pairs
Frammenti di codice
CSS
:root {
--halloween-punch: #dd2211;
--halloween-punch-rgb: 221 34 17;
--halloween-punch-oklch: oklch(0.575 0.22 30.1);
}
.element {
color: var(--halloween-punch);
background-color: hsl(5 86% 47%);
border-color: oklch(0.575 0.22 30.1);
}Tailwind CSS v4
@theme {
--color-halloween-punch: #dd2211;
--color-halloween-punch-50: #ffdfce;
--color-halloween-punch-100: #ffcdba;
--color-halloween-punch-200: #ffaf98;
--color-halloween-punch-300: #ff876c;
--color-halloween-punch-400: #ff5c48;
--color-halloween-punch-500: #f6200c;
--color-halloween-punch-600: #d02111;
--color-halloween-punch-700: #a71b0e;
--color-halloween-punch-800: #7d100e;
--color-halloween-punch-900: #590b09;
--color-halloween-punch-950: #3b0000;
}SCSS
$halloween-punch: #dd2211;
$halloween-punch-rgb: 221, 34, 17;
$halloween-punch-light: mix(#fff, $halloween-punch, 20%);
$halloween-punch-dark: mix(#000, $halloween-punch, 20%);
.element {
color: $halloween-punch;
box-shadow: 0 0 0 2px rgba($halloween-punch, 0.35);
}