← Back to Editor

#F7ECCC · #DBC6AB · #A39C89 · #686461 · #433F3C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F7ECCC

Goose Yellow · Bisque · Lemon Cream

HEX
#F7ECCC
RGB
rgb(247, 236, 204)
HSL
hsl(45, 73%, 88%)
HSB
hsb(45, 17%, 97%)
CMYK
cmyk(0%, 4%, 17%, 3%)
Oklch
oklch(94.4% 0.044 91.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DBC6AB

Goose Yellow · Silver · Peach Orange

HEX
#DBC6AB
RGB
rgb(219, 198, 171)
HSL
hsl(34, 40%, 76%)
HSB
hsb(34, 22%, 86%)
CMYK
cmyk(0%, 10%, 22%, 14%)
Oklch
oklch(83.7% 0.043 74.1)

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

#A39C89

Ginger · DarkGray · Sunflower

HEX
#A39C89
RGB
rgb(163, 156, 137)
HSL
hsl(44, 12%, 59%)
HSB
hsb(44, 16%, 64%)
CMYK
cmyk(0%, 4%, 16%, 36%)
Oklch
oklch(69.3% 0.028 90.2)

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

#686461

Ink Gray · DimGray · Charcoal

HEX
#686461
RGB
rgb(104, 100, 97)
HSL
hsl(26, 3%, 39%)
HSB
hsb(26, 7%, 41%)
CMYK
cmyk(0%, 4%, 7%, 59%)
Oklch
oklch(50.6% 0.007 59.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#433F3C

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#433F3C
RGB
rgb(67, 63, 60)
HSL
hsl(26, 6%, 25%)
HSB
hsb(26, 10%, 26%)
CMYK
cmyk(0%, 6%, 10%, 74%)
Oklch
oklch(37.1% 0.007 59.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7ECCC
CAD5F7

Analogous

F7D5CA
F7ECCC
ECF7CA

Triadic

F7ECCC
CAF7EC
ECCAF7

Split-Comp.

F7ECCC
CAECF7
D5CAF7

Tetradic

F7ECCC
CAF7D5
CAD5F7
F7CAEC

Contrast Matrix WCAG 2.1 Contrast

F7ECCC
DBC6AB
A39C89
686461
433F3C
—
1.4
Fail
2.3
Fail
5.0
AA
8.8
AAA
1.4
Fail
—
1.7
Fail
3.5
AA Large
6.3
AA
2.3
Fail
1.7
Fail
—
2.1
Fail
3.8
AA Large
5.0
AA
3.5
AA Large
2.1
Fail
—
1.8
Fail
8.8
AAA
6.3
AA
3.8
AA Large
1.8
Fail
—
White BG
1.2Fail
1.7Fail
2.7Fail
5.9AA
10.4AAA
Black BG
17.8AAA
12.7AAA
7.7AAA
3.6AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2D4
D2D2B2
A0A08E
666662
41413D

Deuteranopia

F3F4D6
D3D5B3
A0A18F
676762
42423D

Tritanopia

F6DADB
DAB7B8
A39192
686262
433D3D

Achromatopsia

ECECEC
C9C9C9
9C9C9C
656565
404040

Shades & Tints Shades & Tints

#F7ECCC

Dark
Light

#DBC6AB

Dark
Light

#A39C89

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7eccc;
  --color-2: #dbc6ab;
  --color-3: #a39c89;
  --color-4: #686461;
  --color-5: #433f3c;
}

SCSS

$color-1: #f7eccc;
$color-2: #dbc6ab;
$color-3: #a39c89;
$color-4: #686461;
$color-5: #433f3c;

TAILWIND

colors: {
  'brand-1': '#f7eccc',
  'brand-2': '#dbc6ab',
  'brand-3': '#a39c89',
  'brand-4': '#686461',
  'brand-5': '#433f3c',
}

RGB Array

[247, 236, 204], [219, 198, 171], [163, 156, 137], [104, 100, 97], [67, 63, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7ECCC, #DBC6AB, #A39C89, #686461, #433F3C is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #f7eccc; --color-2: #dbc6ab; --color-3: #a39c89; --color-4: #686461; --color-5: #433f3c. 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 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