Benannte Farbe · #E85112
Retro Orange
Retro Orange ist #E85112: rgb(232 81 18), hsl(18 86% 49%), oklch(0.635 0.197 38.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Retro Orange color name →
#E85112
oklch(0.635 0.197 38.7)
Farbumrechnungen
- HEX
- #e85112
- RGB
- rgb(232 81 18)
- HSL
- hsl(18 86% 49%)
- HWB
- hwb(18 7% 9%)
- OKLCH
- oklch(0.635 0.197 38.7)
- OKLab
- oklab(0.635 0.154 0.124)
- CIE Lab
- lab(55.98 57.75 62.98)
- LCH
- lch(55.98 85.45 47.5)
- CMYK
- cmyk(0% 65% 92% 9%)
Tints · Shades · Tones
Tints
- ED6638
- F17951
- F58B69
- F99C7F
- FBAD94
- FDBEA9
- FFCEBF
- FFDFD4
- FFEFE9
Shades
- CA450E
- AC3A0A
- 902F07
- 742404
- 591A02
- 401001
- 290701
- 130200
- 030000
Tones
- DF5929
- D56038
- CC6644
- C26B4F
- B87058
- AE7461
- A37769
- 987B71
- 8C7D79
Farbharmonien
Komplementär +180°
- E85112
Retro Orange
- 009AB9
≈ Serene Blue
Analog -30° +30°
- E85112
Retro Orange
- E74772
≈ Radishical
- C07800
≈ Cassandra’s Curse
Triadisch +120° +240°
- E85112
Retro Orange
- 00A469
≈ Green Haze
- 7576FE
≈ Stargate Shimmer
Geteilt komplementär +150° +210°
- E85112
Retro Orange
- 009F98
≈ Spectra Green
- 008EEE
≈ Bleu de France
Tetradisch +90° +180° +270°
- E85112
Retro Orange
- 6B9D00
≈ Gecko’s Dream
- 009AB9
≈ Serene Blue
- AD61E4
≈ Violet Voltage
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.73:1 · APCA Lc 64
Ag
AAAuf Schwarz
WCAG 5.61:1 · APCA Lc 38
Beste Textfarbe: #000000
WCAG 5.61:1 (AA) · APCA Lc 38
Contrast pairs
Code-Snippets
CSS
:root {
--retro-orange: #e85112;
--retro-orange-rgb: 232 81 18;
--retro-orange-oklch: oklch(0.635 0.197 38.7);
}
.element {
color: var(--retro-orange);
background-color: hsl(18 86% 49%);
border-color: oklch(0.635 0.197 38.7);
}Tailwind CSS v4
@theme {
--color-retro-orange: #e85112;
--color-retro-orange-50: #ffe3ca;
--color-retro-orange-100: #ffd2b5;
--color-retro-orange-200: #ffb792;
--color-retro-orange-300: #ff9164;
--color-retro-orange-400: #fb6b3a;
--color-retro-orange-500: #ea4000;
--color-retro-orange-600: #c63900;
--color-retro-orange-700: #9f2d00;
--color-retro-orange-800: #771e00;
--color-retro-orange-900: #541401;
--color-retro-orange-950: #380400;
}SCSS
$retro-orange: #e85112;
$retro-orange-rgb: 232, 81, 18;
$retro-orange-light: mix(#fff, $retro-orange, 20%);
$retro-orange-dark: mix(#000, $retro-orange, 20%);
.element {
color: $retro-orange;
box-shadow: 0 0 0 2px rgba($retro-orange, 0.35);
}