Benannte Farbe · #F08F48
Melon Orange
Melon Orange ist #F08F48: rgb(240 143 72), hsl(25 85% 61%), oklch(0.74 0.145 54.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Melon Orange color name →
#F08F48
oklch(0.74 0.145 54.3)
Farbumrechnungen
- HEX
- #f08f48
- RGB
- rgb(240 143 72)
- HSL
- hsl(25 85% 61%)
- HWB
- hwb(25 28% 6%)
- OKLCH
- oklch(0.74 0.145 54.3)
- OKLab
- oklab(0.74 0.085 0.118)
- CIE Lab
- lab(69.09 33.58 52.93)
- LCH
- lch(69.09 62.68 57.6)
- CMYK
- cmyk(0% 40% 70% 6%)
Tints · Shades · Tones
Tints
- F39B5D
- F5A671
- F7B284
- F9BD96
- FBC8A7
- FCD3B9
- FDDECB
- FEE9DC
- FFF4ED
Shades
- D17C3D
- B26933
- 955729
- 78451F
- 5D3416
- 43240D
- 2A1506
- 140702
- 030100
Tones
- E58E51
- DA8D58
- CF8C5F
- C48B65
- B9896A
- AE886F
- A28674
- 978478
- 8C827C
Farbharmonien
Komplementär +180°
- F08F48
Melon Orange
- 2BB8F8
≈ Blue Bolt
Analog -30° +30°
- F08F48
Melon Orange
- F9837D
≈ Congo Pink
- D5A21E
≈ Mustard Musketeers
Triadisch +120° +240°
- F08F48
Melon Orange
- 00C7A5
≈ Jadeite
- B197FD
≈ Cobalite
Geteilt komplementär +150° +210°
- F08F48
Melon Orange
- 00C1D0
≈ The Crowd Roars!
- 80A9FF
≈ Fennel Flower
Tetradisch +90° +180° +270°
- F08F48
Melon Orange
- 6CC26E
≈ Bermudagrass
- 2BB8F8
≈ Blue Bolt
- D889DE
≈ Blush Essence
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.40:1 · APCA Lc 47
Ag
AAAAuf Schwarz
WCAG 8.72:1 · APCA Lc 55
Beste Textfarbe: #000000
WCAG 8.72:1 (AAA) · APCA Lc 55
Contrast pairs
Code-Snippets
CSS
:root {
--melon-orange: #f08f48;
--melon-orange-rgb: 240 143 72;
--melon-orange-oklch: oklch(0.74 0.145 54.3);
}
.element {
color: var(--melon-orange);
background-color: hsl(25 85% 61%);
border-color: oklch(0.74 0.145 54.3);
}Tailwind CSS v4
@theme {
--color-melon-orange: #f08f48;
--color-melon-orange-50: #ffebce;
--color-melon-orange-100: #ffdcb9;
--color-melon-orange-200: #ffc597;
--color-melon-orange-300: #f0a36b;
--color-melon-orange-400: #df8442;
--color-melon-orange-500: #cd6600;
--color-melon-orange-600: #ad5700;
--color-melon-orange-700: #8b4502;
--color-melon-orange-800: #683104;
--color-melon-orange-900: #492103;
--color-melon-orange-950: #301000;
}SCSS
$melon-orange: #f08f48;
$melon-orange-rgb: 240, 143, 72;
$melon-orange-light: mix(#fff, $melon-orange, 20%);
$melon-orange-dark: mix(#000, $melon-orange, 20%);
.element {
color: $melon-orange;
box-shadow: 0 0 0 2px rgba($melon-orange, 0.35);
}