← Back to Editor

#DFB294 · #E8C798 · #A1B8A7 · #848F90 · #777B83

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DFB294

Apricot · BurlyWood · Warm Sun

HEX
#DFB294
RGB
rgb(223, 178, 148)
HSL
hsl(24, 54%, 73%)
HSB
hsb(24, 34%, 87%)
CMYK
cmyk(0%, 20%, 34%, 13%)
Oklch
oklch(79.7% 0.067 55.2)

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

#E8C798

Goose Yellow · BurlyWood · Warm Sun

HEX
#E8C798
RGB
rgb(232, 199, 152)
HSL
hsl(35, 63%, 75%)
HSB
hsb(35, 34%, 91%)
CMYK
cmyk(0%, 14%, 34%, 9%)
Oklch
oklch(84.7% 0.072 76.3)

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

#A1B8A7

Celadon · DarkGray · Apple Green

HEX
#A1B8A7
RGB
rgb(161, 184, 167)
HSL
hsl(136, 14%, 68%)
HSB
hsb(136, 13%, 72%)
CMYK
cmyk(13%, 0%, 9%, 28%)
Oklch
oklch(76.0% 0.035 153.5)

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

#848F90

Ash · LightSlateGray · Warm Gray

HEX
#848F90
RGB
rgb(132, 143, 144)
HSL
hsl(185, 5%, 54%)
HSB
hsb(185, 8%, 56%)
CMYK
cmyk(8%, 1%, 0%, 44%)
Oklch
oklch(64.1% 0.013 203.4)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#777B83

Ink Gray · Gray · Warm Gray

HEX
#777B83
RGB
rgb(119, 123, 131)
HSL
hsl(220, 5%, 49%)
HSB
hsb(220, 9%, 51%)
CMYK
cmyk(9%, 6%, 0%, 49%)
Oklch
oklch(58.2% 0.013 264.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFB294
95C2DF

Analogous

DF959C
DFB294
DFD895

Triadic

DFB294
95DFB3
B395DF

Split-Comp.

DFB294
95DFD8
959CDF

Tetradic

DFB294
9CDF95
95C2DF
D895DF

Contrast Matrix WCAG 2.1 Contrast

DFB294
E8C798
A1B8A7
848F90
777B83
—
1.2
Fail
1.1
Fail
1.7
Fail
2.2
Fail
1.2
Fail
—
1.3
Fail
2.1
Fail
2.6
Fail
1.1
Fail
1.3
Fail
—
1.6
Fail
2.0
Fail
1.7
Fail
2.1
Fail
1.6
Fail
—
1.3
Fail
2.2
Fail
2.6
Fail
2.0
Fail
1.3
Fail
—
White BG
1.9Fail
1.6Fail
2.1Fail
3.3AA Large
4.2AA Large
Black BG
10.9AAA
13.1AAA
9.9AAA
6.3AA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCB9B
DAD9A3
ABABAB
898990
797981

Deuteranopia

CED29D
DCDEA6
AAA8AC
888790
797881

Tritanopia

DDA1A2
E6ACAE
A2AEAF
859090
77807F

Achromatopsia

BCBCBC
CCCCCC
AFAFAF
8C8C8C
7B7B7B

Shades & Tints Shades & Tints

#DFB294

Dark
Light

#E8C798

Dark
Light

#A1B8A7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfb294;
  --color-2: #e8c798;
  --color-3: #a1b8a7;
  --color-4: #848f90;
  --color-5: #777b83;
}

SCSS

$color-1: #dfb294;
$color-2: #e8c798;
$color-3: #a1b8a7;
$color-4: #848f90;
$color-5: #777b83;

TAILWIND

colors: {
  'brand-1': '#dfb294',
  'brand-2': '#e8c798',
  'brand-3': '#a1b8a7',
  'brand-4': '#848f90',
  'brand-5': '#777b83',
}

RGB Array

[223, 178, 148], [232, 199, 152], [161, 184, 167], [132, 143, 144], [119, 123, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFB294, #E8C798, #A1B8A7, #848F90, #777B83 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dfb294; --color-2: #e8c798; --color-3: #a1b8a7; --color-4: #848f90; --color-5: #777b83. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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