← Back to Editor

#65A579 · #8AAF7C · #D6C361 · #C05A5A · #685B5B

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

#65A579

Celadon · CadetBlue · Olive Green

HEX
#65A579
RGB
rgb(101, 165, 121)
HSL
hsl(139, 26%, 52%)
HSB
hsb(139, 39%, 65%)
CMYK
cmyk(39%, 0%, 27%, 35%)
Oklch
oklch(66.6% 0.093 153.2)

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

#8AAF7C

Celadon · DarkSeaGreen · Olive Green

HEX
#8AAF7C
RGB
rgb(138, 175, 124)
HSL
hsl(104, 24%, 59%)
HSB
hsb(104, 29%, 69%)
CMYK
cmyk(21%, 0%, 29%, 31%)
Oklch
oklch(71.3% 0.082 137.3)

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

#D6C361

Fresh Green · BurlyWood · Sunflower

HEX
#D6C361
RGB
rgb(214, 195, 97)
HSL
hsl(50, 59%, 61%)
HSB
hsb(50, 55%, 84%)
CMYK
cmyk(0%, 9%, 55%, 16%)
Oklch
oklch(81.3% 0.121 98.5)

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

#C05A5A

Crimson · Sienna · Passion Red

HEX
#C05A5A
RGB
rgb(192, 90, 90)
HSL
hsl(0, 45%, 55%)
HSB
hsb(0, 53%, 75%)
CMYK
cmyk(0%, 53%, 53%, 25%)
Oklch
oklch(59.3% 0.132 21.9)

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

#685B5B

Ink Gray · DimGray · Charcoal

HEX
#685B5B
RGB
rgb(104, 91, 91)
HSL
hsl(0, 7%, 38%)
HSB
hsb(0, 12%, 41%)
CMYK
cmyk(0%, 12%, 12%, 59%)
Oklch
oklch(48.4% 0.017 17.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

65A579
A46590

Analogous

70A465
65A579
65A499

Triadic

65A579
7965A4
A47965

Split-Comp.

65A579
9965A4
A46570

Tetradic

65A579
6570A4
A46590
A49965

Contrast Matrix WCAG 2.1 Contrast

65A579
8AAF7C
D6C361
C05A5A
685B5B
—
1.2
Fail
1.6
Fail
1.5
Fail
2.2
Fail
1.2
Fail
—
1.4
Fail
1.8
Fail
2.6
Fail
1.6
Fail
1.4
Fail
—
2.4
Fail
3.7
AA Large
1.5
Fail
1.8
Fail
2.4
Fail
—
1.5
Fail
2.2
Fail
2.6
Fail
3.7
AA Large
1.5
Fail
—
White BG
2.9Fail
2.5Fail
1.8Fail
4.3AA Large
6.5AA
Black BG
7.2AAA
8.5AAA
11.8AAA
4.9AA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

818184
9A9A88
CECE79
94935A
62625B

Deuteranopia

7D7886
98958B
CFD07E
9AA15A
63645B

Tritanopia

688C8E
8C9294
D58B90
BB5A5A
675B5B

Achromatopsia

8D8D8D
9E9E9E
BEBEBE
787878
5F5F5F

Shades & Tints Shades & Tints

#65A579

Dark
Light

#8AAF7C

Dark
Light

#D6C361

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #65a579;
  --color-2: #8aaf7c;
  --color-3: #d6c361;
  --color-4: #c05a5a;
  --color-5: #685b5b;
}

SCSS

$color-1: #65a579;
$color-2: #8aaf7c;
$color-3: #d6c361;
$color-4: #c05a5a;
$color-5: #685b5b;

TAILWIND

colors: {
  'brand-1': '#65a579',
  'brand-2': '#8aaf7c',
  'brand-3': '#d6c361',
  'brand-4': '#c05a5a',
  'brand-5': '#685b5b',
}

RGB Array

[101, 165, 121], [138, 175, 124], [214, 195, 97], [192, 90, 90], [104, 91, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #65A579, #8AAF7C, #D6C361, #C05A5A, #685B5B 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: #65a579; --color-2: #8aaf7c; --color-3: #d6c361; --color-4: #c05a5a; --color-5: #685b5b. 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