← Back to Editor

#A88F8A · #D67723 · #F4A338 · #E7C561 · #F0E9BD

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 App

Color Details Color Details

#A88F8A

Crimson · DarkGray · Passion Red

HEX
#A88F8A
RGB
rgb(168, 143, 138)
HSL
hsl(10, 15%, 60%)
HSB
hsb(10, 18%, 66%)
CMYK
cmyk(0%, 15%, 18%, 34%)
Oklch
oklch(67.1% 0.031 31.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#D67723

Tangerine · Chocolate · Amber Brown

HEX
#D67723
RGB
rgb(214, 119, 35)
HSL
hsl(28, 72%, 49%)
HSB
hsb(28, 84%, 84%)
CMYK
cmyk(0%, 44%, 84%, 16%)
Oklch
oklch(66.3% 0.149 56.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#F4A338

Ginger · GoldenRod · Warm Sun

HEX
#F4A338
RGB
rgb(244, 163, 56)
HSL
hsl(34, 90%, 59%)
HSB
hsb(34, 77%, 96%)
CMYK
cmyk(0%, 33%, 77%, 4%)
Oklch
oklch(77.8% 0.150 69.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E7C561

Ginger · SandyBrown · Sunflower

HEX
#E7C561
RGB
rgb(231, 197, 97)
HSL
hsl(45, 74%, 64%)
HSB
hsb(45, 58%, 91%)
CMYK
cmyk(0%, 15%, 58%, 9%)
Oklch
oklch(83.3% 0.125 90.7)

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

#F0E9BD

Fresh Green · Wheat · Lemon Cream

HEX
#F0E9BD
RGB
rgb(240, 233, 189)
HSL
hsl(52, 63%, 84%)
HSB
hsb(52, 21%, 94%)
CMYK
cmyk(0%, 3%, 21%, 6%)
Oklch
oklch(92.9% 0.058 99.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A88F8A
8AA3A8

Analogous

A88A94
A88F8A
A89E8A

Triadic

A88F8A
8AA88F
8F8AA8

Split-Comp.

A88F8A
8AA89E
8A94A8

Tetradic

A88F8A
94A88A
8AA3A8
9E8AA8

Contrast Matrix WCAG 2.1 Contrast

A88F8A
D67723
F4A338
E7C561
F0E9BD
—
1.1
Fail
1.5
Fail
1.8
Fail
2.5
Fail
1.1
Fail
—
1.6
Fail
1.9
Fail
2.6
Fail
1.5
Fail
1.6
Fail
—
1.2
Fail
1.7
Fail
1.8
Fail
1.9
Fail
1.2
Fail
—
1.4
Fail
2.5
Fail
2.6
Fail
1.7
Fail
1.4
Fail
—
White BG
3.0AA Large
3.2AA Large
2.1Fail
1.7Fail
1.2Fail
Black BG
7.0AA
6.5AA
10.1AAA
12.6AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9D8B
ADAC37
D1D052
D8D879
EDEDC8

Deuteranopia

9FA18C
B2B93C
D6DC58
DADD7F
EDEECA

Tritanopia

A78C8C
D1474B
F0666B
E58C91
F0D0D2

Achromatopsia

969696
8A8A8A
AFAFAF
C4C4C4
E6E6E6

Shades & Tints Shades & Tints

#A88F8A

Dark
Light

#D67723

Dark
Light

#F4A338

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a88f8a;
  --color-2: #d67723;
  --color-3: #f4a338;
  --color-4: #e7c561;
  --color-5: #f0e9bd;
}

SCSS

$color-1: #a88f8a;
$color-2: #d67723;
$color-3: #f4a338;
$color-4: #e7c561;
$color-5: #f0e9bd;

TAILWIND

colors: {
  'brand-1': '#a88f8a',
  'brand-2': '#d67723',
  'brand-3': '#f4a338',
  'brand-4': '#e7c561',
  'brand-5': '#f0e9bd',
}

RGB Array

[168, 143, 138], [214, 119, 35], [244, 163, 56], [231, 197, 97], [240, 233, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A88F8A, #D67723, #F4A338, #E7C561, #F0E9BD 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: #a88f8a; --color-2: #d67723; --color-3: #f4a338; --color-4: #e7c561; --color-5: #f0e9bd. 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