← Back to Editor

#5B754F · #CFA757 · #D44F48 · #734848 · #688049

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

#5B754F

Celadon · DimGray · Forest Green

HEX
#5B754F
RGB
rgb(91, 117, 79)
HSL
hsl(101, 19%, 38%)
HSB
hsb(101, 32%, 46%)
CMYK
cmyk(22%, 0%, 32%, 54%)
Oklch
oklch(53.1% 0.065 136.1)

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

#CFA757

Ginger · SandyBrown · Sunflower

HEX
#CFA757
RGB
rgb(207, 167, 87)
HSL
hsl(40, 56%, 58%)
HSB
hsb(40, 58%, 81%)
CMYK
cmyk(0%, 19%, 58%, 19%)
Oklch
oklch(74.8% 0.109 83.0)

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

#D44F48

Vermilion · Tomato · Passion Red

HEX
#D44F48
RGB
rgb(212, 79, 72)
HSL
hsl(3, 62%, 56%)
HSB
hsb(3, 66%, 83%)
CMYK
cmyk(0%, 63%, 66%, 17%)
Oklch
oklch(60.5% 0.169 26.4)

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

#734848

Crimson · DimGray · Wine Red

HEX
#734848
RGB
rgb(115, 72, 72)
HSL
hsl(0, 23%, 37%)
HSB
hsb(0, 37%, 45%)
CMYK
cmyk(0%, 37%, 37%, 55%)
Oklch
oklch(45.1% 0.059 19.6)

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

#688049

Grass Green · DarkOliveGreen · Forest Green

HEX
#688049
RGB
rgb(104, 128, 73)
HSL
hsl(86, 27%, 39%)
HSB
hsb(86, 43%, 50%)
CMYK
cmyk(19%, 0%, 43%, 50%)
Oklch
oklch(56.7% 0.084 128.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B754F
684E73

Analogous

6D734E
5B754F
4E7355

Triadic

5B754F
4E5A73
734E5A

Split-Comp.

5B754F
554E73
734E6D

Tetradic

5B754F
4E6D73
684E73
73554E

Contrast Matrix WCAG 2.1 Contrast

5B754F
CFA757
D44F48
734848
688049
—
2.3
Fail
1.2
Fail
1.5
Fail
1.2
Fail
2.3
Fail
—
1.9
Fail
3.4
AA Large
2.0
Fail
1.2
Fail
1.9
Fail
—
1.8
Fail
1.1
Fail
1.5
Fail
3.4
AA Large
1.8
Fail
—
1.7
Fail
1.2
Fail
2.0
Fail
1.1
Fail
1.7
Fail
—
White BG
5.1AA
2.3Fail
4.2AA Large
7.6AAA
4.4AA Large
Black BG
4.1AA Large
9.3AAA
5.0AA
2.7Fail
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

666658
BEBD6A
9A994A
606048
727356

Deuteranopia

65635A
C0C36F
A2AC4A
636648
716F5A

Tritanopia

5C5F61
CD7A7D
CD4B4B
714848
696163

Achromatopsia

696969
AAAAAA
767676
555555
737373

Shades & Tints Shades & Tints

#5B754F

Dark
Light

#CFA757

Dark
Light

#D44F48

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b754f;
  --color-2: #cfa757;
  --color-3: #d44f48;
  --color-4: #734848;
  --color-5: #688049;
}

SCSS

$color-1: #5b754f;
$color-2: #cfa757;
$color-3: #d44f48;
$color-4: #734848;
$color-5: #688049;

TAILWIND

colors: {
  'brand-1': '#5b754f',
  'brand-2': '#cfa757',
  'brand-3': '#d44f48',
  'brand-4': '#734848',
  'brand-5': '#688049',
}

RGB Array

[91, 117, 79], [207, 167, 87], [212, 79, 72], [115, 72, 72], [104, 128, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B754F, #CFA757, #D44F48, #734848, #688049 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: #5b754f; --color-2: #cfa757; --color-3: #d44f48; --color-4: #734848; --color-5: #688049. 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