← Back to Editor

#2F9E9E · #325C66 · #97A788 · #EEF189 · #FFCF33

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

#2F9E9E

Lake Blue · LightSeaGreen · Mint Ice

HEX
#2F9E9E
RGB
rgb(47, 158, 158)
HSL
hsl(180, 54%, 40%)
HSB
hsb(180, 70%, 62%)
CMYK
cmyk(70%, 0%, 0%, 38%)
Oklch
oklch(63.9% 0.096 195.0)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#325C66

Slate Blue · DarkSlateGray · Mint Ice

HEX
#325C66
RGB
rgb(50, 92, 102)
HSL
hsl(192, 34%, 30%)
HSB
hsb(192, 51%, 40%)
CMYK
cmyk(51%, 10%, 0%, 60%)
Oklch
oklch(44.8% 0.050 214.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#97A788

Celadon · DarkSeaGreen · Olive Green

HEX
#97A788
RGB
rgb(151, 167, 136)
HSL
hsl(91, 15%, 59%)
HSB
hsb(91, 19%, 65%)
CMYK
cmyk(10%, 0%, 19%, 35%)
Oklch
oklch(70.7% 0.047 129.8)

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

#EEF189

Fresh Green · Khaki · Sunflower

HEX
#EEF189
RGB
rgb(238, 241, 137)
HSL
hsl(62, 79%, 74%)
HSB
hsb(62, 43%, 95%)
CMYK
cmyk(1%, 0%, 43%, 5%)
Oklch
oklch(93.4% 0.127 110.1)

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

#FFCF33

Ginger · Gold · Sunflower

HEX
#FFCF33
RGB
rgb(255, 207, 51)
HSL
hsl(46, 100%, 60%)
HSB
hsb(46, 80%, 100%)
CMYK
cmyk(0%, 19%, 80%, 0%)
Oklch
oklch(87.2% 0.166 90.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F9E9E
9D2F2F

Analogous

2F9D66
2F9E9E
2F669D

Triadic

2F9E9E
9D2F9D
9D9D2F

Split-Comp.

2F9E9E
9D2F66
9D662F

Tetradic

2F9E9E
662F9D
9D2F2F
669D2F

Contrast Matrix WCAG 2.1 Contrast

2F9E9E
325C66
97A788
EEF189
FFCF33
—
2.3
Fail
1.3
Fail
2.7
Fail
2.2
Fail
2.3
Fail
—
2.9
Fail
6.1
AA
5.0
AA
1.3
Fail
2.9
Fail
—
2.1
Fail
1.7
Fail
2.7
Fail
6.1
AA
2.1
Fail
—
1.2
Fail
2.2
Fail
5.0
AA
1.7
Fail
1.2
Fail
—
White BG
3.2AA Large
7.3AAA
2.6Fail
1.2Fail
1.5Fail
Black BG
6.5AA
2.9Fail
8.2AAA
17.6AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F609E
444564
9E9E90
EFEFA2
EAEA59

Deuteranopia

59509E
423F63
9D9C91
EFEFA8
EDF162

Tritanopia

359E9E
346261
989597
EEB6BA
FD777D

Achromatopsia

7D7D7D
515151
9F9F9F
E4E4E4
CCCCCC

Shades & Tints Shades & Tints

#2F9E9E

Dark
Light

#325C66

Dark
Light

#97A788

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f9e9e;
  --color-2: #325c66;
  --color-3: #97a788;
  --color-4: #eef189;
  --color-5: #ffcf33;
}

SCSS

$color-1: #2f9e9e;
$color-2: #325c66;
$color-3: #97a788;
$color-4: #eef189;
$color-5: #ffcf33;

TAILWIND

colors: {
  'brand-1': '#2f9e9e',
  'brand-2': '#325c66',
  'brand-3': '#97a788',
  'brand-4': '#eef189',
  'brand-5': '#ffcf33',
}

RGB Array

[47, 158, 158], [50, 92, 102], [151, 167, 136], [238, 241, 137], [255, 207, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F9E9E, #325C66, #97A788, #EEF189, #FFCF33 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: #2f9e9e; --color-2: #325c66; --color-3: #97a788; --color-4: #eef189; --color-5: #ffcf33. 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