← Back to Editor

#7EA894 · #B9C89D · #D8D79F · #F7BB59 · #D33B54

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

#7EA894

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#7EA894
RGB
rgb(126, 168, 148)
HSL
hsl(151, 19%, 58%)
HSB
hsb(151, 25%, 66%)
CMYK
cmyk(25%, 0%, 12%, 34%)
Oklch
oklch(69.5% 0.054 164.1)

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

#B9C89D

Willow Green · Tan · Apple Green

HEX
#B9C89D
RGB
rgb(185, 200, 157)
HSL
hsl(81, 28%, 70%)
HSB
hsb(81, 21%, 78%)
CMYK
cmyk(8%, 0%, 21%, 22%)
Oklch
oklch(81.0% 0.061 123.4)

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

#D8D79F

Fresh Green · Khaki · Sunflower

HEX
#D8D79F
RGB
rgb(216, 215, 159)
HSL
hsl(59, 42%, 74%)
HSB
hsb(59, 26%, 85%)
CMYK
cmyk(0%, 0%, 26%, 15%)
Oklch
oklch(86.6% 0.073 107.0)

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

#F7BB59

Ginger · SandyBrown · Warm Sun

HEX
#F7BB59
RGB
rgb(247, 187, 89)
HSL
hsl(37, 91%, 66%)
HSB
hsb(37, 64%, 97%)
CMYK
cmyk(0%, 24%, 64%, 3%)
Oklch
oklch(82.9% 0.133 77.3)

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

#D33B54

Vermilion · Crimson · Passion Red

HEX
#D33B54
RGB
rgb(211, 59, 84)
HSL
hsl(350, 63%, 53%)
HSB
hsb(350, 72%, 83%)
CMYK
cmyk(0%, 72%, 60%, 17%)
Oklch
oklch(58.4% 0.188 16.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7EA894
A88093

Analogous

80A880
7EA894
80A8A8

Triadic

7EA894
9580A8
A89580

Split-Comp.

7EA894
A880A8
A88080

Tetradic

7EA894
8080A8
A88093
A8A880

Contrast Matrix WCAG 2.1 Contrast

7EA894
B9C89D
D8D79F
F7BB59
D33B54
—
1.5
Fail
1.8
Fail
1.5
Fail
1.7
Fail
1.5
Fail
—
1.2
Fail
1.0
Fail
2.6
Fail
1.8
Fail
1.2
Fail
—
1.2
Fail
3.1
AA Large
1.5
Fail
1.0
Fail
1.2
Fail
—
2.7
Fail
1.7
Fail
2.6
Fail
3.1
AA Large
2.7
Fail
—
White BG
2.7Fail
1.8Fail
1.5Fail
1.7Fail
4.6AA
Black BG
7.9AAA
11.8AAA
14.1AAA
12.2AAA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

909199
BFC0A7
D8D8AD
DDDC71
91904E

Deuteranopia

8E8B9A
BFBEAA
D8D8B0
E1E576
9AA54D

Tritanopia

809D9E
BAB0B1
D8B7BA
F48388
CB4948

Achromatopsia

999999
BFBFBF
D1D1D1
C2C2C2
6B6B6B

Shades & Tints Shades & Tints

#7EA894

Dark
Light

#B9C89D

Dark
Light

#D8D79F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ea894;
  --color-2: #b9c89d;
  --color-3: #d8d79f;
  --color-4: #f7bb59;
  --color-5: #d33b54;
}

SCSS

$color-1: #7ea894;
$color-2: #b9c89d;
$color-3: #d8d79f;
$color-4: #f7bb59;
$color-5: #d33b54;

TAILWIND

colors: {
  'brand-1': '#7ea894',
  'brand-2': '#b9c89d',
  'brand-3': '#d8d79f',
  'brand-4': '#f7bb59',
  'brand-5': '#d33b54',
}

RGB Array

[126, 168, 148], [185, 200, 157], [216, 215, 159], [247, 187, 89], [211, 59, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7EA894, #B9C89D, #D8D79F, #F7BB59, #D33B54 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: #7ea894; --color-2: #b9c89d; --color-3: #d8d79f; --color-4: #f7bb59; --color-5: #d33b54. 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