What are the hex codes in the Eucalyptus & Saffron Sky palette?

The Eucalyptus & Saffron Sky color palette consists of Basil #3C923F, Basil #7E981A, Saffron #E2CA49, Eucalyptus #00EFB2.

How should I use the Eucalyptus & Saffron Sky palette on a website?

Use Eucalyptus #00EFB2 as the background, Basil #3C923F for text, Saffron #E2CA49 for buttons and links, and Basil #7E981A for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Eucalyptus & Saffron Sky have enough contrast for text?

The highest-contrast pair is #3C923F on #00EFB2 with a ratio of 2.6:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#3C923FBasil

#7E981ABasil

#E2CA49Saffron

#00EFB2Eucalyptus

Eucalyptus & Saffron Sky color palette

Retro Green Yellow

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Basil	`#3C923F`	`rgb(60, 146, 63)`	`hsl(122, 42%, 40%)`	`oklch(58.8% 0.146 144)`
Basil	`#7E981A`	`rgb(126, 152, 26)`	`hsl(72, 71%, 35%)`	`oklch(63.7% 0.145 121)`
Saffron	`#E2CA49`	`rgb(226, 202, 73)`	`hsl(51, 73%, 59%)`	`oklch(83.6% 0.147 99)`
Eucalyptus	`#00EFB2`	`rgb(0, 239, 178)`	`hsl(165, 100%, 47%)`	`oklch(84.4% 0.175 166)`

Why it works and how to use it

Eucalyptus & Saffron Sky is a vivid split color palette tagged retro, green, yellow. A split scheme: Basil plays against Eucalyptus across roughly 114° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Saffron takes the lead while the rest support. Lightness runs from 35% to 59%. Well suited to websites, presentations and branding.

Background: Eucalyptus (#00EFB2) is the lightest color, so it belongs on large surfaces.
Text: Basil (#3C923F) on #00EFB2 gives 2.6:1, so pair it with a darker neutral for body copy.
Primary: Saffron (#E2CA49) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Basil (#7E981A) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Eucalyptus & Saffron Sky

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

#3C923F

#7E981A

#E2CA49

#00EFB2

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
`#3C923F` on `#00EFB2`	Aa	2.6:1	Fail
`#3C923F` on `#E2CA49`	Aa	2.38:1	Fail
`#7E981A` on `#00EFB2`	Aa	2.19:1	Fail
`#7E981A` on `#E2CA49`	Aa	2:1	Fail
`#3C923F` on `#7E981A`	Aa	1.19:1	Fail
`#E2CA49` on `#00EFB2`	Aa	1.09:1	Fail

:root {
  --basil: #3C923F;
  --basil-2: #7E981A;
  --saffron: #E2CA49;
  --eucalyptus: #00EFB2;
}

$basil: #3C923F;
$basil-2: #7E981A;
$saffron: #E2CA49;
$eucalyptus: #00EFB2;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'basil': '#3C923F',
        'basil-2': '#7E981A',
        'saffron': '#E2CA49',
        'eucalyptus': '#00EFB2',
      },
    },
  },
};

{
  "name": "Eucalyptus & Saffron Sky",
  "colors": [
    "#3C923F",
    "#7E981A",
    "#E2CA49",
    "#00EFB2"
  ]
}

background: linear-gradient(135deg, #3C923F, #7E981A, #E2CA49, #00EFB2);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

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

Similar palettes 24 more in this mood