What are the hex codes in the Bold Turquoise & Butter palette?

The Bold Turquoise & Butter color palette consists of Hunter Green #4F5E00, Turquoise #00F5D4, Butter #F9F871, Licorice #111111.

How should I use the Bold Turquoise & Butter palette on a website?

Use Butter #F9F871 as the background, Licorice #111111 for text, Hunter Green #4F5E00 for buttons and links, and Turquoise #00F5D4 for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Butter on Licorice at 16.81:1.

Which colors in Bold Turquoise & Butter have enough contrast for text?

The highest-contrast pair is #F9F871 on #111111 with a ratio of 16.81:1, which passes WCAG AA for normal text.

#4F5E00Hunter Green

#00F5D4Turquoise

#F9F871Butter

#111111Licorice

Bold Turquoise & Butter color palette

Vibrant Dark Teal Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Hunter Green	`#4F5E00`	`rgb(79, 94, 0)`	`hsl(70, 100%, 18%)`	`oklch(45.3% 0.107 120)`
Turquoise	`#00F5D4`	`rgb(0, 245, 212)`	`hsl(172, 100%, 48%)`	`oklch(86.8% 0.160 178)`
Butter	`#F9F871`	`rgb(249, 248, 113)`	`hsl(60, 92%, 71%)`	`oklch(95.4% 0.156 109)`
Licorice	`#111111`	`rgb(17, 17, 17)`	`hsl(0, 0%, 7%)`	`oklch(17.8% 0.000 0)`

Why it works and how to use it

Bold Turquoise & Butter is a vivid dark, split color palette tagged vibrant, dark, teal. The hues span about 112°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Hunter Green takes the lead while the rest support. Lightness runs from 7% to 71%. Well suited to dark-mode interfaces and gaming.

Background: Butter (#F9F871) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#111111) on #F9F871 gives 16.81:1, passing WCAG AAA.
Primary: Hunter Green (#4F5E00) is the most saturated mid-tone; use it for buttons and links (6.37:1 against the background, fine for UI elements).
Accent: Turquoise (#00F5D4) for highlights, badges and hover states.

4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Butter on Licorice at 16.81:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Bold Turquoise & Butter

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

#4F5E00

#00F5D4

#F9F871

#111111

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
`#F9F871` on `#111111`	Aa	16.81:1	AAA
`#00F5D4` on `#111111`	Aa	13.5:1	AAA
`#4F5E00` on `#F9F871`	Aa	6.37:1	AA
`#4F5E00` on `#00F5D4`	Aa	5.12:1	AA
`#4F5E00` on `#111111`	Aa	2.64:1	Fail
`#00F5D4` on `#F9F871`	Aa	1.25:1	Fail

:root {
  --hunter-green: #4F5E00;
  --turquoise: #00F5D4;
  --butter: #F9F871;
  --licorice: #111111;
}

$hunter-green: #4F5E00;
$turquoise: #00F5D4;
$butter: #F9F871;
$licorice: #111111;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'hunter-green': '#4F5E00',
        'turquoise': '#00F5D4',
        'butter': '#F9F871',
        'licorice': '#111111',
      },
    },
  },
};

{
  "name": "Bold Turquoise & Butter",
  "colors": [
    "#4F5E00",
    "#00F5D4",
    "#F9F871",
    "#111111"
  ]
}

background: linear-gradient(135deg, #4F5E00, #00F5D4, #F9F871, #111111);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

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

Similar palettes 24 more in this mood