Colore con nome · #EF4F41
Strawberry Avalanche
Strawberry Avalanche è #EF4F41: rgb(239 79 65), hsl(5 84% 60%), oklch(0.647 0.199 28.7). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Strawberry Avalanche color name →
#EF4F41
oklch(0.647 0.199 28.7)
Conversioni di colore
- HEX
- #ef4f41
- RGB
- rgb(239 79 65)
- HSL
- hsl(5 84% 60%)
- HWB
- hwb(5 25% 6%)
- OKLCH
- oklch(0.647 0.199 28.7)
- OKLab
- oklab(0.647 0.174 0.095)
- CIE Lab
- lab(57.2 61.69 43.98)
- LCH
- lch(57.2 75.76 35.5)
- CMYK
- cmyk(0% 67% 73% 6%)
Tinte · Ombre · Toni
Tinte
- F36555
- F77869
- FB8A7B
- FD9C8E
- FFADA1
- FFBEB3
- FFCEC6
- FFDED9
- FFEFEC
Ombre
- D04437
- B1382E
- 942E25
- 78231C
- 5C1913
- 42100B
- 2A0705
- 140201
- 030000
Toni
- E55849
- DB5F51
- D16558
- C66A5E
- BC6F64
- B1736A
- A57770
- 9A7A76
- 8D7D7B
Armonie di colore
Complementare +180°
- EF4F41
Strawberry Avalanche
- 00A1B2
≈ Breaking Wave
Analogo -30° +30°
- EF4F41
Strawberry Avalanche
- E74B8C
≈ Majestic Magenta
- D17300
≈ Tree Sap
Triadico +120° +240°
- EF4F41
Strawberry Avalanche
- 00AB48
≈ Hanging Gardens of Babylon
- 6083FF
≈ Deep Denim
Complementare divisa +150° +210°
- EF4F41
Strawberry Avalanche
- 00A58F
≈ Fishy House
- 0098DC
≈ Atmosphere
Tetradico +90° +180° +270°
- EF4F41
Strawberry Avalanche
- 869A00
≈ BioShock
- 00A1B2
≈ Breaking Wave
- A16BF4
≈ Purple Hedonist
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.58:1 · APCA Lc 62
Ag
AASu nero
WCAG 5.86:1 · APCA Lc 39
Miglior colore del testo: #000000
WCAG 5.86:1 (AA) · APCA Lc 39
Contrast pairs
Frammenti di codice
CSS
:root {
--strawberry-avalanche: #ef4f41;
--strawberry-avalanche-rgb: 239 79 65;
--strawberry-avalanche-oklch: oklch(0.647 0.199 28.7);
}
.element {
color: var(--strawberry-avalanche);
background-color: hsl(5 84% 60%);
border-color: oklch(0.647 0.199 28.7);
}Tailwind CSS v4
@theme {
--color-strawberry-avalanche: #ef4f41;
--color-strawberry-avalanche-50: #ffe1d3;
--color-strawberry-avalanche-100: #ffd0c0;
--color-strawberry-avalanche-200: #ffb3a0;
--color-strawberry-avalanche-300: #ff8d77;
--color-strawberry-avalanche-400: #fe6656;
--color-strawberry-avalanche-500: #ed382d;
--color-strawberry-avalanche-600: #c83228;
--color-strawberry-avalanche-700: #a1281f;
--color-strawberry-avalanche-800: #781a18;
--color-strawberry-avalanche-900: #551110;
--color-strawberry-avalanche-950: #390203;
}SCSS
$strawberry-avalanche: #ef4f41;
$strawberry-avalanche-rgb: 239, 79, 65;
$strawberry-avalanche-light: mix(#fff, $strawberry-avalanche, 20%);
$strawberry-avalanche-dark: mix(#000, $strawberry-avalanche, 20%);
.element {
color: $strawberry-avalanche;
box-shadow: 0 0 0 2px rgba($strawberry-avalanche, 0.35);
}