Medallion

#c3a679

Warm muted gold-green for calmer headers

Save
Share

About Medallion

Medallion reads like a sun-warmed medallion you'd polish and then leave slightly soft at the edges. It's in the family, but it doesn't drift sandy like , and it doesn't get nearly as light and background-friendly as . Compared to , it hangs onto more saturation, so it doesn't feel handled or washed out.

I reach for Medallion when I want a badge-like accent that still feels grounded, not tea-brown or dusty. Think dashboards and finance apps where you need a category chip, status pill, or section highlight that stays noticeable without screaming. It also shows up nicely in logistics portals and media CMS interfaces for callout headers, especially when the rest of the UI leans but needs a clear warm anchor. Pair it with deep charcoal type and off-white UI surfaces so it keeps its midtone energy; with colder whites it can start to look a touch less gold.

Quirk: if your shadows are too gray, the warmth can flatten. A slightly deeper tan or olive shadow brings it back.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
2.32:1Fail

On Gray 100 #f5f5f5

Aa
2.13:1Fail

On Gray 900 #18181b

Aa
7.64:1AAA

On Black #000000

Aa
9.05:1AAA

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#c4a777
#c9a375
#c5a582
#c6aa81
#c7ac7d
#c4ab86
#bbac7d

Create a gradient with Medallion

Open the generator with this color pre-loaded.

Start creating