← Back to Editor

#278C94 · #4EA5AC · #8BB67E · #BCCA75 · #EEDB8C

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

#278C94

Lake Blue · LightSeaGreen · Mint Ice

HEX
#278C94
RGB
rgb(39, 140, 148)
HSL
hsl(184, 58%, 37%)
HSB
hsb(184, 74%, 58%)
CMYK
cmyk(74%, 5%, 0%, 42%)
Oklch
oklch(58.8% 0.089 202.9)

TraditionalLake Blue」· PaintMint Ice」· Creative Blush Sunrise

#4EA5AC

Slate Blue · CadetBlue · Mint Ice

HEX
#4EA5AC
RGB
rgb(78, 165, 172)
HSL
hsl(184, 38%, 49%)
HSB
hsb(184, 55%, 67%)
CMYK
cmyk(55%, 4%, 0%, 33%)
Oklch
oklch(67.1% 0.084 202.4)

TraditionalSlate Blue」· PaintMint Ice」· Creative Blush Sunrise

#8BB67E

Celadon · DarkSeaGreen · Olive Green

HEX
#8BB67E
RGB
rgb(139, 182, 126)
HSL
hsl(106, 28%, 60%)
HSB
hsb(106, 31%, 71%)
CMYK
cmyk(24%, 0%, 31%, 29%)
Oklch
oklch(73.1% 0.091 138.5)

TraditionalCeladon」· PaintOlive Green」· Creative Blush Sunrise

#BCCA75

Willow Green · Tan · Apple Green

HEX
#BCCA75
RGB
rgb(188, 202, 117)
HSL
hsl(70, 45%, 63%)
HSB
hsb(70, 42%, 79%)
CMYK
cmyk(7%, 0%, 42%, 21%)
Oklch
oklch(80.9% 0.110 116.6)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#EEDB8C

Goose Yellow · Khaki · Sunflower

HEX
#EEDB8C
RGB
rgb(238, 219, 140)
HSL
hsl(48, 74%, 74%)
HSB
hsb(48, 41%, 93%)
CMYK
cmyk(0%, 8%, 41%, 7%)
Oklch
oklch(89.0% 0.101 96.3)

TraditionalGoose Yellow」· PaintSunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

278C94
952F28

Analogous

289566
278C94
285795

Triadic

278C94
95288E
8E9528

Split-Comp.

278C94
952857
956628

Tetradic

278C94
662895
952F28
579528

Contrast Matrix WCAG 2.1 Contrast

278C94
4EA5AC
8BB67E
BCCA75
EEDB8C
1.4
Fail
1.7
Fail
2.2
Fail
2.9
Fail
1.4
Fail
1.2
Fail
1.6
Fail
2.1
Fail
1.7
Fail
1.2
Fail
1.3
Fail
1.7
Fail
2.2
Fail
1.6
Fail
1.3
Fail
1.3
Fail
2.9
Fail
2.1
Fail
1.7
Fail
1.3
Fail
White BG
4.0AA Large
2.9Fail
2.3Fail
1.8Fail
1.4Fail
Black BG
5.3AA
7.3AAA
9.1AAA
11.8AAA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

535492
7474AA
9E9E8C
C2C28A
E6E69F

Deuteranopia

4D4592
6F68AA
9B988F
C1C08F
E7E8A4

Tritanopia

2C9190
52A9A9
8D9699
BD9A9D
EDAEB2

Achromatopsia

6F6F6F
8C8C8C
A3A3A3
BCBCBC
D8D8D8

Shades & Tints Shades & Tints

#278C94

Dark
Light

#4EA5AC

Dark
Light

#8BB67E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #278c94;
  --color-2: #4ea5ac;
  --color-3: #8bb67e;
  --color-4: #bcca75;
  --color-5: #eedb8c;
}

SCSS

$color-1: #278c94;
$color-2: #4ea5ac;
$color-3: #8bb67e;
$color-4: #bcca75;
$color-5: #eedb8c;

TAILWIND

colors: {
  'brand-1': '#278c94',
  'brand-2': '#4ea5ac',
  'brand-3': '#8bb67e',
  'brand-4': '#bcca75',
  'brand-5': '#eedb8c',
}

RGB Array

[39, 140, 148], [78, 165, 172], [139, 182, 126], [188, 202, 117], [238, 219, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #278C94, #4EA5AC, #8BB67E, #BCCA75, #EEDB8C 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: #278c94; --color-2: #4ea5ac; --color-3: #8bb67e; --color-4: #bcca75; --color-5: #eedb8c. 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