Pantone

2021

#F5DF4D

Illuminating

A bright, friendly yellow presented alongside Ultimate Gray to signal resilience and hope.

Generate palettes Visualize in mockups Back to 2021 overview

Copy color values

HEX / RGB / CMYK ready for dev teams.

HEX

#F5DF4D

RGB

rgb(245, 223, 77)

CMYK

3, 1, 78, 0

Palette ideas

Monochrome, analogous, complementary, and triadic sets.

Monochrome Depth

Light and dark steps around the hero color.

#C6AD0C

#F2D61C

#F5DF4D

#F7E77D

#FBF2B7

Analogous Flow

Neighbors on the color wheel for a soft gradient story.

#F37E30

#F5B74D

#F5DF4D

#E3F54D

#C7F66A

Complementary Contrast

Opposites that add clarity and focus.

#F5DF4D

#3049F3

#7384F7

#E0C61A

#F1E8AC

Triadic Balance

Three evenly spaced hues for versatile layouts.

#F5DF4D

#4DF5DF

#DF4DF5

#E9D12F

#F4E795

Split Complementary

Balanced contrast with two supporting accents.

#F5DF4D

#4DB7F5

#8B4DF5

#DBC114

#F7ECA6

Export tokens

Copy CSS variables or plug into Tailwind.

#F5DF4D

CSS Variables

:root {
  --year-base: #F5DF4D;
  --year-base-contrast: #111827;
  --year-accent-1: #F2D61C;
  --year-accent-2: #F5DF4D;
  --year-accent-3: #F7E77D;
  --year-surface: #f8fafc;
}

Tailwind Config

theme: {
  extend: {
    colors: {
      primary: 'var(--year-base)',
      accent: 'var(--year-accent-1)',
      surface: 'var(--year-surface)',
    },
  },
},

Scenario previews

See the color in UI, posters, and ecommerce layouts.

UI Dashboard

Poster / Social

Launch Campaign

Design with #F5DF4D

Ecommerce Hero

New Drop · #F5DF4D-20%

Primary CTA

Secondary

Usage guidance

Summary

A bright, friendly yellow presented alongside Ultimate Gray to signal resilience and hope.

Notes

Treat it as an accent on gray, charcoal, or navy bases. For UI, keep text in deep neutral shades and limit large yellow surfaces to reduce glare. Works well with tactile materials and bold typography.

Tips