#BBE5E7 + #5D9DAA + #D8E7AA + #9FB86E + #E66135 · bright - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBE5E7

Sky Blue · LightBlue · Glacier Blue

HEX

#BBE5E7

RGB

rgb(187, 229, 231)

HSL

hsl(183, 48%, 82%)

HSB

hsb(183, 19%, 91%)

CMYK

cmyk(19%, 1%, 0%, 9%)

Oklch

oklch(89.3% 0.044 200.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#5D9DAA

Slate Blue · CadetBlue · Lake Green

HEX

#5D9DAA

RGB

rgb(93, 157, 170)

HSL

hsl(190, 31%, 52%)

HSB

hsb(190, 45%, 67%)

CMYK

cmyk(45%, 8%, 0%, 33%)

Oklch

oklch(65.8% 0.068 212.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#D8E7AA

Willow Green · Wheat · Apple Green

HEX

#D8E7AA

RGB

rgb(216, 231, 170)

HSL

hsl(75, 56%, 79%)

HSB

hsb(75, 26%, 91%)

CMYK

cmyk(6%, 0%, 26%, 9%)

Oklch

oklch(90.2% 0.081 119.3)

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

#9FB86E

Grass Green · DarkSeaGreen · Olive Green

HEX

#9FB86E

RGB

rgb(159, 184, 110)

HSL

hsl(80, 34%, 58%)

HSB

hsb(80, 40%, 72%)

CMYK

cmyk(14%, 0%, 40%, 28%)

Oklch

oklch(74.6% 0.103 124.1)

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

#E66135

Tangerine · Tomato · Warm Sun

HEX

#E66135

RGB

rgb(230, 97, 53)

HSL

hsl(15, 78%, 55%)

HSB

hsb(15, 77%, 90%)

CMYK

cmyk(0%, 58%, 77%, 10%)

Oklch

oklch(65.4% 0.176 38.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBE5E7

E7BDBB

Analogous

BBE7D3

BBE5E7

BBCFE7

Triadic

BBE5E7

E7BBE5

E5E7BB

Split-Comp.

BBE5E7

E7BBCF

E7D3BB

Tetradic

BBE5E7

D3BBE7

E7BDBB

CFE7BB

Contrast Matrix WCAG 2.1 Contrast

BBE5E7	5D9DAA	D8E7AA	9FB86E	E66135
—	2.3 Fail	1.0 Fail	1.6 Fail	2.5 Fail
2.3 Fail	—	2.3 Fail	1.4 Fail	1.1 Fail
1.0 Fail	2.3 Fail	—	1.7 Fail	2.6 Fail
1.6 Fail	1.4 Fail	1.7 Fail	—	1.6 Fail
2.5 Fail	1.1 Fail	2.6 Fail	1.6 Fail	—

White BG

1.4Fail

3.1AA Large

1.3Fail

2.2Fail

3.4AA Large

Black BG

15.5AAA

6.9AA

15.9AAA

9.6AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCEE7

7979A7

DEDFB9

AAAA80

ACAB40

Deuteranopia

CBC8E6

7570A6

DEDDBC

A8A784

B4BE42

Tritanopia

BDE6E6

60A4A4

D9C4C7

A08E91

DF484A

Achromatopsia

D9D9D9

8B8B8B

DCDCDC

A8A8A8

848484

Shades & Tints Shades & Tints

#BBE5E7

Dark

Light

#5D9DAA

Dark

Light

#D8E7AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbe5e7;
  --color-2: #5d9daa;
  --color-3: #d8e7aa;
  --color-4: #9fb86e;
  --color-5: #e66135;
}

SCSS

$color-1: #bbe5e7;
$color-2: #5d9daa;
$color-3: #d8e7aa;
$color-4: #9fb86e;
$color-5: #e66135;

TAILWIND

colors: {
  'brand-1': '#bbe5e7',
  'brand-2': '#5d9daa',
  'brand-3': '#d8e7aa',
  'brand-4': '#9fb86e',
  'brand-5': '#e66135',
}

RGB Array

[187, 229, 231], [93, 157, 170], [216, 231, 170], [159, 184, 110], [230, 97, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #BBE5E7, #5D9DAA, #D8E7AA, #9FB86E, #E66135 is ideal for: health products, baby brands, fresh-style blogs. 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: #bbe5e7; --color-2: #5d9daa; --color-3: #d8e7aa; --color-4: #9fb86e; --color-5: #e66135. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 bright-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