Benannte Farbe · #F4581E
Prometheus Orange
Prometheus Orange ist #F4581E: rgb(244 88 30), hsl(16 91% 54%), oklch(0.663 0.202 38.2). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Prometheus Orange color name →
#F4581E
oklch(0.663 0.202 38.2)
Farbumrechnungen
- HEX
- #f4581e
- RGB
- rgb(244 88 30)
- HSL
- hsl(16 91% 54%)
- HWB
- hwb(16 12% 4%)
- OKLCH
- oklch(0.663 0.202 38.2)
- OKLab
- oklab(0.663 0.159 0.125)
- CIE Lab
- lab(59.16 59.18 62.36)
- LCH
- lch(59.16 85.97 46.5)
- CMYK
- cmyk(0% 64% 88% 4%)
Tints · Shades · Tones
Tints
- F86C3F
- FB7F57
- FE906E
- FFA183
- FFB198
- FFC1AC
- FFD1C1
- FFE0D6
- FFF0EA
Shades
- D44B19
- B53F13
- 97330E
- 7A2809
- 5E1D05
- 441203
- 2B0901
- 140300
- 030000
Tones
- E95F31
- DF653E
- D46B49
- C96F53
- BE735C
- B27764
- A6796B
- 9A7C72
- 8D7E79
Farbharmonien
Komplementär +180°
- F4581E
Prometheus Orange
- 00A4C3
≈ Scuba Blue
Analog -30° +30°
- F4581E
Prometheus Orange
- F34E7B
≈ Bonker Pink
- CC7F00
≈ Bamboo Brown
Triadisch +120° +240°
- F4581E
Prometheus Orange
- 00AE6E
≈ Jade Powder
- 7C82FF
≈ Orchid
Geteilt komplementär +150° +210°
- F4581E
Prometheus Orange
- 00A9A0
≈ Tropical Hideaway
- 0097FA
≈ Starfleet Blue
Tetradisch +90° +180° +270°
- F4581E
Prometheus Orange
- 73A600
≈ Christi
- 00A4C3
≈ Scuba Blue
- B668F0
≈ Queer Purple
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.35:1 · APCA Lc 60
Ag
AAAuf Schwarz
WCAG 6.26:1 · APCA Lc 42
Beste Textfarbe: #000000
WCAG 6.26:1 (AA) · APCA Lc 42
Contrast pairs
Code-Snippets
CSS
:root {
--prometheus-orange: #f4581e;
--prometheus-orange-rgb: 244 88 30;
--prometheus-orange-oklch: oklch(0.663 0.202 38.2);
}
.element {
color: var(--prometheus-orange);
background-color: hsl(16 91% 54%);
border-color: oklch(0.663 0.202 38.2);
}Tailwind CSS v4
@theme {
--color-prometheus-orange: #f4581e;
--color-prometheus-orange-50: #ffe2ca;
--color-prometheus-orange-100: #ffd2b5;
--color-prometheus-orange-200: #ffb691;
--color-prometheus-orange-300: #ff9063;
--color-prometheus-orange-400: #fd6938;
--color-prometheus-orange-500: #ed3d00;
--color-prometheus-orange-600: #c83600;
--color-prometheus-orange-700: #a12b00;
--color-prometheus-orange-800: #781c00;
--color-prometheus-orange-900: #551301;
--color-prometheus-orange-950: #390300;
}SCSS
$prometheus-orange: #f4581e;
$prometheus-orange-rgb: 244, 88, 30;
$prometheus-orange-light: mix(#fff, $prometheus-orange, 20%);
$prometheus-orange-dark: mix(#000, $prometheus-orange, 20%);
.element {
color: $prometheus-orange;
box-shadow: 0 0 0 2px rgba($prometheus-orange, 0.35);
}