#A5877A + #89BFAE + #F4EDCA + #D2DCA8 + #FB7D0E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A5877A

Tangerine · Gray · Warm Sun

HEX

#A5877A

RGB

rgb(165, 135, 122)

HSL

hsl(18, 19%, 56%)

HSB

hsb(18, 26%, 65%)

CMYK

cmyk(0%, 18%, 26%, 35%)

Oklch

oklch(64.8% 0.042 44.7)

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

#89BFAE

Jade · DarkSeaGreen · Lake Green

HEX

#89BFAE

RGB

rgb(137, 191, 174)

HSL

hsl(161, 30%, 64%)

HSB

hsb(161, 28%, 75%)

CMYK

cmyk(28%, 0%, 9%, 25%)

Oklch

oklch(76.2% 0.062 173.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#F4EDCA

Fresh Green · Bisque · Lemon Cream

HEX

#F4EDCA

RGB

rgb(244, 237, 202)

HSL

hsl(50, 66%, 87%)

HSB

hsb(50, 17%, 96%)

CMYK

cmyk(0%, 3%, 17%, 4%)

Oklch

oklch(94.3% 0.046 97.8)

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

#D2DCA8

Willow Green · Wheat · Apple Green

HEX

#D2DCA8

RGB

rgb(210, 220, 168)

HSL

hsl(72, 43%, 76%)

HSB

hsb(72, 24%, 86%)

CMYK

cmyk(5%, 0%, 24%, 14%)

Oklch

oklch(87.4% 0.070 116.7)

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

#FB7D0E

Tangerine · Orange · Warm Sun

HEX

#FB7D0E

RGB

rgb(251, 125, 14)

HSL

hsl(28, 97%, 52%)

HSB

hsb(28, 94%, 98%)

CMYK

cmyk(0%, 50%, 94%, 2%)

Oklch

oklch(72.2% 0.183 51.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A5877A

7997A4

Analogous

A47982

A5877A

A49C79

Triadic

A5877A

79A486

8679A4

Split-Comp.

A5877A

79A49C

7982A4

Tetradic

A5877A

82A479

7997A4

9C79A4

Contrast Matrix WCAG 2.1 Contrast

A5877A	89BFAE	F4EDCA	D2DCA8	FB7D0E
—	1.6 Fail	2.8 Fail	2.3 Fail	1.3 Fail
1.6 Fail	—	1.8 Fail	1.4 Fail	1.3 Fail
2.8 Fail	1.8 Fail	—	1.2 Fail	2.2 Fail
2.3 Fail	1.4 Fail	1.2 Fail	—	1.8 Fail
1.3 Fail	1.3 Fail	2.2 Fail	1.8 Fail	—

White BG

3.3AA Large

2.1Fail

1.2Fail

1.4Fail

2.6Fail

Black BG

6.3AA

10.1AAA

17.8AAA

14.5AAA

8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

98987D

A0A1B2

F1F1D2

D6D6B5

C4C329

Deuteranopia

9A9C7E

9D99B3

F1F2D4

D6D5B8

CCD52F

Tritanopia

A48080

8CB5B6

F4D9DB

D3BFC1

F53E43

Achromatopsia

8E8E8E

ADADAD

EBEBEB

D3D3D3

969696

Shades & Tints Shades & Tints

#A5877A

Dark

Light

#89BFAE

Dark

Light

#F4EDCA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a5877a;
  --color-2: #89bfae;
  --color-3: #f4edca;
  --color-4: #d2dca8;
  --color-5: #fb7d0e;
}

SCSS

$color-1: #a5877a;
$color-2: #89bfae;
$color-3: #f4edca;
$color-4: #d2dca8;
$color-5: #fb7d0e;

TAILWIND

colors: {
  'brand-1': '#a5877a',
  'brand-2': '#89bfae',
  'brand-3': '#f4edca',
  'brand-4': '#d2dca8',
  'brand-5': '#fb7d0e',
}

RGB Array

[165, 135, 122], [137, 191, 174], [244, 237, 202], [210, 220, 168], [251, 125, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A5877A, #89BFAE, #F4EDCA, #D2DCA8, #FB7D0E 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: #a5877a; --color-2: #89bfae; --color-3: #f4edca; --color-4: #d2dca8; --color-5: #fb7d0e. 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