← Back to Editor

#AB844B · #C4530F · #146360 · #D29D67 · #F5D3AD

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#AB844B

Ochre · Sienna · Amber Brown

HEX
#AB844B
RGB
rgb(171, 132, 75)
HSL
hsl(36, 39%, 48%)
HSB
hsb(36, 56%, 67%)
CMYK
cmyk(0%, 23%, 56%, 33%)
Oklch
oklch(63.9% 0.089 75.5)

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

#C4530F

Tangerine · Chocolate · Amber Brown

HEX
#C4530F
RGB
rgb(196, 83, 15)
HSL
hsl(23, 86%, 41%)
HSB
hsb(23, 92%, 77%)
CMYK
cmyk(0%, 58%, 92%, 23%)
Oklch
oklch(58.0% 0.161 44.8)

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

#146360

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#146360
RGB
rgb(20, 99, 96)
HSL
hsl(178, 66%, 23%)
HSB
hsb(178, 80%, 39%)
CMYK
cmyk(80%, 0%, 3%, 61%)
Oklch
oklch(45.4% 0.072 191.0)

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

#D29D67

Ginger · DarkSalmon · Warm Sun

HEX
#D29D67
RGB
rgb(210, 157, 103)
HSL
hsl(30, 54%, 61%)
HSB
hsb(30, 51%, 82%)
CMYK
cmyk(0%, 25%, 51%, 18%)
Oklch
oklch(73.4% 0.095 66.0)

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

#F5D3AD

Goose Yellow · Wheat · Peach Orange

HEX
#F5D3AD
RGB
rgb(245, 211, 173)
HSL
hsl(32, 78%, 82%)
HSB
hsb(32, 29%, 96%)
CMYK
cmyk(0%, 14%, 29%, 4%)
Oklch
oklch(88.6% 0.063 70.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB844B
4B71AA

Analogous

AA544B
AB844B
A1AA4B

Triadic

AB844B
4BAA84
844BAA

Split-Comp.

AB844B
4BA1AA
544BAA

Tetradic

AB844B
4BAA54
4B71AA
AA4BA1

Contrast Matrix WCAG 2.1 Contrast

AB844B
C4530F
146360
D29D67
F5D3AD
—
1.3
Fail
2.1
Fail
1.4
Fail
2.4
Fail
1.3
Fail
—
1.5
Fail
1.9
Fail
3.2
AA Large
2.1
Fail
1.5
Fail
—
2.9
Fail
5.0
AA
1.4
Fail
1.9
Fail
2.9
Fail
—
1.7
Fail
2.4
Fail
3.2
AA Large
5.0
AA
1.7
Fail
—
White BG
3.4AA Large
4.6AA
7.0AAA
2.4Fail
1.4Fail
Black BG
6.1AA
4.6AA
3.0Fail
8.8AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9A59
93921F
363761
BBBB74
E6E6B6

Deuteranopia

9C9F5C
9AA223
322C61
BEC277
E8EBB8

Tritanopia

A96466
BE2C2F
186161
CF7E81
F3BDBF

Achromatopsia

898989
6D6D6D
4B4B4B
A7A7A7
D9D9D9

Shades & Tints Shades & Tints

#AB844B

Dark
Light

#C4530F

Dark
Light

#146360

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab844b;
  --color-2: #c4530f;
  --color-3: #146360;
  --color-4: #d29d67;
  --color-5: #f5d3ad;
}

SCSS

$color-1: #ab844b;
$color-2: #c4530f;
$color-3: #146360;
$color-4: #d29d67;
$color-5: #f5d3ad;

TAILWIND

colors: {
  'brand-1': '#ab844b',
  'brand-2': '#c4530f',
  'brand-3': '#146360',
  'brand-4': '#d29d67',
  'brand-5': '#f5d3ad',
}

RGB Array

[171, 132, 75], [196, 83, 15], [20, 99, 96], [210, 157, 103], [245, 211, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AB844B, #C4530F, #146360, #D29D67, #F5D3AD is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ab844b; --color-2: #c4530f; --color-3: #146360; --color-4: #d29d67; --color-5: #f5d3ad. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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