Benannte Farbe · #FD5956
Grapefruit
Grapefruit ist #FD5956: rgb(253 89 86), hsl(1 98% 66%), oklch(0.684 0.2 25). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Grapefruit color name →
#FD5956
oklch(0.684 0.2 25)
Farbumrechnungen
- HEX
- #fd5956
- RGB
- rgb(253 89 86)
- HSL
- hsl(1 98% 66%)
- HWB
- hwb(1 34% 1%)
- OKLCH
- oklch(0.684 0.2 25)
- OKLab
- oklab(0.684 0.181 0.085)
- CIE Lab
- lab(61.29 63.14 37.76)
- LCH
- lch(61.29 73.57 30.9)
- CMYK
- cmyk(0% 65% 66% 1%)
Tints · Shades · Tones
Tints
- FF6D67
- FF8078
- FF9189
- FFA299
- FFB2AA
- FFC1BB
- FFD1CC
- FFE0DD
- FFF0EE
Shades
- DC4C4A
- BC403E
- 9D3432
- 7F2827
- 621D1C
- 471312
- 2D0908
- 160302
- 030000
Tones
- F2605B
- E66660
- DA6B65
- CE7069
- C2746D
- B67771
- A97A75
- 9C7C79
- 8E7E7D
Farbharmonien
Komplementär +180°
- FD5956
Grapefruit
- 00ADBC
≈ Placid Sea
Analog -30° +30°
- FD5956
Grapefruit
- F2589F
≈ Oleander Pink
- E67700
≈ First of Fall
Triadisch +120° +240°
- FD5956
Grapefruit
- 27B73E
≈ Charming Nature
- 6694FF
≈ Blue Chaos
Geteilt komplementär +150° +210°
- FD5956
Grapefruit
- 00B395
≈ Aloha
- 00A6E5
≈ Huelveño Horizon
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.11:1 · APCA Lc 57
Ag
AAAuf Schwarz
WCAG 6.73:1 · APCA Lc 45
Beste Textfarbe: #000000
WCAG 6.73:1 (AA) · APCA Lc 45
Contrast pairs
Code-Snippets
CSS
:root {
--grapefruit: #fd5956;
--grapefruit-rgb: 253 89 86;
--grapefruit-oklch: oklch(0.684 0.2 25);
}
.element {
color: var(--grapefruit);
background-color: hsl(1 98% 66%);
border-color: oklch(0.684 0.2 25);
}Tailwind CSS v4
@theme {
--color-grapefruit: #fd5956;
--color-grapefruit-50: #ffe0d6;
--color-grapefruit-100: #ffcfc4;
--color-grapefruit-200: #ffb2a5;
--color-grapefruit-300: #ff8b7e;
--color-grapefruit-400: #ff645f;
--color-grapefruit-500: #ee343a;
--color-grapefruit-600: #c92f32;
--color-grapefruit-700: #a22628;
--color-grapefruit-800: #79191f;
--color-grapefruit-900: #551014;
--color-grapefruit-950: #390206;
}SCSS
$grapefruit: #fd5956;
$grapefruit-rgb: 253, 89, 86;
$grapefruit-light: mix(#fff, $grapefruit, 20%);
$grapefruit-dark: mix(#000, $grapefruit, 20%);
.element {
color: $grapefruit;
box-shadow: 0 0 0 2px rgba($grapefruit, 0.35);
}