← Back to Editor

#FFFAD3 · #C5C28F · #3E2214 · #D1A73B · #6B571A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFFAD3

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFAD3
RGB
rgb(255, 250, 211)
HSL
hsl(53, 100%, 91%)
HSB
hsb(53, 17%, 100%)
CMYK
cmyk(0%, 2%, 17%, 0%)
Oklch
oklch(97.9% 0.051 101.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#C5C28F

Fresh Green · Tan · Sunflower

HEX
#C5C28F
RGB
rgb(197, 194, 143)
HSL
hsl(57, 32%, 67%)
HSB
hsb(57, 27%, 77%)
CMYK
cmyk(0%, 2%, 27%, 23%)
Oklch
oklch(80.4% 0.068 105.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#3E2214

Tangerine · Black · Cinnamon

HEX
#3E2214
RGB
rgb(62, 34, 20)
HSL
hsl(20, 51%, 16%)
HSB
hsb(20, 68%, 24%)
CMYK
cmyk(0%, 45%, 68%, 76%)
Oklch
oklch(28.5% 0.049 46.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#D1A73B

Ginger · GoldenRod · Sunflower

HEX
#D1A73B
RGB
rgb(209, 167, 59)
HSL
hsl(43, 62%, 53%)
HSB
hsb(43, 72%, 82%)
CMYK
cmyk(0%, 20%, 72%, 18%)
Oklch
oklch(74.8% 0.131 86.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#6B571A

Ochre · DarkOliveGreen · Honey Gold

HEX
#6B571A
RGB
rgb(107, 87, 26)
HSL
hsl(45, 61%, 26%)
HSB
hsb(45, 76%, 42%)
CMYK
cmyk(0%, 19%, 76%, 58%)
Oklch
oklch(46.5% 0.082 90.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFAD3
D1D6FF

Analogous

FFE3D1
FFFAD3
EDFFD1

Triadic

FFFAD3
D1FFFA
FAD1FF

Split-Comp.

FFFAD3
D1EDFF
E3D1FF

Tetradic

FFFAD3
D1FFE3
D1D6FF
FFD1ED

Contrast Matrix WCAG 2.1 Contrast

FFFAD3
C5C28F
3E2214
D1A73B
6B571A
—
1.7
Fail
13.8
AAA
2.1
Fail
6.6
AA
1.7
Fail
—
8.0
AAA
1.2
Fail
3.8
AA Large
13.8
AAA
8.0
AAA
—
6.4
AA
2.1
Fail
2.1
Fail
1.2
Fail
6.4
AA
—
3.1
AA Large
6.6
AA
3.8
AA Large
2.1
Fail
3.1
AA Large
—
White BG
1.1Fail
1.8Fail
14.5AAA
2.3Fail
7.0AA
Black BG
19.9AAA
11.5AAA
1.4Fail
9.3AAA
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FDFDDC
C4C49B
323217
BFBE55
626229

Deuteranopia

FDFEDF
C4C49E
343618
C1C45B
64652C

Tritanopia

FFE4E6
C5A5A7
3D1A1B
CF6A6E
6A3437

Achromatopsia

F7F7F7
BDBDBD
292929
A7A7A7
565656

Shades & Tints Shades & Tints

#FFFAD3

Dark
Light

#C5C28F

Dark
Light

#3E2214

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffad3;
  --color-2: #c5c28f;
  --color-3: #3e2214;
  --color-4: #d1a73b;
  --color-5: #6b571a;
}

SCSS

$color-1: #fffad3;
$color-2: #c5c28f;
$color-3: #3e2214;
$color-4: #d1a73b;
$color-5: #6b571a;

TAILWIND

colors: {
  'brand-1': '#fffad3',
  'brand-2': '#c5c28f',
  'brand-3': '#3e2214',
  'brand-4': '#d1a73b',
  'brand-5': '#6b571a',
}

RGB Array

[255, 250, 211], [197, 194, 143], [62, 34, 20], [209, 167, 59], [107, 87, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFAD3, #C5C28F, #3E2214, #D1A73B, #6B571A is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #fffad3; --color-2: #c5c28f; --color-3: #3e2214; --color-4: #d1a73b; --color-5: #6b571a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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