← Back to Editor

#553F27 · #8F3D25 · #AFA278 · #BB8D40 · #517159

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

#553F27

Ochre · DarkOliveGreen · Cinnamon

HEX
#553F27
RGB
rgb(85, 63, 39)
HSL
hsl(31, 37%, 24%)
HSB
hsb(31, 54%, 33%)
CMYK
cmyk(0%, 26%, 54%, 67%)
Oklch
oklch(38.6% 0.048 68.0)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#8F3D25

Crimson · Sienna · Wine Red

HEX
#8F3D25
RGB
rgb(143, 61, 37)
HSL
hsl(14, 59%, 35%)
HSB
hsb(14, 74%, 56%)
CMYK
cmyk(0%, 57%, 74%, 44%)
Oklch
oklch(46.6% 0.118 37.0)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#AFA278

Ginger · Tan · Sunflower

HEX
#AFA278
RGB
rgb(175, 162, 120)
HSL
hsl(46, 26%, 58%)
HSB
hsb(46, 31%, 69%)
CMYK
cmyk(0%, 7%, 31%, 31%)
Oklch
oklch(71.3% 0.059 92.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BB8D40

Ochre · GoldenRod · Amber Brown

HEX
#BB8D40
RGB
rgb(187, 141, 64)
HSL
hsl(38, 49%, 49%)
HSB
hsb(38, 66%, 73%)
CMYK
cmyk(0%, 25%, 66%, 27%)
Oklch
oklch(67.3% 0.109 77.8)

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

#517159

Celadon · DimGray · Forest Green

HEX
#517159
RGB
rgb(81, 113, 89)
HSL
hsl(135, 16%, 38%)
HSB
hsb(135, 28%, 44%)
CMYK
cmyk(28%, 0%, 21%, 56%)
Oklch
oklch(51.7% 0.053 152.0)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

553F27
273C54

Analogous

542727
553F27
535427

Triadic

553F27
27543E
3E2754

Split-Comp.

553F27
275354
272754

Tetradic

553F27
275427
273C54
542753

Contrast Matrix WCAG 2.1 Contrast

553F27
8F3D25
AFA278
BB8D40
517159
—
1.3
Fail
3.9
AA Large
3.3
AA Large
1.8
Fail
1.3
Fail
—
2.9
Fail
2.4
Fail
1.3
Fail
3.9
AA Large
2.9
Fail
—
1.2
Fail
2.1
Fail
3.3
AA Large
2.4
Fail
1.2
Fail
—
1.8
Fail
1.8
Fail
1.3
Fail
2.1
Fail
1.8
Fail
—
White BG
9.9AAA
7.3AAA
2.5Fail
3.0AA Large
5.4AA
Black BG
2.1Fail
2.9Fail
8.3AAA
7.0AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B2D
6B6B2B
A9A982
A7A753
5F5F5F

Deuteranopia

4D4E2E
70762C
AAAB85
AAAD57
5D5B60

Tritanopia

543132
8B2F30
AE8A8C
B96165
536364

Achromatopsia

434343
535353
A1A1A1
929292
656565

Shades & Tints Shades & Tints

#553F27

Dark
Light

#8F3D25

Dark
Light

#AFA278

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #553f27;
  --color-2: #8f3d25;
  --color-3: #afa278;
  --color-4: #bb8d40;
  --color-5: #517159;
}

SCSS

$color-1: #553f27;
$color-2: #8f3d25;
$color-3: #afa278;
$color-4: #bb8d40;
$color-5: #517159;

TAILWIND

colors: {
  'brand-1': '#553f27',
  'brand-2': '#8f3d25',
  'brand-3': '#afa278',
  'brand-4': '#bb8d40',
  'brand-5': '#517159',
}

RGB Array

[85, 63, 39], [143, 61, 37], [175, 162, 120], [187, 141, 64], [81, 113, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #553F27, #8F3D25, #AFA278, #BB8D40, #517159 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: #553f27; --color-2: #8f3d25; --color-3: #afa278; --color-4: #bb8d40; --color-5: #517159. 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