← Back to Editor

#9AA57A · #BD856C · #DF5844 · #915636 · #FF671D

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 Library

Color Details Color Details

#9AA57A

Grass Green · DarkSeaGreen · Olive Green

HEX
#9AA57A
RGB
rgb(154, 165, 122)
HSL
hsl(75, 19%, 56%)
HSB
hsb(75, 26%, 65%)
CMYK
cmyk(7%, 0%, 26%, 35%)
Oklch
oklch(70.2% 0.061 119.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#BD856C

Tangerine · DarkSalmon · Warm Sun

HEX
#BD856C
RGB
rgb(189, 133, 108)
HSL
hsl(19, 38%, 58%)
HSB
hsb(19, 43%, 74%)
CMYK
cmyk(0%, 30%, 43%, 26%)
Oklch
oklch(66.6% 0.078 45.0)

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

#DF5844

Vermilion · Tomato · Passion Red

HEX
#DF5844
RGB
rgb(223, 88, 68)
HSL
hsl(8, 71%, 57%)
HSB
hsb(8, 70%, 87%)
CMYK
cmyk(0%, 61%, 70%, 13%)
Oklch
oklch(63.3% 0.173 30.9)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#915636

Tangerine · Sienna · Amber Brown

HEX
#915636
RGB
rgb(145, 86, 54)
HSL
hsl(21, 46%, 39%)
HSB
hsb(21, 63%, 57%)
CMYK
cmyk(0%, 41%, 63%, 43%)
Oklch
oklch(51.4% 0.091 48.3)

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

#FF671D

Tangerine · Tomato · Warm Sun

HEX
#FF671D
RGB
rgb(255, 103, 29)
HSL
hsl(20, 100%, 56%)
HSB
hsb(20, 89%, 100%)
CMYK
cmyk(0%, 60%, 89%, 0%)
Oklch
oklch(69.8% 0.201 41.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AA57A
8479A4

Analogous

A49979
9AA57A
84A479

Triadic

9AA57A
7999A4
A47999

Split-Comp.

9AA57A
7984A4
9979A4

Tetradic

9AA57A
79A499
8479A4
A47984

Contrast Matrix WCAG 2.1 Contrast

9AA57A
BD856C
DF5844
915636
FF671D
—
1.2
Fail
1.4
Fail
2.2
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.9
Fail
1.1
Fail
1.4
Fail
1.2
Fail
—
1.6
Fail
1.3
Fail
2.2
Fail
1.9
Fail
1.6
Fail
—
2.0
Fail
1.1
Fail
1.1
Fail
1.3
Fail
2.0
Fail
—
White BG
2.6Fail
3.1AA Large
3.7AA Large
5.9AA
2.9Fail
Black BG
8.0AAA
6.7AA
5.6AA
3.6AA Large
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9F84
A5A472
A5A349
77773E
BDBC2F

Deuteranopia

9E9D87
A8AC74
ACB74A
7B7F40
C6D133

Tritanopia

9B8D8E
BA7778
D84D4E
8E4445
F73D40

Achromatopsia

9D9D9D
939393
7E7E7E
646464
8C8C8C

Shades & Tints Shades & Tints

#9AA57A

Dark
Light

#BD856C

Dark
Light

#DF5844

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9aa57a;
  --color-2: #bd856c;
  --color-3: #df5844;
  --color-4: #915636;
  --color-5: #ff671d;
}

SCSS

$color-1: #9aa57a;
$color-2: #bd856c;
$color-3: #df5844;
$color-4: #915636;
$color-5: #ff671d;

TAILWIND

colors: {
  'brand-1': '#9aa57a',
  'brand-2': '#bd856c',
  'brand-3': '#df5844',
  'brand-4': '#915636',
  'brand-5': '#ff671d',
}

RGB Array

[154, 165, 122], [189, 133, 108], [223, 88, 68], [145, 86, 54], [255, 103, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AA57A, #BD856C, #DF5844, #915636, #FF671D is ideal for: corporate websites, product showcases, portfolios. 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: #9aa57a; --color-2: #bd856c; --color-3: #df5844; --color-4: #915636; --color-5: #ff671d. 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. 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