← Back to Editor

#97A832 · #FFFFCC · #55BDAB · #30302E · #E87B5A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#97A832

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#97A832
RGB
rgb(151, 168, 50)
HSL
hsl(69, 54%, 43%)
HSB
hsb(69, 70%, 66%)
CMYK
cmyk(10%, 0%, 70%, 34%)
Oklch
oklch(69.6% 0.141 117.3)

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

#FFFFCC

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFCC
RGB
rgb(255, 255, 204)
HSL
hsl(60, 100%, 90%)
HSB
hsb(60, 20%, 100%)
CMYK
cmyk(0%, 0%, 20%, 0%)
Oklch
oklch(98.8% 0.065 107.5)

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

#55BDAB

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#55BDAB
RGB
rgb(85, 189, 171)
HSL
hsl(170, 44%, 54%)
HSB
hsb(170, 55%, 74%)
CMYK
cmyk(55%, 0%, 10%, 26%)
Oklch
oklch(73.2% 0.100 180.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#30302E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#30302E
RGB
rgb(48, 48, 46)
HSL
hsl(60, 2%, 18%)
HSB
hsb(60, 4%, 19%)
CMYK
cmyk(0%, 0%, 4%, 81%)
Oklch
oklch(30.8% 0.004 106.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#E87B5A

Peach Pink · Coral · Coral Red

HEX
#E87B5A
RGB
rgb(232, 123, 90)
HSL
hsl(14, 76%, 63%)
HSB
hsb(14, 61%, 91%)
CMYK
cmyk(0%, 47%, 61%, 9%)
Oklch
oklch(69.9% 0.143 37.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97A832
4432A9

Analogous

A97F32
97A832
5CA932

Triadic

97A832
3297A9
A93297

Split-Comp.

97A832
325CA9
7F32A9

Tetradic

97A832
32A97F
4432A9
A9325C

Contrast Matrix WCAG 2.1 Contrast

97A832
FFFFCC
55BDAB
30302E
E87B5A
—
2.6
Fail
1.2
Fail
5.0
AA
1.1
Fail
2.6
Fail
—
2.2
Fail
12.9
AAA
2.8
Fail
1.2
Fail
2.2
Fail
—
5.8
AA
1.2
Fail
5.0
AA
12.9
AAA
5.8
AA
—
4.7
AA
1.1
Fail
2.8
Fail
1.2
Fail
4.7
AA
—
White BG
2.6Fail
1.0Fail
2.3Fail
13.2AAA
2.8Fail
Black BG
8.0AAA
20.4AAA
9.3AAA
1.6Fail
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9F4F
FFFFD8
8283AF
30302E
B9B862

Deuteranopia

9D9C55
FFFFDB
7C74B0
30302F
BFC764

Tritanopia

98656A
FFE2E4
5AB3B4
302F2F
E3686A

Achromatopsia

959595
F9F9F9
9C9C9C
303030
989898

Shades & Tints Shades & Tints

#97A832

Dark
Light

#FFFFCC

Dark
Light

#55BDAB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97a832;
  --color-2: #ffffcc;
  --color-3: #55bdab;
  --color-4: #30302e;
  --color-5: #e87b5a;
}

SCSS

$color-1: #97a832;
$color-2: #ffffcc;
$color-3: #55bdab;
$color-4: #30302e;
$color-5: #e87b5a;

TAILWIND

colors: {
  'brand-1': '#97a832',
  'brand-2': '#ffffcc',
  'brand-3': '#55bdab',
  'brand-4': '#30302e',
  'brand-5': '#e87b5a',
}

RGB Array

[151, 168, 50], [255, 255, 204], [85, 189, 171], [48, 48, 46], [232, 123, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #97A832, #FFFFCC, #55BDAB, #30302E, #E87B5A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #97a832; --color-2: #ffffcc; --color-3: #55bdab; --color-4: #30302e; --color-5: #e87b5a. 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. 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