What are the hex codes in the Tulip & Terracotta Breeze palette?

The Tulip & Terracotta Breeze color palette consists of Terracotta #D1756E, Tulip #FF9B98, Linen #F5ECEC, Graphite #4A4A4A.

How should I use the Tulip & Terracotta Breeze palette on a website?

Use Linen #F5ECEC as the background, Graphite #4A4A4A for text, Tulip #FF9B98 for buttons and links, and Terracotta #D1756E for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Graphite at 7.64:1.

Which colors in Tulip & Terracotta Breeze have enough contrast for text?

The highest-contrast pair is #F5ECEC on #4A4A4A with a ratio of 7.64:1, which passes WCAG AA for normal text.

#D1756ETerracotta

#FF9B98Tulip

#F5ECECLinen

#4A4A4AGraphite

Tulip & Terracotta Breeze color palette

2026 Trends Warm Pink White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Terracotta	`#D1756E`	`rgb(209, 117, 110)`	`hsl(4, 52%, 63%)`	`oklch(66.3% 0.117 25)`
Tulip	`#FF9B98`	`rgb(255, 155, 152)`	`hsl(2, 100%, 80%)`	`oklch(79.1% 0.120 22)`
Linen	`#F5ECEC`	`rgb(245, 236, 236)`	`hsl(0, 31%, 94%)`	`oklch(95.0% 0.010 17)`
Graphite	`#4A4A4A`	`rgb(74, 74, 74)`	`hsl(0, 0%, 29%)`	`oklch(40.9% 0.000 0)`

Why it works and how to use it

Tulip & Terracotta Breeze is a monochromatic color palette tagged 2026 trends, warm, pink. All four colors sit within 4° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 3 chromatic colors, Tulip takes the lead while the rest support. Lightness runs from 29% to 94%. Well suited to websites, presentations and branding.

Background: Linen (#F5ECEC) is the lightest color, so it belongs on large surfaces.
Text: Graphite (#4A4A4A) on #F5ECEC gives 7.64:1, passing WCAG AAA.
Primary: Tulip (#FF9B98) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Terracotta (#D1756E) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Graphite at 7.64:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Tulip & Terracotta Breeze

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#D1756E

#FF9B98

#F5ECEC

#4A4A4A

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#F5ECEC` on `#4A4A4A`	Aa	7.64:1	AAA
`#FF9B98` on `#4A4A4A`	Aa	4.39:1	AA large only
`#D1756E` on `#F5ECEC`	Aa	2.79:1	Fail
`#D1756E` on `#4A4A4A`	Aa	2.73:1	Fail
`#FF9B98` on `#F5ECEC`	Aa	1.74:1	Fail
`#D1756E` on `#FF9B98`	Aa	1.6:1	Fail

:root {
  --terracotta: #D1756E;
  --tulip: #FF9B98;
  --linen: #F5ECEC;
  --graphite: #4A4A4A;
}

$terracotta: #D1756E;
$tulip: #FF9B98;
$linen: #F5ECEC;
$graphite: #4A4A4A;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'terracotta': '#D1756E',
        'tulip': '#FF9B98',
        'linen': '#F5ECEC',
        'graphite': '#4A4A4A',
      },
    },
  },
};

{
  "name": "Tulip & Terracotta Breeze",
  "colors": [
    "#D1756E",
    "#FF9B98",
    "#F5ECEC",
    "#4A4A4A"
  ]
}

background: linear-gradient(135deg, #D1756E, #FF9B98, #F5ECEC, #4A4A4A);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-05-01 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood