← Back to Editor

#74B398 · #88B897 · #A1BF8E · #CCC885 · #E0CA87

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 Library

Color Details Color Details

#74B398

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#74B398
RGB
rgb(116, 179, 152)
HSL
hsl(154, 29%, 58%)
HSB
hsb(154, 35%, 70%)
CMYK
cmyk(35%, 0%, 15%, 30%)
Oklch
oklch(71.6% 0.076 165.5)

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

#88B897

Celadon · DarkSeaGreen · Apple Green

HEX
#88B897
RGB
rgb(136, 184, 151)
HSL
hsl(139, 25%, 63%)
HSB
hsb(139, 26%, 72%)
CMYK
cmyk(26%, 0%, 18%, 28%)
Oklch
oklch(73.9% 0.070 154.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#A1BF8E

Celadon · DarkSeaGreen · Apple Green

HEX
#A1BF8E
RGB
rgb(161, 191, 142)
HSL
hsl(97, 28%, 65%)
HSB
hsb(97, 26%, 75%)
CMYK
cmyk(16%, 0%, 26%, 25%)
Oklch
oklch(77.0% 0.075 133.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#CCC885

Fresh Green · Tan · Sunflower

HEX
#CCC885
RGB
rgb(204, 200, 133)
HSL
hsl(57, 41%, 66%)
HSB
hsb(57, 35%, 80%)
CMYK
cmyk(0%, 2%, 35%, 20%)
Oklch
oklch(82.0% 0.087 105.2)

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

#E0CA87

Ginger · BurlyWood · Sunflower

HEX
#E0CA87
RGB
rgb(224, 202, 135)
HSL
hsl(45, 59%, 70%)
HSB
hsb(45, 40%, 88%)
CMYK
cmyk(0%, 10%, 40%, 12%)
Oklch
oklch(84.2% 0.089 92.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

74B398
B37590

Analogous

75B379
74B398
75AFB3

Triadic

74B398
9875B3
B39875

Split-Comp.

74B398
B375AF
B37975

Tetradic

74B398
7975B3
B37590
AFB375

Contrast Matrix WCAG 2.1 Contrast

74B398
88B897
A1BF8E
CCC885
E0CA87
—
1.1
Fail
1.2
Fail
1.4
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.5
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
White BG
2.4Fail
2.2Fail
2.0Fail
1.7Fail
1.6Fail
Black BG
8.6AAA
9.3AAA
10.4AAA
12.2AAA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F909F
9D9D9F
AEAE9A
CACA95
D6D697

Deuteranopia

8C87A0
9A96A1
ACAA9D
CBCB99
D8D99B

Tritanopia

77A4A5
8AA5A7
A3A3A5
CCA2A5
DFA4A7

Achromatopsia

9D9D9D
A6A6A6
B0B0B0
C2C2C2
C9C9C9

Shades & Tints Shades & Tints

#74B398

Dark
Light

#88B897

Dark
Light

#A1BF8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #74b398;
  --color-2: #88b897;
  --color-3: #a1bf8e;
  --color-4: #ccc885;
  --color-5: #e0ca87;
}

SCSS

$color-1: #74b398;
$color-2: #88b897;
$color-3: #a1bf8e;
$color-4: #ccc885;
$color-5: #e0ca87;

TAILWIND

colors: {
  'brand-1': '#74b398',
  'brand-2': '#88b897',
  'brand-3': '#a1bf8e',
  'brand-4': '#ccc885',
  'brand-5': '#e0ca87',
}

RGB Array

[116, 179, 152], [136, 184, 151], [161, 191, 142], [204, 200, 133], [224, 202, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #74B398, #88B897, #A1BF8E, #CCC885, #E0CA87 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: #74b398; --color-2: #88b897; --color-3: #a1bf8e; --color-4: #ccc885; --color-5: #e0ca87. 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