← Back to Editor

#AB856D · #B88261 · #FF904D · #9C8048 · #334F4E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AB856D

Tangerine · Gray · Warm Sun

HEX
#AB856D
RGB
rgb(171, 133, 109)
HSL
hsl(23, 27%, 55%)
HSB
hsb(23, 36%, 67%)
CMYK
cmyk(0%, 22%, 36%, 33%)
Oklch
oklch(64.7% 0.058 53.7)

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

#B88261

Tangerine · DarkSalmon · Warm Sun

HEX
#B88261
RGB
rgb(184, 130, 97)
HSL
hsl(23, 38%, 55%)
HSB
hsb(23, 47%, 72%)
CMYK
cmyk(0%, 29%, 47%, 28%)
Oklch
oklch(65.3% 0.081 52.2)

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

#FF904D

Apricot · Coral · Warm Sun

HEX
#FF904D
RGB
rgb(255, 144, 77)
HSL
hsl(23, 100%, 65%)
HSB
hsb(23, 70%, 100%)
CMYK
cmyk(0%, 44%, 70%, 0%)
Oklch
oklch(76.1% 0.157 49.7)

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

#9C8048

Ochre · Sienna · Honey Gold

HEX
#9C8048
RGB
rgb(156, 128, 72)
HSL
hsl(40, 37%, 45%)
HSB
hsb(40, 54%, 61%)
CMYK
cmyk(0%, 18%, 54%, 39%)
Oklch
oklch(61.4% 0.082 83.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#334F4E

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#334F4E
RGB
rgb(51, 79, 78)
HSL
hsl(178, 22%, 25%)
HSB
hsb(178, 35%, 31%)
CMYK
cmyk(35%, 0%, 1%, 69%)
Oklch
oklch(40.5% 0.034 193.1)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB856D
6D93AB

Analogous

AB6D74
AB856D
ABA46D

Triadic

AB856D
6DAB85
856DAB

Split-Comp.

AB856D
6DABA4
6D74AB

Tetradic

AB856D
74AB6D
6D93AB
A46DAB

Contrast Matrix WCAG 2.1 Contrast

AB856D
B88261
FF904D
9C8048
334F4E
—
1.0
Fail
1.5
Fail
1.1
Fail
2.7
Fail
1.0
Fail
—
1.5
Fail
1.1
Fail
2.7
Fail
1.5
Fail
1.5
Fail
—
1.7
Fail
3.9
AA Large
1.1
Fail
1.1
Fail
1.7
Fail
—
2.4
Fail
2.7
Fail
2.7
Fail
3.9
AA Large
2.4
Fail
—
White BG
3.3AA Large
3.3AA Large
2.2Fail
3.8AA Large
8.9AAA
Black BG
6.3AA
6.4AA
9.3AAA
5.6AA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A73
A1A069
CFCE5D
909056
3F3F4E

Deuteranopia

9DA074
A4A86B
D5DE61
929459
3E3B4E

Tritanopia

A97778
B56F71
F96A6D
9B6063
344E4E

Achromatopsia

8E8E8E
8E8E8E
AAAAAA
828282
474747

Shades & Tints Shades & Tints

#AB856D

Dark
Light

#B88261

Dark
Light

#FF904D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab856d;
  --color-2: #b88261;
  --color-3: #ff904d;
  --color-4: #9c8048;
  --color-5: #334f4e;
}

SCSS

$color-1: #ab856d;
$color-2: #b88261;
$color-3: #ff904d;
$color-4: #9c8048;
$color-5: #334f4e;

TAILWIND

colors: {
  'brand-1': '#ab856d',
  'brand-2': '#b88261',
  'brand-3': '#ff904d',
  'brand-4': '#9c8048',
  'brand-5': '#334f4e',
}

RGB Array

[171, 133, 109], [184, 130, 97], [255, 144, 77], [156, 128, 72], [51, 79, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB856D, #B88261, #FF904D, #9C8048, #334F4E 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: #ab856d; --color-2: #b88261; --color-3: #ff904d; --color-4: #9c8048; --color-5: #334f4e. 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