Couleur nommée · #E56131
Startling Orange
Startling Orange correspond à #E56131 : rgb(229 97 49), hsl(16 78% 55%), oklch(0.652 0.175 39.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Red mean? → · Startling Orange color name →
#E56131
oklch(0.652 0.175 39.3)
Conversions de couleur
- HEX
- #e56131
- RGB
- rgb(229 97 49)
- HSL
- hsl(16 78% 55%)
- HWB
- hwb(16 19% 10%)
- OKLCH
- oklch(0.652 0.175 39.3)
- OKLab
- oklab(0.652 0.136 0.111)
- CIE Lab
- lab(58.22 50.53 52.42)
- LCH
- lch(58.22 72.81 46.1)
- CMYK
- cmyk(0% 58% 79% 10%)
Teintes · Ombres · Tons
Teintes
- EA734A
- EE835F
- F29474
- F5A388
- F8B39C
- FBC2AF
- FDD2C3
- FEE1D7
- FFF0EB
Ombres
- C75329
- AA4622
- 8E391A
- 722D13
- 58210C
- 3F1506
- 280B03
- 120301
- 030000
Tons
- DC663D
- D26B47
- C96F50
- BF7258
- B67560
- AC7867
- A17A6D
- 977D74
- 8C7E7A
Harmonies de couleurs
Complémentaire +180°
- E56131
Startling Orange
- 00A0C1
≈ Delos Blue
Analogue -30° +30°
- E56131
Startling Orange
- E55878
≈ Highlighter Pink
- C67D00
≈ Bamboo Brown
Triadique +120° +240°
- E56131
Startling Orange
- 00AA6E
≈ Banaue Jade
- 7C7FF7
≈ Orchid
Complémentaire divisée +150° +210°
- E56131
Startling Orange
- 00A59E
≈ Jadestone
- 1493F5
≈ Karimun Blue
Tétradique +90° +180° +270°
- E56131
Startling Orange
- 6DA300
≈ Herbal Lift
- 00A0C1
≈ Delos Blue
- AF6CDF
≈ Lavender
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.45:1 · APCA Lc 61
Ag
AASur noir
WCAG 6.08:1 · APCA Lc 40
Meilleure couleur de texte: #000000
WCAG 6.08:1 (AA) · APCA Lc 40
Contrast pairs
Extraits de code
CSS
:root {
--startling-orange: #e56131;
--startling-orange-rgb: 229 97 49;
--startling-orange-oklch: oklch(0.652 0.175 39.3);
}
.element {
color: var(--startling-orange);
background-color: hsl(16 78% 55%);
border-color: oklch(0.652 0.175 39.3);
}Tailwind CSS v4
@theme {
--color-startling-orange: #e56131;
--color-startling-orange-50: #ffe5cf;
--color-startling-orange-100: #ffd5bb;
--color-startling-orange-200: #ffbb99;
--color-startling-orange-300: #ff976e;
--color-startling-orange-400: #f27448;
--color-startling-orange-500: #e14f0c;
--color-startling-orange-600: #be4411;
--color-startling-orange-700: #99360e;
--color-startling-orange-800: #72250c;
--color-startling-orange-900: #511908;
--color-startling-orange-950: #350800;
}SCSS
$startling-orange: #e56131;
$startling-orange-rgb: 229, 97, 49;
$startling-orange-light: mix(#fff, $startling-orange, 20%);
$startling-orange-dark: mix(#000, $startling-orange, 20%);
.element {
color: $startling-orange;
box-shadow: 0 0 0 2px rgba($startling-orange, 0.35);
}