Couleur nommée · #DE8F4E
Jasper Orange
Jasper Orange correspond à #DE8F4E : rgb(222 143 78), hsl(27 69% 59%), oklch(0.718 0.125 58.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Orange mean? → · Jasper Orange color name →
#DE8F4E
oklch(0.718 0.125 58.3)
Conversions de couleur
- HEX
- #de8f4e
- RGB
- rgb(222 143 78)
- HSL
- hsl(27 69% 59%)
- HWB
- hwb(27 31% 13%)
- OKLCH
- oklch(0.718 0.125 58.3)
- OKLab
- oklab(0.718 0.066 0.107)
- CIE Lab
- lab(66.83 26.51 46.81)
- LCH
- lch(66.83 53.8 60.5)
- CMYK
- cmyk(0% 36% 65% 13%)
Teintes · Ombres · Tons
Teintes
- E29A62
- E6A674
- EAB186
- EEBC97
- F1C7A9
- F4D3BA
- F7DECB
- FAE9DC
- FDF4EE
Ombres
- C17C43
- A56938
- 89572D
- 6F4523
- 553419
- 3D240F
- 261507
- 120702
- 020100
Tons
- D58E55
- CB8D5C
- C28C62
- B98A67
- B0896C
- A68770
- 9D8675
- 938479
- 8A827C
Harmonies de couleurs
Complémentaire +180°
- DE8F4E
Jasper Orange
- 4CAEE9
≈ Blue Jeans
Analogue -30° +30°
- DE8F4E
Jasper Orange
- E88477
≈ Cultured Rose
- C49F39
≈ Golden Field
Triadique +120° +240°
- DE8F4E
Jasper Orange
- 24BDA4
≈ First Post
- AE92E8
≈ Dreamy Candy Forest
Complémentaire divisée +150° +210°
- DE8F4E
Jasper Orange
- 00B9CD
≈ Utopia Beckons
- 83A0F3
≈ Periwinkle Blue
Tétradique +90° +180° +270°
- DE8F4E
Jasper Orange
- 68BA77
≈ Citronella
- 4CAEE9
≈ Blue Jeans
- CF87CB
≈ Purception
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.57:1 · APCA Lc 50
Ag
AAASur noir
WCAG 8.14:1 · APCA Lc 52
Meilleure couleur de texte: #000000
WCAG 8.14:1 (AAA) · APCA Lc 52
Contrast pairs
Extraits de code
CSS
:root {
--jasper-orange: #de8f4e;
--jasper-orange-rgb: 222 143 78;
--jasper-orange-oklch: oklch(0.718 0.125 58.3);
}
.element {
color: var(--jasper-orange);
background-color: hsl(27 69% 59%);
border-color: oklch(0.718 0.125 58.3);
}Tailwind CSS v4
@theme {
--color-jasper-orange: #de8f4e;
--color-jasper-orange-50: #ffeed2;
--color-jasper-orange-100: #ffdfbe;
--color-jasper-orange-200: #fdc89e;
--color-jasper-orange-300: #e7a874;
--color-jasper-orange-400: #d58b4e;
--color-jasper-orange-500: #c26e1c;
--color-jasper-orange-600: #a45d1b;
--color-jasper-orange-700: #844b16;
--color-jasper-orange-800: #62350f;
--color-jasper-orange-900: #452409;
--color-jasper-orange-950: #2d1300;
}SCSS
$jasper-orange: #de8f4e;
$jasper-orange-rgb: 222, 143, 78;
$jasper-orange-light: mix(#fff, $jasper-orange, 20%);
$jasper-orange-dark: mix(#000, $jasper-orange, 20%);
.element {
color: $jasper-orange;
box-shadow: 0 0 0 2px rgba($jasper-orange, 0.35);
}