#A28B6A + #D7BB8A + #FFE2A3 + #F9F1DC + #CBDDE4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A28B6A

Ginger · Gray · Warm Sun

HEX

#A28B6A

RGB

rgb(162, 139, 106)

HSL

hsl(35, 23%, 53%)

HSB

hsb(35, 35%, 64%)

CMYK

cmyk(0%, 14%, 35%, 36%)

Oklch

oklch(64.9% 0.054 76.5)

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

#D7BB8A

Ginger · BurlyWood · Warm Sun

HEX

#D7BB8A

RGB

rgb(215, 187, 138)

HSL

hsl(38, 49%, 69%)

HSB

hsb(38, 36%, 84%)

CMYK

cmyk(0%, 13%, 36%, 16%)

Oklch

oklch(80.4% 0.072 81.3)

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

#FFE2A3

Goose Yellow · Wheat · Lemon Cream

HEX

#FFE2A3

RGB

rgb(255, 226, 163)

HSL

hsl(41, 100%, 82%)

HSB

hsb(41, 36%, 100%)

CMYK

cmyk(0%, 11%, 36%, 0%)

Oklch

oklch(92.2% 0.086 86.0)

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

#F9F1DC

Goose Yellow · Beige · Lemon Cream

HEX

#F9F1DC

RGB

rgb(249, 241, 220)

HSL

hsl(43, 71%, 92%)

HSB

hsb(43, 12%, 98%)

CMYK

cmyk(0%, 3%, 12%, 2%)

Oklch

oklch(95.9% 0.029 89.6)

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

#CBDDE4

Sky Blue · LightGray · Glacier Blue

HEX

#CBDDE4

RGB

rgb(203, 221, 228)

HSL

hsl(197, 32%, 85%)

HSB

hsb(197, 11%, 89%)

CMYK

cmyk(11%, 3%, 0%, 11%)

Oklch

oklch(88.6% 0.022 223.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A28B6A

6C83A3

Analogous

A3706C

A28B6A

9EA36C

Triadic

A28B6A

6CA38C

8C6CA3

Split-Comp.

A28B6A

6C9EA3

706CA3

Tetradic

A28B6A

6CA370

6C83A3

A36C9E

Contrast Matrix WCAG 2.1 Contrast

A28B6A	D7BB8A	FFE2A3	F9F1DC	CBDDE4
—	1.8 Fail	2.6 Fail	2.9 Fail	2.3 Fail
1.8 Fail	—	1.5 Fail	1.6 Fail	1.3 Fail
2.6 Fail	1.5 Fail	—	1.1 Fail	1.1 Fail
2.9 Fail	1.6 Fail	1.1 Fail	—	1.2 Fail
2.3 Fail	1.3 Fail	1.1 Fail	1.2 Fail	—

White BG

3.3AA Large

1.8Fail

1.3Fail

1.1Fail

1.4Fail

Black BG

6.4AA

11.4AAA

16.7AAA

18.6AAA

15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

989872

CBCB96

F2F2B2

F6F5E1

D3D3E2

Deuteranopia

999B74

CDCF99

F4F6B6

F6F7E2

D2D0E2

Tritanopia

A1787A

D69FA1

FEBEC1

F9E5E6

CCE1E1

Achromatopsia

8E8E8E

BEBEBE

E3E3E3

F1F1F1

D8D8D8

Shades & Tints Shades & Tints

#A28B6A

Dark

Light

#D7BB8A

Dark

Light

#FFE2A3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a28b6a;
  --color-2: #d7bb8a;
  --color-3: #ffe2a3;
  --color-4: #f9f1dc;
  --color-5: #cbdde4;
}

SCSS

$color-1: #a28b6a;
$color-2: #d7bb8a;
$color-3: #ffe2a3;
$color-4: #f9f1dc;
$color-5: #cbdde4;

TAILWIND

colors: {
  'brand-1': '#a28b6a',
  'brand-2': '#d7bb8a',
  'brand-3': '#ffe2a3',
  'brand-4': '#f9f1dc',
  'brand-5': '#cbdde4',
}

RGB Array

[162, 139, 106], [215, 187, 138], [255, 226, 163], [249, 241, 220], [203, 221, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A28B6A, #D7BB8A, #FFE2A3, #F9F1DC, #CBDDE4 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: #a28b6a; --color-2: #d7bb8a; --color-3: #ffe2a3; --color-4: #f9f1dc; --color-5: #cbdde4. 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