← Back to Editor

#F2984E · #E6C476 · #EBDDD8 · #E3CCC2 · #D9BDB3

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

#F2984E

Apricot · SandyBrown · Warm Sun

HEX
#F2984E
RGB
rgb(242, 152, 78)
HSL
hsl(27, 86%, 63%)
HSB
hsb(27, 68%, 95%)
CMYK
cmyk(0%, 37%, 68%, 5%)
Oklch
oklch(75.8% 0.140 57.7)

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

#E6C476

Ginger · BurlyWood · Sunflower

HEX
#E6C476
RGB
rgb(230, 196, 118)
HSL
hsl(42, 69%, 68%)
HSB
hsb(42, 49%, 90%)
CMYK
cmyk(0%, 15%, 49%, 10%)
Oklch
oklch(83.3% 0.105 86.6)

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

#EBDDD8

Apricot · Beige · Peach Orange

HEX
#EBDDD8
RGB
rgb(235, 221, 216)
HSL
hsl(16, 32%, 88%)
HSB
hsb(16, 8%, 92%)
CMYK
cmyk(0%, 6%, 8%, 8%)
Oklch
oklch(90.7% 0.017 40.8)

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

#E3CCC2

Apricot · LightGray · Peach Orange

HEX
#E3CCC2
RGB
rgb(227, 204, 194)
HSL
hsl(18, 37%, 83%)
HSB
hsb(18, 15%, 89%)
CMYK
cmyk(0%, 10%, 15%, 11%)
Oklch
oklch(86.2% 0.029 45.0)

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

#D9BDB3

Apricot · Silver · Peach Orange

HEX
#D9BDB3
RGB
rgb(217, 189, 179)
HSL
hsl(16, 33%, 78%)
HSB
hsb(16, 18%, 85%)
CMYK
cmyk(0%, 13%, 18%, 15%)
Oklch
oklch(82.0% 0.035 40.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2984E
50A9F2

Analogous

F25058
F2984E
F2EA50

Triadic

F2984E
50F299
9950F2

Split-Comp.

F2984E
50F2EA
5058F2

Tetradic

F2984E
58F250
50A9F2
EA50F2

Contrast Matrix WCAG 2.1 Contrast

F2984E
E6C476
EBDDD8
E3CCC2
D9BDB3
—
1.3
Fail
1.7
Fail
1.5
Fail
1.3
Fail
1.3
Fail
—
1.3
Fail
1.1
Fail
1.1
Fail
1.7
Fail
1.3
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.1
Fail
1.3
Fail
1.2
Fail
—
White BG
2.2Fail
1.7Fail
1.3Fail
1.5Fail
1.8Fail
Black BG
9.4AAA
12.5AAA
15.9AAA
13.7AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA60
D7D789
E5E5D9
D9D9C4
CDCDB5

Deuteranopia

D0D764
D9DC8D
E6E7DA
DADCC5
CFD1B6

Tritanopia

ED6E71
E4989B
EADADA
E2C6C7
D8B7B8

Achromatopsia

AAAAAA
C5C5C5
E1E1E1
D2D2D2
C4C4C4

Shades & Tints Shades & Tints

#F2984E

Dark
Light

#E6C476

Dark
Light

#EBDDD8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2984e;
  --color-2: #e6c476;
  --color-3: #ebddd8;
  --color-4: #e3ccc2;
  --color-5: #d9bdb3;
}

SCSS

$color-1: #f2984e;
$color-2: #e6c476;
$color-3: #ebddd8;
$color-4: #e3ccc2;
$color-5: #d9bdb3;

TAILWIND

colors: {
  'brand-1': '#f2984e',
  'brand-2': '#e6c476',
  'brand-3': '#ebddd8',
  'brand-4': '#e3ccc2',
  'brand-5': '#d9bdb3',
}

RGB Array

[242, 152, 78], [230, 196, 118], [235, 221, 216], [227, 204, 194], [217, 189, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2984E, #E6C476, #EBDDD8, #E3CCC2, #D9BDB3 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: #f2984e; --color-2: #e6c476; --color-3: #ebddd8; --color-4: #e3ccc2; --color-5: #d9bdb3. 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