← Back to Editor

#542A2A · #6B4336 · #827358 · #919E86 · #99C4A8

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

#542A2A

Crimson · DarkSlateGray · Wine Red

HEX
#542A2A
RGB
rgb(84, 42, 42)
HSL
hsl(0, 33%, 25%)
HSB
hsb(0, 50%, 33%)
CMYK
cmyk(0%, 50%, 50%, 67%)
Oklch
oklch(34.1% 0.062 20.8)

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

#6B4336

Tangerine · DarkOliveGreen · Amber Brown

HEX
#6B4336
RGB
rgb(107, 67, 54)
HSL
hsl(15, 33%, 32%)
HSB
hsb(15, 50%, 42%)
CMYK
cmyk(0%, 37%, 50%, 58%)
Oklch
oklch(42.6% 0.060 38.8)

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

#827358

Ochre · DimGray · Amber Brown

HEX
#827358
RGB
rgb(130, 115, 88)
HSL
hsl(39, 19%, 43%)
HSB
hsb(39, 32%, 51%)
CMYK
cmyk(0%, 12%, 32%, 49%)
Oklch
oklch(56.2% 0.044 82.1)

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

#919E86

Celadon · DarkSeaGreen · Olive Green

HEX
#919E86
RGB
rgb(145, 158, 134)
HSL
hsl(93, 11%, 57%)
HSB
hsb(93, 15%, 62%)
CMYK
cmyk(8%, 0%, 15%, 38%)
Oklch
oklch(68.2% 0.037 130.7)

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

#99C4A8

Celadon · DarkSeaGreen · Apple Green

HEX
#99C4A8
RGB
rgb(153, 196, 168)
HSL
hsl(141, 27%, 68%)
HSB
hsb(141, 22%, 77%)
CMYK
cmyk(22%, 0%, 14%, 23%)
Oklch
oklch(78.2% 0.061 156.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

542A2A
2B5555

Analogous

552B40
542A2A
55402B

Triadic

542A2A
2B552B
2B2B55

Split-Comp.

542A2A
2B5540
2B4055

Tetradic

542A2A
40552B
2B5555
402B55

Contrast Matrix WCAG 2.1 Contrast

542A2A
6B4336
827358
919E86
99C4A8
—
1.4
Fail
2.6
Fail
4.3
AA Large
6.2
AA
1.4
Fail
—
1.8
Fail
3.0
Fail
4.4
AA Large
2.6
Fail
1.8
Fail
—
1.6
Fail
2.4
Fail
4.3
AA Large
3.0
Fail
1.6
Fail
—
1.5
Fail
6.2
AA
4.4
AA Large
2.4
Fail
1.5
Fail
—
White BG
12.1AAA
8.5AAA
4.6AA
2.8Fail
1.9Fail
Black BG
1.7Fail
2.5Fail
4.5AA
7.4AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

42412A
5A5939
7C7B5F
97978C
ACACAF

Deuteranopia

44472A
5C5F3A
7C7E60
96958D
A9A6B0

Tritanopia

522A2A
693C3C
816465
929091
9BB4B5

Achromatopsia

373737
4D4D4D
747474
979797
B4B4B4

Shades & Tints Shades & Tints

#542A2A

Dark
Light

#6B4336

Dark
Light

#827358

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #542a2a;
  --color-2: #6b4336;
  --color-3: #827358;
  --color-4: #919e86;
  --color-5: #99c4a8;
}

SCSS

$color-1: #542a2a;
$color-2: #6b4336;
$color-3: #827358;
$color-4: #919e86;
$color-5: #99c4a8;

TAILWIND

colors: {
  'brand-1': '#542a2a',
  'brand-2': '#6b4336',
  'brand-3': '#827358',
  'brand-4': '#919e86',
  'brand-5': '#99c4a8',
}

RGB Array

[84, 42, 42], [107, 67, 54], [130, 115, 88], [145, 158, 134], [153, 196, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #542A2A, #6B4336, #827358, #919E86, #99C4A8 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: #542a2a; --color-2: #6b4336; --color-3: #827358; --color-4: #919e86; --color-5: #99c4a8. 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