← Back to Editor

#EEFE10 · #B4DBCB · #9DB8C9 · #8497B8 · #656C7D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#EEFE10

Autumn Sage · Yellow · Sunflower

HEX
#EEFE10
RGB
rgb(238, 254, 16)
HSL
hsl(64, 99%, 53%)
HSB
hsb(64, 94%, 100%)
CMYK
cmyk(6%, 0%, 94%, 0%)
Oklch
oklch(95.3% 0.213 114.3)

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

#B4DBCB

Jade · LightBlue · Apple Green

HEX
#B4DBCB
RGB
rgb(180, 219, 203)
HSL
hsl(155, 35%, 78%)
HSB
hsb(155, 18%, 86%)
CMYK
cmyk(18%, 0%, 7%, 14%)
Oklch
oklch(85.9% 0.047 168.4)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#9DB8C9

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#9DB8C9
RGB
rgb(157, 184, 201)
HSL
hsl(203, 29%, 70%)
HSB
hsb(203, 22%, 79%)
CMYK
cmyk(22%, 8%, 0%, 21%)
Oklch
oklch(76.8% 0.038 235.6)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#8497B8

Azure · LightSlateGray · Cobalt Blue

HEX
#8497B8
RGB
rgb(132, 151, 184)
HSL
hsl(218, 27%, 62%)
HSB
hsb(218, 28%, 72%)
CMYK
cmyk(28%, 18%, 0%, 28%)
Oklch
oklch(67.3% 0.054 261.4)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#656C7D

Indigo · DimGray · Navy Blue

HEX
#656C7D
RGB
rgb(101, 108, 125)
HSL
hsl(222, 11%, 44%)
HSB
hsb(222, 19%, 49%)
CMYK
cmyk(19%, 14%, 0%, 51%)
Oklch
oklch(53.1% 0.028 267.7)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EEFE10
2010FE

Analogous

FE9710
EEFE10
77FE10

Triadic

EEFE10
10EEFE
FE10EE

Split-Comp.

EEFE10
1077FE
9710FE

Tetradic

EEFE10
10FE97
2010FE
FE1077

Contrast Matrix WCAG 2.1 Contrast

EEFE10
B4DBCB
9DB8C9
8497B8
656C7D
—
1.4
Fail
1.9
Fail
2.7
Fail
4.7
AA
1.4
Fail
—
1.4
Fail
2.0
Fail
3.5
AA Large
1.9
Fail
1.4
Fail
—
1.4
Fail
2.5
Fail
2.7
Fail
2.0
Fail
1.4
Fail
—
1.8
Fail
4.7
AA
3.5
AA Large
2.5
Fail
1.8
Fail
—
White BG
1.1Fail
1.5Fail
2.1Fail
3.0Fail
5.3AA
Black BG
18.8AAA
13.9AAA
10.1AAA
7.1AAA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F54A
C5C5CF
A9A9C5
8C8CB0
686879

Deuteranopia

F4F357
C3C0D0
A7A5C4
8B8AAE
686778

Tritanopia

EF7781
B6D2D3
9EC2C1
85AAA8
657675

Achromatopsia

DEDEDE
CECECE
B2B2B2
959595
6C6C6C

Shades & Tints Shades & Tints

#EEFE10

Dark
Light

#B4DBCB

Dark
Light

#9DB8C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #eefe10;
  --color-2: #b4dbcb;
  --color-3: #9db8c9;
  --color-4: #8497b8;
  --color-5: #656c7d;
}

SCSS

$color-1: #eefe10;
$color-2: #b4dbcb;
$color-3: #9db8c9;
$color-4: #8497b8;
$color-5: #656c7d;

TAILWIND

colors: {
  'brand-1': '#eefe10',
  'brand-2': '#b4dbcb',
  'brand-3': '#9db8c9',
  'brand-4': '#8497b8',
  'brand-5': '#656c7d',
}

RGB Array

[238, 254, 16], [180, 219, 203], [157, 184, 201], [132, 151, 184], [101, 108, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EEFE10, #B4DBCB, #9DB8C9, #8497B8, #656C7D 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: #eefe10; --color-2: #b4dbcb; --color-3: #9db8c9; --color-4: #8497b8; --color-5: #656c7d. 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