← Back to Editor

#664551 · #98E30E · #848723 · #85233A · #A4A67B

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

#664551

Dark Violet · DimGray · Camellia

HEX
#664551
RGB
rgb(102, 69, 81)
HSL
hsl(338, 19%, 34%)
HSB
hsb(338, 32%, 40%)
CMYK
cmyk(0%, 32%, 21%, 60%)
Oklch
oklch(43.1% 0.049 355.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#98E30E

Grass Green · Chartreuse · Olive Green

HEX
#98E30E
RGB
rgb(152, 227, 14)
HSL
hsl(81, 88%, 47%)
HSB
hsb(81, 94%, 89%)
CMYK
cmyk(33%, 0%, 94%, 11%)
Oklch
oklch(83.5% 0.222 129.8)

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

#848723

Autumn Sage · Olive · Honey Gold

HEX
#848723
RGB
rgb(132, 135, 35)
HSL
hsl(62, 59%, 33%)
HSB
hsb(62, 74%, 53%)
CMYK
cmyk(2%, 0%, 74%, 47%)
Oklch
oklch(60.2% 0.119 111.2)

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

#85233A

Crimson · Brown · Wine Red

HEX
#85233A
RGB
rgb(133, 35, 58)
HSL
hsl(346, 58%, 33%)
HSB
hsb(346, 74%, 52%)
CMYK
cmyk(0%, 74%, 56%, 48%)
Oklch
oklch(41.9% 0.133 11.4)

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

#A4A67B

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A4A67B
RGB
rgb(164, 166, 123)
HSL
hsl(63, 19%, 57%)
HSB
hsb(63, 26%, 65%)
CMYK
cmyk(1%, 0%, 26%, 35%)
Oklch
oklch(71.2% 0.059 110.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

664551
46675B

Analogous

674663
664551
674B46

Triadic

664551
526746
465267

Split-Comp.

664551
46674B
466367

Tetradic

664551
636746
46675B
4B4667

Contrast Matrix WCAG 2.1 Contrast

664551
98E30E
848723
85233A
A4A67B
—
5.3
AA
2.2
Fail
1.1
Fail
3.3
AA Large
5.3
AA
—
2.4
Fail
5.8
AA
1.6
Fail
2.2
Fail
2.4
Fail
—
2.4
Fail
1.5
Fail
1.1
Fail
5.8
AA
2.4
Fail
—
3.6
AA Large
3.3
AA Large
1.6
Fail
1.5
Fail
3.6
AA Large
—
White BG
8.3AAA
1.6Fail
3.8AA Large
9.1AAA
2.5Fail
Black BG
2.5Fail
13.3AAA
5.5AA
2.3Fail
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

58574E
B8B942
85853B
5B5A34
A5A585

Deuteranopia

5A5C4D
B4AF4E
858541
606833
A5A588

Tritanopia

644C4B
9C6A73
844E53
80302F
A48E8F

Achromatopsia

505050
B4B4B4
7B7B7B
434343
A1A1A1

Shades & Tints Shades & Tints

#664551

Dark
Light

#98E30E

Dark
Light

#848723

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #664551;
  --color-2: #98e30e;
  --color-3: #848723;
  --color-4: #85233a;
  --color-5: #a4a67b;
}

SCSS

$color-1: #664551;
$color-2: #98e30e;
$color-3: #848723;
$color-4: #85233a;
$color-5: #a4a67b;

TAILWIND

colors: {
  'brand-1': '#664551',
  'brand-2': '#98e30e',
  'brand-3': '#848723',
  'brand-4': '#85233a',
  'brand-5': '#a4a67b',
}

RGB Array

[102, 69, 81], [152, 227, 14], [132, 135, 35], [133, 35, 58], [164, 166, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #664551, #98E30E, #848723, #85233A, #A4A67B 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: #664551; --color-2: #98e30e; --color-3: #848723; --color-4: #85233a; --color-5: #a4a67b. 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