← Back to Editor

#6D9E70 · #8A9959 · #CC974E · #FF6F59 · #F00C54

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

#6D9E70

Celadon · Gray · Olive Green

HEX
#6D9E70
RGB
rgb(109, 158, 112)
HSL
hsl(124, 20%, 52%)
HSB
hsb(124, 31%, 62%)
CMYK
cmyk(31%, 0%, 29%, 38%)
Oklch
oklch(65.2% 0.086 146.0)

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

#8A9959

Grass Green · Gray · Olive Green

HEX
#8A9959
RGB
rgb(138, 153, 89)
HSL
hsl(74, 26%, 47%)
HSB
hsb(74, 42%, 60%)
CMYK
cmyk(10%, 0%, 42%, 40%)
Oklch
oklch(65.6% 0.089 119.7)

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

#CC974E

Ginger · SandyBrown · Warm Sun

HEX
#CC974E
RGB
rgb(204, 151, 78)
HSL
hsl(35, 55%, 55%)
HSB
hsb(35, 62%, 80%)
CMYK
cmyk(0%, 26%, 62%, 20%)
Oklch
oklch(71.3% 0.110 73.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FF6F59

Peach Pink · Coral · Coral Red

HEX
#FF6F59
RGB
rgb(255, 111, 89)
HSL
hsl(8, 100%, 67%)
HSB
hsb(8, 65%, 100%)
CMYK
cmyk(0%, 56%, 65%, 0%)
Oklch
oklch(71.4% 0.180 30.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F00C54

Dark Violet · Crimson · Camellia

HEX
#F00C54
RGB
rgb(240, 12, 84)
HSL
hsl(341, 90%, 49%)
HSB
hsb(341, 95%, 94%)
CMYK
cmyk(0%, 95%, 65%, 6%)
Oklch
oklch(61.0% 0.240 14.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6D9E70
9D6C9A

Analogous

819D6C
6D9E70
6C9D88

Triadic

6D9E70
6F6C9D
9D6F6C

Split-Comp.

6D9E70
886C9D
9D6C81

Tetradic

6D9E70
6C819D
9D6C9A
9D886C

Contrast Matrix WCAG 2.1 Contrast

6D9E70
8A9959
CC974E
FF6F59
F00C54
—
1.0
Fail
1.2
Fail
1.1
Fail
1.4
Fail
1.0
Fail
—
1.2
Fail
1.1
Fail
1.4
Fail
1.2
Fail
1.2
Fail
—
1.1
Fail
1.7
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.6
Fail
1.4
Fail
1.4
Fail
1.7
Fail
1.6
Fail
—
White BG
3.1AA Large
3.1AA Large
2.6Fail
2.7Fail
4.3AA Large
Black BG
6.8AA
6.8AA
8.1AAA
7.7AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82837B
909168
B5B560
C1BF5E
8D8B43

Deuteranopia

7F7C7E
908F6C
B8BC64
C9D460
9BAC3E

Tritanopia

6F8486
8B7577
C96E71
F86363
E53532

Achromatopsia

8A8A8A
8D8D8D
9F9F9F
989898
585858

Shades & Tints Shades & Tints

#6D9E70

Dark
Light

#8A9959

Dark
Light

#CC974E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6d9e70;
  --color-2: #8a9959;
  --color-3: #cc974e;
  --color-4: #ff6f59;
  --color-5: #f00c54;
}

SCSS

$color-1: #6d9e70;
$color-2: #8a9959;
$color-3: #cc974e;
$color-4: #ff6f59;
$color-5: #f00c54;

TAILWIND

colors: {
  'brand-1': '#6d9e70',
  'brand-2': '#8a9959',
  'brand-3': '#cc974e',
  'brand-4': '#ff6f59',
  'brand-5': '#f00c54',
}

RGB Array

[109, 158, 112], [138, 153, 89], [204, 151, 78], [255, 111, 89], [240, 12, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6D9E70, #8A9959, #CC974E, #FF6F59, #F00C54 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: #6d9e70; --color-2: #8a9959; --color-3: #cc974e; --color-4: #ff6f59; --color-5: #f00c54. 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