What are the hex codes in the Indigo & Terracotta Field palette?

The Indigo & Terracotta Field color palette consists of Indigo #4B1263, Terracotta #D77257, Cantaloupe #F1B86B, Vanilla #F0EBB6.

How should I use the Indigo & Terracotta Field palette on a website?

Use Vanilla #F0EBB6 as the background, Indigo #4B1263 for text, Cantaloupe #F1B86B for buttons and links, and Terracotta #D77257 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Indigo on Vanilla at 11.03:1.

Which colors in Indigo & Terracotta Field have enough contrast for text?

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

#4B1263Indigo

#D77257Terracotta

#F1B86BCantaloupe

#F0EBB6Vanilla

Indigo & Terracotta Field color palette

Sunset Purple Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Indigo	`#4B1263`	`rgb(75, 18, 99)`	`hsl(282, 69%, 23%)`	`oklch(32.2% 0.137 313)`
Terracotta	`#D77257`	`rgb(215, 114, 87)`	`hsl(13, 62%, 59%)`	`oklch(66.2% 0.133 36)`
Cantaloupe	`#F1B86B`	`rgb(241, 184, 107)`	`hsl(34, 83%, 68%)`	`oklch(81.9% 0.115 73)`
Vanilla	`#F0EBB6`	`rgb(240, 235, 182)`	`hsl(55, 66%, 83%)`	`oklch(93.1% 0.069 103)`

Why it works and how to use it

Indigo & Terracotta Field is a vivid complementary color palette tagged sunset, purple, orange. Near-complementary hues (about 133° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.

With 4 chromatic colors, Cantaloupe takes the lead while the rest support. Lightness runs from 23% to 83%. Well suited to websites, presentations and branding.

Background: Vanilla (#F0EBB6) is the lightest color, so it belongs on large surfaces.
Text: Indigo (#4B1263) on #F0EBB6 gives 11.03:1, passing WCAG AAA.
Primary: Cantaloupe (#F1B86B) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Terracotta (#D77257) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Indigo on Vanilla at 11.03:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Indigo & Terracotta Field

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

#4B1263

#D77257

#F1B86B

#F0EBB6

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
`#4B1263` on `#F0EBB6`	Aa	11.03:1	AAA
`#4B1263` on `#F1B86B`	Aa	7.54:1	AAA
`#4B1263` on `#D77257`	Aa	4.11:1	AA large only
`#D77257` on `#F0EBB6`	Aa	2.68:1	Fail
`#D77257` on `#F1B86B`	Aa	1.84:1	Fail
`#F1B86B` on `#F0EBB6`	Aa	1.46:1	Fail

:root {
  --indigo: #4B1263;
  --terracotta: #D77257;
  --cantaloupe: #F1B86B;
  --vanilla: #F0EBB6;
}

$indigo: #4B1263;
$terracotta: #D77257;
$cantaloupe: #F1B86B;
$vanilla: #F0EBB6;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'indigo': '#4B1263',
        'terracotta': '#D77257',
        'cantaloupe': '#F1B86B',
        'vanilla': '#F0EBB6',
      },
    },
  },
};

{
  "name": "Indigo & Terracotta Field",
  "colors": [
    "#4B1263",
    "#D77257",
    "#F1B86B",
    "#F0EBB6"
  ]
}

background: linear-gradient(135deg, #4B1263, #D77257, #F1B86B, #F0EBB6);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-12-16 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood