Grapefruit

A soft pink palette: grapefruit background, burgundy text, coral accent. For food, lifestyle, and personal-brand sites that want warmth without sweetness.

softwarmmodernfriendlywarmplayful

Warmth That Stays Sharp with Grapefruit

Grapefruit is a food-friendly palette built for recipe sites, lifestyle newsletters, and brands that want to be friendly without being pastel. The coral background and the burgundy text create a warm, appetizing combination while keeping text contrast strong. The coral accent is brighter than the primary, so it works for the energetic moments, not for every button.

Burgundy handles body text and primary actions, and the coral pulls the eye to the single thing a page should do next. Food photography tends to include reds and oranges, so check the palette against your own imagery rather than assuming it will always harmonize. The white surface token gives recipe cards and pricing modules clean separation from the tinted canvas.

Palette colors

Every color role with HEX, RGB, HSL, and OKLCH values. Click any value to copy.

Background

rgb(252, 231, 225)

hsl(13, 82%, 94%)

oklch(94.3% 0.024 36.5)

Text

rgb(90, 26, 31)

hsl(355, 55%, 23%)

oklch(32.3% 0.094 19.7)

Primary

rgb(184, 50, 66)

hsl(353, 57%, 46%)

oklch(52.6% 0.170 18.8)

Secondary

rgb(242, 168, 158)

hsl(7, 76%, 78%)

oklch(80.0% 0.089 27.8)

Accent

rgb(255, 111, 97)

hsl(5, 100%, 69%)

oklch(71.5% 0.178 28.0)

Surface

rgb(255, 255, 255)

hsl(0, 0%, 100%)

oklch(100.0% 0.000 89.9)

Border

rgb(244, 205, 196)

hsl(11, 69%, 86%)

oklch(87.9% 0.046 33.2)

Muted

rgb(140, 90, 85)

hsl(5, 24%, 44%)

oklch(52.1% 0.067 25.9)

WCAG contrast checks

Three semantic pairs evaluated against WCAG 2.2 AA (4.5:1 for normal text).

Text on background

Ratio 11.02:1

AA pass

Primary on background

Ratio 4.94:1

AA pass

Accent on background

Ratio 2.29:1

Below AA

Export tokens

Six formats covering most design system workflows. Each copies cleanly to your clipboard.

tokens.css

:root {
  --color-background: #FCE7E1;
  --color-foreground: #5A1A1F;
  --color-primary: #B83242;
  --color-secondary: #F2A89E;
  --color-accent: #FF6F61;
  --color-surface: #FFFFFF;
  --color-border: #F4CDC4;
  --color-muted: #8C5A55;
}

Related Palettes

Rose Quartz

A soft rose palette: blush background, deep rose primary, lavender accent. For lifestyle, beauty, and personal-brand sites.

Editorial Cream

A warm editorial palette inspired by print magazines: cream paper, ink-black text, a brick-red primary, and a muted gold secondary.

Warm Sand

A warm neutral palette: sand background, brown primary, forest-green accent. For artisanal and craft brands.

Cyber Violet

A vivid cyber palette: deep violet canvas, electric purple primary, cyan accent. For bold creative and Web3 brands.