What are the hex codes in the Coral Reef palette?

The Coral Reef color palette consists of Charcoal #264653, Cadet #2A9D8F, Terracotta #E76F51, Cantaloupe #F4A261.

How should I use the Coral Reef palette on a website?

Use Cantaloupe #F4A261 as the background, Charcoal #264653 for text, Terracotta #E76F51 for buttons and links, and Cadet #2A9D8F for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Cantaloupe at 4.89:1.

Which colors in Coral Reef have enough contrast for text?

The highest-contrast pair is #264653 on #F4A261 with a ratio of 4.89:1, which passes WCAG AA for normal text.

#264653Charcoal

#2A9D8FCadet

#E76F51Terracotta

#F4A261Cantaloupe

Coral Reef color palette

Ocean Retro Teal Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Charcoal	`#264653`	`rgb(38, 70, 83)`	`hsl(197, 37%, 24%)`	`oklch(37.5% 0.044 226)`
Cadet	`#2A9D8F`	`rgb(42, 157, 143)`	`hsl(173, 58%, 39%)`	`oklch(63.0% 0.101 183)`
Terracotta	`#E76F51`	`rgb(231, 111, 81)`	`hsl(12, 76%, 61%)`	`oklch(67.8% 0.156 35)`
Cantaloupe	`#F4A261`	`rgb(244, 162, 97)`	`hsl(27, 87%, 67%)`	`oklch(78.1% 0.127 58)`

Why it works and how to use it

Coral Reef is a vivid complementary color palette tagged ocean, retro, teal. Charcoal and Cantaloupe sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Terracotta takes the lead while the rest support. Lightness runs from 24% to 67%. Well suited to websites, presentations and branding.

Background: Cantaloupe (#F4A261) is the lightest color, so it belongs on large surfaces.
Text: Charcoal (#264653) on #F4A261 gives 4.89:1, passing WCAG AA.
Primary: Terracotta (#E76F51) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cadet (#2A9D8F) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Cantaloupe at 4.89:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Coral Reef

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

#264653

#2A9D8F

#E76F51

#F4A261

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
`#264653` on `#F4A261`	Aa	4.89:1	AA
`#264653` on `#E76F51`	Aa	3.26:1	AA large only
`#264653` on `#2A9D8F`	Aa	3.03:1	AA large only
`#2A9D8F` on `#F4A261`	Aa	1.61:1	Fail
`#E76F51` on `#F4A261`	Aa	1.5:1	Fail
`#2A9D8F` on `#E76F51`	Aa	1.07:1	Fail

:root {
  --charcoal: #264653;
  --cadet: #2A9D8F;
  --terracotta: #E76F51;
  --cantaloupe: #F4A261;
}

$charcoal: #264653;
$cadet: #2A9D8F;
$terracotta: #E76F51;
$cantaloupe: #F4A261;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'charcoal': '#264653',
        'cadet': '#2A9D8F',
        'terracotta': '#E76F51',
        'cantaloupe': '#F4A261',
      },
    },
  },
};

{
  "name": "Coral Reef",
  "colors": [
    "#264653",
    "#2A9D8F",
    "#E76F51",
    "#F4A261"
  ]
}

background: linear-gradient(135deg, #264653, #2A9D8F, #E76F51, #F4A261);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-08-06 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood