Couleur nommée · #E67A37
Spiced up Orange
Spiced up Orange correspond à #E67A37 : rgb(230 122 55), hsl(23 78% 56%), oklch(0.691 0.155 49.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Orange mean? → · Spiced up Orange color name →
#E67A37
oklch(0.691 0.155 49.3)
Conversions de couleur
- HEX
- #e67a37
- RGB
- rgb(230 122 55)
- HSL
- hsl(23 78% 56%)
- HWB
- hwb(23 22% 10%)
- OKLCH
- oklch(0.691 0.155 49.3)
- OKLab
- oklab(0.691 0.101 0.118)
- CIE Lab
- lab(63.17 39.41 54.34)
- LCH
- lch(63.17 67.13 54.1)
- CMYK
- cmyk(0% 47% 76% 10%)
Teintes · Ombres · Tons
Teintes
- EA884F
- EE9665
- F1A379
- F4B18C
- F7BEA0
- F9CBB3
- FBD8C6
- FDE5D9
- FEF2EC
Ombres
- C8692E
- AB5926
- 8E491E
- 733A16
- 592B0F
- 401D08
- 281003
- 130501
- 030100
Tons
- DC7C43
- D37D4C
- C97E55
- BF7F5C
- B58063
- AB806A
- A08070
- 968175
- 8B807B
Harmonies de couleurs
Complémentaire +180°
- E67A37
Spiced up Orange
- 00AADF
≈ Blue Fire
Analogue -30° +30°
- E67A37
Spiced up Orange
- EC6F74
≈ Zahri Pink
- CA8F00
≈ Festering Brown
Triadique +120° +240°
- E67A37
Spiced up Orange
- 00B68D
≈ Chromophobia Green
- 9A89F4
≈ Lavender Blue Shadow
Complémentaire divisée +150° +210°
- E67A37
Spiced up Orange
- 00B1B7
≈ Mermaid Treasure
- 5E9AFA
≈ Blue Chaos
Tétradique +90° +180° +270°
- E67A37
Spiced up Orange
- 64B24F
≈ Sour Candy
- 00AADF
≈ Blue Fire
- C479D8
≈ Purple Kush
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.91:1 · APCA Lc 55
Ag
AAASur noir
WCAG 7.20:1 · APCA Lc 47
Meilleure couleur de texte: #000000
WCAG 7.20:1 (AAA) · APCA Lc 47
Contrast pairs
Extraits de code
CSS
:root {
--spiced-up-orange: #e67a37;
--spiced-up-orange-rgb: 230 122 55;
--spiced-up-orange-oklch: oklch(0.691 0.155 49.3);
}
.element {
color: var(--spiced-up-orange);
background-color: hsl(23 78% 56%);
border-color: oklch(0.691 0.155 49.3);
}Tailwind CSS v4
@theme {
--color-spiced-up-orange: #e67a37;
--color-spiced-up-orange-50: #ffe9cd;
--color-spiced-up-orange-100: #ffdab9;
--color-spiced-up-orange-200: #ffc297;
--color-spiced-up-orange-300: #f69f6b;
--color-spiced-up-orange-400: #e67f42;
--color-spiced-up-orange-500: #d45f00;
--color-spiced-up-orange-600: #b35100;
--color-spiced-up-orange-700: #904103;
--color-spiced-up-orange-800: #6c2d05;
--color-spiced-up-orange-900: #4c1f04;
--color-spiced-up-orange-950: #320e00;
}SCSS
$spiced-up-orange: #e67a37;
$spiced-up-orange-rgb: 230, 122, 55;
$spiced-up-orange-light: mix(#fff, $spiced-up-orange, 20%);
$spiced-up-orange-dark: mix(#000, $spiced-up-orange, 20%);
.element {
color: $spiced-up-orange;
box-shadow: 0 0 0 2px rgba($spiced-up-orange, 0.35);
}