#E69B50 + #CCA774 + #A5B8A9 + #D0D2BA + #F4E3C5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E69B50

Ginger · SandyBrown · Warm Sun

HEX

#E69B50

RGB

rgb(230, 155, 80)

HSL

hsl(30, 75%, 61%)

HSB

hsb(30, 65%, 90%)

CMYK

cmyk(0%, 33%, 65%, 10%)

Oklch

oklch(75.0% 0.128 63.6)

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

#CCA774

Ginger · Tan · Warm Sun

HEX

#CCA774

RGB

rgb(204, 167, 116)

HSL

hsl(35, 46%, 63%)

HSB

hsb(35, 43%, 80%)

CMYK

cmyk(0%, 18%, 43%, 20%)

Oklch

oklch(75.0% 0.080 75.0)

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

#A5B8A9

Celadon · DarkGray · Apple Green

HEX

#A5B8A9

RGB

rgb(165, 184, 169)

HSL

hsl(133, 12%, 68%)

HSB

hsb(133, 10%, 72%)

CMYK

cmyk(10%, 0%, 8%, 28%)

Oklch

oklch(76.4% 0.030 151.8)

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

#D0D2BA

Fresh Green · Silver · Lemon Cream

HEX

#D0D2BA

RGB

rgb(208, 210, 186)

HSL

hsl(65, 21%, 78%)

HSB

hsb(65, 11%, 82%)

CMYK

cmyk(1%, 0%, 11%, 18%)

Oklch

oklch(85.6% 0.032 110.9)

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

#F4E3C5

Goose Yellow · Bisque · Peach Orange

HEX

#F4E3C5

RGB

rgb(244, 227, 197)

HSL

hsl(38, 68%, 86%)

HSB

hsb(38, 19%, 96%)

CMYK

cmyk(0%, 7%, 19%, 4%)

Oklch

oklch(92.2% 0.044 81.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E69B50

519CE6

Analogous

E65151

E69B50

E6E651

Triadic

E69B50

51E69C

9C51E6

Split-Comp.

E69B50

51E6E6

5151E6

Tetradic

E69B50

51E651

519CE6

E651E6

Contrast Matrix WCAG 2.1 Contrast

E69B50	CCA774	A5B8A9	D0D2BA	F4E3C5
—	1.0 Fail	1.1 Fail	1.5 Fail	1.8 Fail
1.0 Fail	—	1.1 Fail	1.5 Fail	1.8 Fail
1.1 Fail	1.1 Fail	—	1.4 Fail	1.7 Fail
1.5 Fail	1.5 Fail	1.4 Fail	—	1.2 Fail
1.8 Fail	1.8 Fail	1.7 Fail	1.2 Fail	—

White BG

2.3Fail

2.2Fail

2.1Fail

1.5Fail

1.3Fail

Black BG

9.2AAA

9.3AAA

10.0AAA

13.6AAA

16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C562

BCBC80

ADADAD

D1D1C0

EDECCC

Deuteranopia

CAD067

BEC183

ACABAE

D1D1C1

EEEFCE

Tritanopia

E27074

CA8A8C

A6AFB0

D0C4C5

F3D2D3

Achromatopsia

A9A9A9

ACACAC

B1B1B1

CFCFCF

E5E5E5

Shades & Tints Shades & Tints

#E69B50

Dark

Light

#CCA774

Dark

Light

#A5B8A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e69b50;
  --color-2: #cca774;
  --color-3: #a5b8a9;
  --color-4: #d0d2ba;
  --color-5: #f4e3c5;
}

SCSS

$color-1: #e69b50;
$color-2: #cca774;
$color-3: #a5b8a9;
$color-4: #d0d2ba;
$color-5: #f4e3c5;

TAILWIND

colors: {
  'brand-1': '#e69b50',
  'brand-2': '#cca774',
  'brand-3': '#a5b8a9',
  'brand-4': '#d0d2ba',
  'brand-5': '#f4e3c5',
}

RGB Array

[230, 155, 80], [204, 167, 116], [165, 184, 169], [208, 210, 186], [244, 227, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E69B50, #CCA774, #A5B8A9, #D0D2BA, #F4E3C5 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: #e69b50; --color-2: #cca774; --color-3: #a5b8a9; --color-4: #d0d2ba; --color-5: #f4e3c5. 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