← Back to Editor

#D9BC8A · #915C48 · #F4D297 · #EDEDBA

A 4-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

#D9BC8A

Ginger · BurlyWood · Warm Sun

HEX
#D9BC8A
RGB
rgb(217, 188, 138)
HSL
hsl(38, 51%, 70%)
HSB
hsb(38, 36%, 85%)
CMYK
cmyk(0%, 13%, 36%, 15%)
Oklch
oklch(80.8% 0.074 80.9)

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

#915C48

Tangerine · Sienna · Amber Brown

HEX
#915C48
RGB
rgb(145, 92, 72)
HSL
hsl(16, 34%, 43%)
HSB
hsb(16, 50%, 57%)
CMYK
cmyk(0%, 37%, 50%, 43%)
Oklch
oklch(52.8% 0.076 41.4)

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

#F4D297

Goose Yellow · Khaki · Peach Orange

HEX
#F4D297
RGB
rgb(244, 210, 151)
HSL
hsl(38, 81%, 77%)
HSB
hsb(38, 38%, 96%)
CMYK
cmyk(0%, 14%, 38%, 4%)
Oklch
oklch(87.9% 0.085 81.0)

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

#EDEDBA

Fresh Green · Wheat · Lemon Cream

HEX
#EDEDBA
RGB
rgb(237, 237, 186)
HSL
hsl(60, 59%, 83%)
HSB
hsb(60, 22%, 93%)
CMYK
cmyk(0%, 0%, 22%, 7%)
Oklch
oklch(93.4% 0.066 107.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9BC8A
8BA8DA

Analogous

DA968B
D9BC8A
CFDA8B

Triadic

D9BC8A
8BDABD
BD8BDA

Split-Comp.

D9BC8A
8BCFDA
968BDA

Tetradic

D9BC8A
8BDA96
8BA8DA
DA8BCF

Contrast Matrix WCAG 2.1 Contrast

D9BC8A
915C48
F4D297
EDEDBA
—
3.0
AA Large
1.3
Fail
1.5
Fail
3.0
AA Large
—
3.8
AA Large
4.6
AA
1.3
Fail
3.8
AA Large
—
1.2
Fail
1.5
Fail
4.6
AA
1.2
Fail
—
White BG
1.8Fail
5.5AA
1.4Fail
1.2Fail
Black BG
11.5AAA
3.8AA Large
14.5AAA
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCC96
7A7A4D
E5E5A5
EDEDC6

Deuteranopia

CED099
7D814E
E7EAA9
EDEDC9

Tritanopia

D8A0A2
8E5152
F2B1B3
EDD0D2

Achromatopsia

BFBFBF
6A6A6A
D5D5D5
E7E7E7

Shades & Tints Shades & Tints

#D9BC8A

Dark
Light

#915C48

Dark
Light

#F4D297

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9bc8a;
  --color-2: #915c48;
  --color-3: #f4d297;
  --color-4: #ededba;
}

SCSS

$color-1: #d9bc8a;
$color-2: #915c48;
$color-3: #f4d297;
$color-4: #ededba;

TAILWIND

colors: {
  'brand-1': '#d9bc8a',
  'brand-2': '#915c48',
  'brand-3': '#f4d297',
  'brand-4': '#ededba',
}

RGB Array

[217, 188, 138], [145, 92, 72], [244, 210, 151], [237, 237, 186]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #D9BC8A, #915C48, #F4D297, #EDEDBA is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d9bc8a; --color-2: #915c48; --color-3: #f4d297; --color-4: #ededba. 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 4-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