← Back to Editor

#633535 · #634949 · #786F5F · #84996E · #7BB879

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

#633535

Crimson · DarkOliveGreen · Wine Red

HEX
#633535
RGB
rgb(99, 53, 53)
HSL
hsl(0, 30%, 30%)
HSB
hsb(0, 46%, 39%)
CMYK
cmyk(0%, 46%, 46%, 61%)
Oklch
oklch(38.7% 0.066 20.6)

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

#634949

Crimson · DarkOliveGreen · Wine Red

HEX
#634949
RGB
rgb(99, 73, 73)
HSL
hsl(0, 15%, 34%)
HSB
hsb(0, 26%, 39%)
CMYK
cmyk(0%, 26%, 26%, 61%)
Oklch
oklch(43.3% 0.036 18.6)

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

#786F5F

Ochre · DimGray · Amber Brown

HEX
#786F5F
RGB
rgb(120, 111, 95)
HSL
hsl(38, 12%, 42%)
HSB
hsb(38, 21%, 47%)
CMYK
cmyk(0%, 7%, 21%, 53%)
Oklch
oklch(54.5% 0.027 82.0)

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

#84996E

Grass Green · Gray · Olive Green

HEX
#84996E
RGB
rgb(132, 153, 110)
HSL
hsl(89, 17%, 52%)
HSB
hsb(89, 28%, 60%)
CMYK
cmyk(14%, 0%, 28%, 40%)
Oklch
oklch(65.5% 0.066 129.2)

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

#7BB879

Celadon · DarkSeaGreen · Olive Green

HEX
#7BB879
RGB
rgb(123, 184, 121)
HSL
hsl(118, 31%, 60%)
HSB
hsb(118, 34%, 72%)
CMYK
cmyk(33%, 0%, 34%, 28%)
Oklch
oklch(72.5% 0.110 143.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

633535
366363

Analogous

63364D
633535
634D36

Triadic

633535
366336
363663

Split-Comp.

633535
36634D
364D63

Tetradic

633535
4D6336
366363
4D3663

Contrast Matrix WCAG 2.1 Contrast

633535
634949
786F5F
84996E
7BB879
—
1.2
Fail
2.0
Fail
3.2
AA Large
4.3
AA Large
1.2
Fail
—
1.6
Fail
2.6
Fail
3.5
AA Large
2.0
Fail
1.6
Fail
—
1.6
Fail
2.1
Fail
3.2
AA Large
2.6
Fail
1.6
Fail
—
1.3
Fail
4.3
AA Large
3.5
AA Large
2.1
Fail
1.3
Fail
—
White BG
10.0AAA
8.1AAA
5.0AA
3.1AA Large
2.3Fail
Black BG
2.1Fail
2.6Fail
4.2AA Large
6.8AA
9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F35
585849
747463
8D8D78
959688

Deuteranopia

525535
595B49
757564
8C8A7B
928D8C

Tritanopia

613535
624949
786667
858182
7E9497

Achromatopsia

434343
515151
707070
8E8E8E
9F9F9F

Shades & Tints Shades & Tints

#633535

Dark
Light

#634949

Dark
Light

#786F5F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #633535;
  --color-2: #634949;
  --color-3: #786f5f;
  --color-4: #84996e;
  --color-5: #7bb879;
}

SCSS

$color-1: #633535;
$color-2: #634949;
$color-3: #786f5f;
$color-4: #84996e;
$color-5: #7bb879;

TAILWIND

colors: {
  'brand-1': '#633535',
  'brand-2': '#634949',
  'brand-3': '#786f5f',
  'brand-4': '#84996e',
  'brand-5': '#7bb879',
}

RGB Array

[99, 53, 53], [99, 73, 73], [120, 111, 95], [132, 153, 110], [123, 184, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #633535, #634949, #786F5F, #84996E, #7BB879 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #633535; --color-2: #634949; --color-3: #786f5f; --color-4: #84996e; --color-5: #7bb879. 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. 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