What are the hex codes in the Bold Canary & Basil palette?

The Bold Canary & Basil color palette consists of Taupe #5A3000, Graphite #4B4A47, Basil #5CA53F, Canary #E6EF00.

How should I use the Bold Canary & Basil palette on a website?

Use Canary #E6EF00 as the background, Taupe #5A3000 for text, Basil #5CA53F for buttons and links, and Graphite #4B4A47 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Canary at 9:1.

Which colors in Bold Canary & Basil have enough contrast for text?

The highest-contrast pair is #5A3000 on #E6EF00 with a ratio of 9:1, which passes WCAG AA for normal text.

#5A3000Taupe

#4B4A47Graphite

#5CA53FBasil

#E6EF00Canary

Bold Canary & Basil color palette

Vibrant Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Taupe	`#5A3000`	`rgb(90, 48, 0)`	`hsl(32, 100%, 18%)`	`oklch(35.6% 0.082 61)`
Graphite	`#4B4A47`	`rgb(75, 74, 71)`	`hsl(45, 3%, 29%)`	`oklch(40.9% 0.005 92)`
Basil	`#5CA53F`	`rgb(92, 165, 63)`	`hsl(103, 45%, 45%)`	`oklch(65.2% 0.156 138)`
Canary	`#E6EF00`	`rgb(230, 239, 0)`	`hsl(62, 100%, 47%)`	`oklch(91.4% 0.203 113)`

Why it works and how to use it

Bold Canary & Basil is a dark, split color palette tagged vibrant, green. The hues span about 71°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 3 chromatic colors, Basil takes the lead while the rest support. Lightness runs from 18% to 47%. Well suited to dark-mode interfaces and gaming.

Background: Canary (#E6EF00) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#5A3000) on #E6EF00 gives 9:1, passing WCAG AAA.
Primary: Basil (#5CA53F) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Graphite (#4B4A47) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Canary at 9:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Bold Canary & Basil

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

#5A3000

#4B4A47

#5CA53F

#E6EF00

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
`#5A3000` on `#E6EF00`	Aa	9:1	AAA
`#4B4A47` on `#E6EF00`	Aa	7.05:1	AAA
`#5A3000` on `#5CA53F`	Aa	3.72:1	AA large only
`#4B4A47` on `#5CA53F`	Aa	2.92:1	Fail
`#5CA53F` on `#E6EF00`	Aa	2.42:1	Fail
`#5A3000` on `#4B4A47`	Aa	1.28:1	Fail

Similar palettes 24 more in this mood