← Back to Editor

#513D34 · #C9C391 · #BBB488 · #A09B7B · #767559

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 LibraryData Visualization

Color Details Color Details

#513D34

Tangerine · DarkOliveGreen · Amber Brown

HEX
#513D34
RGB
rgb(81, 61, 52)
HSL
hsl(19, 22%, 26%)
HSB
hsb(19, 36%, 32%)
CMYK
cmyk(0%, 25%, 36%, 68%)
Oklch
oklch(37.9% 0.032 45.4)

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

#C9C391

Fresh Green · Tan · Sunflower

HEX
#C9C391
RGB
rgb(201, 195, 145)
HSL
hsl(54, 34%, 68%)
HSB
hsb(54, 28%, 79%)
CMYK
cmyk(0%, 3%, 28%, 21%)
Oklch
oklch(81.0% 0.067 102.0)

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

#BBB488

Fresh Green · Tan · Sunflower

HEX
#BBB488
RGB
rgb(187, 180, 136)
HSL
hsl(52, 27%, 63%)
HSB
hsb(52, 27%, 73%)
CMYK
cmyk(0%, 4%, 27%, 27%)
Oklch
oklch(76.5% 0.060 100.1)

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

#A09B7B

Autumn Sage · Gray · Sunflower

HEX
#A09B7B
RGB
rgb(160, 155, 123)
HSL
hsl(52, 16%, 55%)
HSB
hsb(52, 23%, 63%)
CMYK
cmyk(0%, 3%, 23%, 37%)
Oklch
oklch(68.5% 0.045 100.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#767559

Autumn Sage · DimGray · Honey Gold

HEX
#767559
RGB
rgb(118, 117, 89)
HSL
hsl(58, 14%, 41%)
HSB
hsb(58, 25%, 46%)
CMYK
cmyk(0%, 1%, 25%, 54%)
Oklch
oklch(55.6% 0.041 106.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

513D34
344851

Analogous

513439
513D34
514C34

Triadic

513D34
34513D
3D3451

Split-Comp.

513D34
34514C
343951

Tetradic

513D34
395134
344851
4C3451

Contrast Matrix WCAG 2.1 Contrast

513D34
C9C391
BBB488
A09B7B
767559
—
5.7
AA
4.8
AA
3.6
AA Large
2.2
Fail
5.7
AA
—
1.2
Fail
1.6
Fail
2.6
Fail
4.8
AA
1.2
Fail
—
1.3
Fail
2.2
Fail
3.6
AA Large
1.6
Fail
1.3
Fail
—
1.7
Fail
2.2
Fail
2.6
Fail
2.2
Fail
1.7
Fail
—
White BG
10.2AAA
1.8Fail
2.1Fail
2.8Fail
4.7AA
Black BG
2.1Fail
11.7AAA
10.0AAA
7.5AAA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

484836
C6C69D
B8B893
9E9E83
767660

Deuteranopia

4A4B37
C7C7A0
B8B995
9E9F85
767661

Tritanopia

503838
C9A7A9
BB9B9D
A0898A
766566

Achromatopsia

424242
BFBFBF
B1B1B1
999999
727272

Shades & Tints Shades & Tints

#513D34

Dark
Light

#C9C391

Dark
Light

#BBB488

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #513d34;
  --color-2: #c9c391;
  --color-3: #bbb488;
  --color-4: #a09b7b;
  --color-5: #767559;
}

SCSS

$color-1: #513d34;
$color-2: #c9c391;
$color-3: #bbb488;
$color-4: #a09b7b;
$color-5: #767559;

TAILWIND

colors: {
  'brand-1': '#513d34',
  'brand-2': '#c9c391',
  'brand-3': '#bbb488',
  'brand-4': '#a09b7b',
  'brand-5': '#767559',
}

RGB Array

[81, 61, 52], [201, 195, 145], [187, 180, 136], [160, 155, 123], [118, 117, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #513D34, #C9C391, #BBB488, #A09B7B, #767559 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #513d34; --color-2: #c9c391; --color-3: #bbb488; --color-4: #a09b7b; --color-5: #767559. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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