← Back to Editor

#F5D3A4 · #F4BE91 · #D5B686 · #BAAE7D · #83BC83

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5D3A4

Goose Yellow · Wheat · Peach Orange

HEX
#F5D3A4
RGB
rgb(245, 211, 164)
HSL
hsl(35, 80%, 80%)
HSB
hsb(35, 33%, 96%)
CMYK
cmyk(0%, 14%, 33%, 4%)
Oklch
oklch(88.4% 0.072 75.6)

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

#F4BE91

Apricot · BurlyWood · Peach Orange

HEX
#F4BE91
RGB
rgb(244, 190, 145)
HSL
hsl(27, 82%, 76%)
HSB
hsb(27, 41%, 96%)
CMYK
cmyk(0%, 22%, 41%, 4%)
Oklch
oklch(84.0% 0.086 61.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D5B686

Ginger · Tan · Warm Sun

HEX
#D5B686
RGB
rgb(213, 182, 134)
HSL
hsl(36, 48%, 68%)
HSB
hsb(36, 37%, 84%)
CMYK
cmyk(0%, 15%, 37%, 16%)
Oklch
oklch(79.2% 0.073 78.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#BAAE7D

Ginger · Tan · Sunflower

HEX
#BAAE7D
RGB
rgb(186, 174, 125)
HSL
hsl(48, 31%, 61%)
HSB
hsb(48, 33%, 73%)
CMYK
cmyk(0%, 6%, 33%, 27%)
Oklch
oklch(74.9% 0.067 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#83BC83

Celadon · DarkSeaGreen · Apple Green

HEX
#83BC83
RGB
rgb(131, 188, 131)
HSL
hsl(120, 30%, 63%)
HSB
hsb(120, 30%, 74%)
CMYK
cmyk(30%, 0%, 30%, 26%)
Oklch
oklch(74.1% 0.100 144.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5D3A4
A3C5F5

Analogous

F5AAA3
F5D3A4
EEF5A3

Triadic

F5D3A4
A3F5D3
D3A3F5

Split-Comp.

F5D3A4
A3EEF5
AAA3F5

Tetradic

F5D3A4
A3F5AA
A3C5F5
F5A3EE

Contrast Matrix WCAG 2.1 Contrast

F5D3A4
F4BE91
D5B686
BAAE7D
83BC83
—
1.2
Fail
1.4
Fail
1.6
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.3
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.1
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
1.0
Fail
1.6
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
White BG
1.4Fail
1.7Fail
1.9Fail
2.2Fail
2.2Fail
Black BG
14.7AAA
12.6AAA
10.9AAA
9.4AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6AF
DDDC9C
C8C792
B5B589
9C9C91

Deuteranopia

E8EBB2
E0E49F
C9CC94
B6B68C
989494

Tritanopia

F3B8BA
F1A4A6
D39B9D
B99294
869C9E

Achromatopsia

D8D8D8
C9C9C9
BABABA
ACACAC
A4A4A4

Shades & Tints Shades & Tints

#F5D3A4

Dark
Light

#F4BE91

Dark
Light

#D5B686

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5d3a4;
  --color-2: #f4be91;
  --color-3: #d5b686;
  --color-4: #baae7d;
  --color-5: #83bc83;
}

SCSS

$color-1: #f5d3a4;
$color-2: #f4be91;
$color-3: #d5b686;
$color-4: #baae7d;
$color-5: #83bc83;

TAILWIND

colors: {
  'brand-1': '#f5d3a4',
  'brand-2': '#f4be91',
  'brand-3': '#d5b686',
  'brand-4': '#baae7d',
  'brand-5': '#83bc83',
}

RGB Array

[245, 211, 164], [244, 190, 145], [213, 182, 134], [186, 174, 125], [131, 188, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5D3A4, #F4BE91, #D5B686, #BAAE7D, #83BC83 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f5d3a4; --color-2: #f4be91; --color-3: #d5b686; --color-4: #baae7d; --color-5: #83bc83. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 tech, SaaS, healthcare, eco industries. 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