← Back to Editor

#FFD691 · #F5BF77 · #BDB376 · #76794C · #11CC97

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FFD691

Goose Yellow · Khaki · Peach Orange

HEX
#FFD691
RGB
rgb(255, 214, 145)
HSL
hsl(38, 100%, 78%)
HSB
hsb(38, 43%, 100%)
CMYK
cmyk(0%, 16%, 43%, 0%)
Oklch
oklch(89.6% 0.098 80.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F5BF77

Goose Yellow · BurlyWood · Warm Sun

HEX
#F5BF77
RGB
rgb(245, 191, 119)
HSL
hsl(34, 86%, 71%)
HSB
hsb(34, 51%, 96%)
CMYK
cmyk(0%, 22%, 51%, 4%)
Oklch
oklch(83.8% 0.109 73.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#BDB376

Autumn Sage · Tan · Sunflower

HEX
#BDB376
RGB
rgb(189, 179, 118)
HSL
hsl(52, 35%, 60%)
HSB
hsb(52, 38%, 74%)
CMYK
cmyk(0%, 5%, 38%, 26%)
Oklch
oklch(76.1% 0.081 100.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#76794C

Autumn Sage · DimGray · Honey Gold

HEX
#76794C
RGB
rgb(118, 121, 76)
HSL
hsl(64, 23%, 39%)
HSB
hsb(64, 37%, 47%)
CMYK
cmyk(2%, 0%, 37%, 53%)
Oklch
oklch(56.2% 0.064 111.5)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#11CC97

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#11CC97
RGB
rgb(17, 204, 151)
HSL
hsl(163, 85%, 43%)
HSB
hsb(163, 92%, 80%)
CMYK
cmyk(92%, 0%, 26%, 20%)
Oklch
oklch(75.0% 0.154 165.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD691
8FB8FF

Analogous

FF9E8F
FFD691
F0FF8F

Triadic

FFD691
8FFFD6
D68FFF

Split-Comp.

FFD691
8FF0FF
9E8FFF

Tetradic

FFD691
8FFF9E
8FB8FF
FF8FF0

Contrast Matrix WCAG 2.1 Contrast

FFD691
F5BF77
BDB376
76794C
11CC97
—
1.2
Fail
1.5
Fail
3.3
AA Large
1.5
Fail
1.2
Fail
—
1.3
Fail
2.7
Fail
1.2
Fail
1.5
Fail
1.3
Fail
—
2.1
Fail
1.0
Fail
3.3
AA Large
2.7
Fail
2.1
Fail
—
2.2
Fail
1.5
Fail
1.2
Fail
1.0
Fail
2.2
Fail
—
White BG
1.4Fail
1.7Fail
2.1Fail
4.6AA
2.1Fail
Black BG
15.3AAA
12.6AAA
9.9AAA
4.6AA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDA2
DEDD88
B9B985
777757
6264A4

Deuteranopia

F0F3A6
E1E58D
B9BA88
77775A
5749A7

Tritanopia

FDAFB2
F29699
BC9093
765F61
1AAEB0

Achromatopsia

DADADA
C7C7C7
AFAFAF
737373
8E8E8E

Shades & Tints Shades & Tints

#FFD691

Dark
Light

#F5BF77

Dark
Light

#BDB376

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd691;
  --color-2: #f5bf77;
  --color-3: #bdb376;
  --color-4: #76794c;
  --color-5: #11cc97;
}

SCSS

$color-1: #ffd691;
$color-2: #f5bf77;
$color-3: #bdb376;
$color-4: #76794c;
$color-5: #11cc97;

TAILWIND

colors: {
  'brand-1': '#ffd691',
  'brand-2': '#f5bf77',
  'brand-3': '#bdb376',
  'brand-4': '#76794c',
  'brand-5': '#11cc97',
}

RGB Array

[255, 214, 145], [245, 191, 119], [189, 179, 118], [118, 121, 76], [17, 204, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFD691, #F5BF77, #BDB376, #76794C, #11CC97 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffd691; --color-2: #f5bf77; --color-3: #bdb376; --color-4: #76794c; --color-5: #11cc97. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color