#F3AD16
Yellow family

Buttercup

Also known as: cheerful · golden · vibrant · sunny · playful
Save
Hex #F3AD16
RGB rgb(243, 173, 22)
HSL hsl(41°, 90%, 52%)
CMYK 0 · 29 · 91 · 5
RAL RAL 1034 · Pastel Yellow

RAL and NCS values are nearest equivalents, not official designations.

Meaning

In Western cultures, Buttercup symbolizes joy and happiness, often associated with childhood and carefree days in nature. Conversely, in some Asian cultures, bright yellows can denote caution or warning, creating a contrast between celebration and alertness.

The term 'buttercup' dates back to the 14th century, derived from the Old English 'buttercuppe', as the flowers were thought to have been used to color butter. The vivid hue became popular in art during the 18th century, with artists like Vincent van Gogh celebrating its brightness in their work.

cheerfulgoldenvibrantsunnyplayful

Similar colors

Ranked by CIE76 ΔE — the perceptual distance from Buttercup. Lower ΔE means a closer match (below ~2 is barely distinguishable).

All 29 Yellows →

Shades & tints

Nine steps of Buttercup by lightness — from #7E5A0B (darkest) to #F9D486 (lightest). Click any to copy.

-40% #7E5A0B
-30% #9C6F0E
-20% #B98311
-10% #D69813
BASE #F3AD16
+15% #F4B732
+30% #F6C14E
+50% #F7CB6A
+70% #F9D486

Complementary

Sitting opposite Buttercup at 221° on the color wheel, these give the highest-contrast pairings.

Palettes

Curated 5-color combinations featuring Buttercup.

#F3AD16
#4CAF50
#EEEEEE
#FF5722
#3F51B5

Sunny Meadow

Bright and fresh
#F3AD16
#FFD700
#FFFFFF
#8B4513
#FF8C00

Golden Harvest

Warm and inviting
#F3AD16
#6A5ACD
#F5F5F5
#FF69B4
#4682B4

Spring Awakening

Lively and uplifting

Buttercup scale

A 50–900 tonal scale with Buttercup anchored at 500 — ready to drop into a design system. Click any step to copy.

50 #FEF8EC
100 #FDF0D5
200 #FAE0A6
300 #F8CF78
400 #F6BE47
500 #F3AD16
600 #C78E12
700 #A0720F
800 #7A570B
900 #533B07

Accessibility

Works well as text on dark backgrounds; fails on light.

Aa Best text color: #000000 · 10.8:1
Buttercup as text on… Ratio AA AAA
Aa White background 1.94:1 Fail Fail
Aa Black background 10.8:1 Pass Pass

Thresholds: AA needs 4.5:1 (normal text) / 3:1 (large); AAA needs 7:1 / 4.5:1. Large = 18pt+ or 14pt+ bold.

How to use #F3AD16

Copy-ready values for CSS, screen and print, plus the extra conversions designers reach for.

CSS color: #F3AD16;
CSS color-mix (lighten 30%) color-mix(in srgb, #F3AD16 70%, white)
HSV / HSB 41°, 91%, 95%
CMYK (print) 0, 29, 91, 5
Decimal 15969558
Nearest web-safe #FF9900

Color vision

How Buttercup appears to viewers with the three main types of color blindness (~1 in 12 men, 1 in 200 women). Simulated approximations.

Normal vision

#F3AD16

Protanopia (no red)

#D5D43B

Deuteranopia (no green)

#D9DE43

Tritanopia (no blue)

#F0575E
Vanilla
14 / 29 Yellows Flax
Copied!