← Back to Editor

#2FA38C · #B9AE77 · #F5D8A4 · #E5BA76 · #417D70

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

#2FA38C

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#2FA38C
RGB
rgb(47, 163, 140)
HSL
hsl(168, 55%, 41%)
HSB
hsb(168, 71%, 64%)
CMYK
cmyk(71%, 0%, 14%, 36%)
Oklch
oklch(64.6% 0.107 176.4)

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

#B9AE77

Autumn Sage · Tan · Sunflower

HEX
#B9AE77
RGB
rgb(185, 174, 119)
HSL
hsl(50, 32%, 60%)
HSB
hsb(50, 36%, 73%)
CMYK
cmyk(0%, 6%, 36%, 27%)
Oklch
oklch(74.7% 0.074 98.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F5D8A4

Goose Yellow · Wheat · Peach Orange

HEX
#F5D8A4
RGB
rgb(245, 216, 164)
HSL
hsl(39, 80%, 80%)
HSB
hsb(39, 33%, 96%)
CMYK
cmyk(0%, 12%, 33%, 4%)
Oklch
oklch(89.4% 0.074 81.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E5BA76

Ginger · BurlyWood · Warm Sun

HEX
#E5BA76
RGB
rgb(229, 186, 118)
HSL
hsl(37, 68%, 68%)
HSB
hsb(37, 48%, 90%)
CMYK
cmyk(0%, 19%, 48%, 10%)
Oklch
oklch(81.2% 0.099 78.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#417D70

Mineral Blue · SeaGreen · Mint Ice

HEX
#417D70
RGB
rgb(65, 125, 112)
HSL
hsl(167, 32%, 37%)
HSB
hsb(167, 48%, 49%)
CMYK
cmyk(48%, 0%, 10%, 51%)
Oklch
oklch(54.5% 0.066 177.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2FA38C
A22F46

Analogous

2FA252
2FA38C
2F80A2

Triadic

2FA38C
8B2FA2
A28B2F

Split-Comp.

2FA38C
A22F80
A2522F

Tetradic

2FA38C
522FA2
A22F46
80A22F

Contrast Matrix WCAG 2.1 Contrast

2FA38C
B9AE77
F5D8A4
E5BA76
417D70
—
1.4
Fail
2.3
Fail
1.7
Fail
1.5
Fail
1.4
Fail
—
1.6
Fail
1.2
Fail
2.1
Fail
2.3
Fail
1.6
Fail
—
1.3
Fail
3.5
AA Large
1.7
Fail
1.2
Fail
1.3
Fail
—
2.6
Fail
1.5
Fail
2.1
Fail
3.5
AA Large
2.6
Fail
—
White BG
3.1AA Large
2.2Fail
1.4Fail
1.8Fail
4.8AA
Black BG
6.7AA
9.4AAA
15.2AAA
11.6AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

616292
B4B484
E8E8B1
D2D286
5B5C73

Deuteranopia

5B5293
B5B688
EAECB4
D5D88A
585374

Tritanopia

359697
B88F91
F4BBBD
E39396
447676

Achromatopsia

7E7E7E
ABABAB
DBDBDB
BFBFBF
6A6A6A

Shades & Tints Shades & Tints

#2FA38C

Dark
Light

#B9AE77

Dark
Light

#F5D8A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2fa38c;
  --color-2: #b9ae77;
  --color-3: #f5d8a4;
  --color-4: #e5ba76;
  --color-5: #417d70;
}

SCSS

$color-1: #2fa38c;
$color-2: #b9ae77;
$color-3: #f5d8a4;
$color-4: #e5ba76;
$color-5: #417d70;

TAILWIND

colors: {
  'brand-1': '#2fa38c',
  'brand-2': '#b9ae77',
  'brand-3': '#f5d8a4',
  'brand-4': '#e5ba76',
  'brand-5': '#417d70',
}

RGB Array

[47, 163, 140], [185, 174, 119], [245, 216, 164], [229, 186, 118], [65, 125, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2FA38C, #B9AE77, #F5D8A4, #E5BA76, #417D70 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: #2fa38c; --color-2: #b9ae77; --color-3: #f5d8a4; --color-4: #e5ba76; --color-5: #417d70. 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