What are the hex codes in the True Eucalyptus & Steel Blue palette?

The True Eucalyptus & Steel Blue color palette consists of Charcoal #2E3A66, Steel Blue #5C6BA6, Eucalyptus #5EC4BE, Linen #F5EFE4.

How should I use the True Eucalyptus & Steel Blue palette on a website?

Use Linen #F5EFE4 as the background, Charcoal #2E3A66 for text, Eucalyptus #5EC4BE for buttons and links, and Steel Blue #5C6BA6 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Linen at 9.59:1.

Which colors in True Eucalyptus & Steel Blue have enough contrast for text?

The highest-contrast pair is #2E3A66 on #F5EFE4 with a ratio of 9.59:1, which passes WCAG AA for normal text.

#2E3A66Charcoal

#5C6BA6Steel Blue

#5EC4BEEucalyptus

#F5EFE4Linen

True Eucalyptus & Steel Blue color palette

Muted Cold Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Charcoal	`#2E3A66`	`rgb(46, 58, 102)`	`hsl(227, 38%, 29%)`	`oklch(36.1% 0.078 271)`
Steel Blue	`#5C6BA6`	`rgb(92, 107, 166)`	`hsl(228, 29%, 51%)`	`oklch(54.1% 0.094 272)`
Eucalyptus	`#5EC4BE`	`rgb(94, 196, 190)`	`hsl(176, 46%, 57%)`	`oklch(75.8% 0.096 190)`
Linen	`#F5EFE4`	`rgb(245, 239, 228)`	`hsl(39, 46%, 93%)`	`oklch(95.4% 0.016 83)`

Why it works and how to use it

True Eucalyptus & Steel Blue is a complementary color palette tagged muted, cold, blue. Near-complementary hues (about 172° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Eucalyptus takes the lead while the rest support. Lightness runs from 29% to 93%. Well suited to websites, presentations and branding.

Background: Linen (#F5EFE4) is the lightest color, so it belongs on large surfaces.
Text: Charcoal (#2E3A66) on #F5EFE4 gives 9.59:1, passing WCAG AAA.
Primary: Eucalyptus (#5EC4BE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Steel Blue (#5C6BA6) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with True Eucalyptus & Steel Blue

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

#2E3A66

#5C6BA6

#5EC4BE

#F5EFE4

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
`#2E3A66` on `#F5EFE4`	Aa	9.59:1	AAA
`#2E3A66` on `#5EC4BE`	Aa	5.29:1	AA
`#5C6BA6` on `#F5EFE4`	Aa	4.47:1	AA large only
`#5C6BA6` on `#5EC4BE`	Aa	2.46:1	Fail
`#2E3A66` on `#5C6BA6`	Aa	2.15:1	Fail
`#5EC4BE` on `#F5EFE4`	Aa	1.81:1	Fail

:root {
  --charcoal: #2E3A66;
  --steel-blue: #5C6BA6;
  --eucalyptus: #5EC4BE;
  --linen: #F5EFE4;
}

$charcoal: #2E3A66;
$steel-blue: #5C6BA6;
$eucalyptus: #5EC4BE;
$linen: #F5EFE4;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'charcoal': '#2E3A66',
        'steel-blue': '#5C6BA6',
        'eucalyptus': '#5EC4BE',
        'linen': '#F5EFE4',
      },
    },
  },
};

{
  "name": "True Eucalyptus & Steel Blue",
  "colors": [
    "#2E3A66",
    "#5C6BA6",
    "#5EC4BE",
    "#F5EFE4"
  ]
}

background: linear-gradient(135deg, #2E3A66, #5C6BA6, #5EC4BE, #F5EFE4);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

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

Similar palettes 24 more in this mood