#506A8C + #91B89D + #95CCA5 + #C3F2B1 + #91FF66 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#506A8C

Indigo · SlateGray · Navy Blue

HEX

#506A8C

RGB

rgb(80, 106, 140)

HSL

hsl(214, 27%, 43%)

HSB

hsb(214, 43%, 55%)

CMYK

cmyk(43%, 24%, 0%, 45%)

Oklch

oklch(51.8% 0.062 255.4)

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

#91B89D

Celadon · DarkSeaGreen · Apple Green

HEX

#91B89D

RGB

rgb(145, 184, 157)

HSL

hsl(138, 22%, 65%)

HSB

hsb(138, 21%, 72%)

CMYK

cmyk(21%, 0%, 15%, 28%)

Oklch

oklch(74.6% 0.057 154.6)

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

#95CCA5

Celadon · DarkSeaGreen · Apple Green

HEX

#95CCA5

RGB

rgb(149, 204, 165)

HSL

hsl(137, 35%, 69%)

HSB

hsb(137, 27%, 80%)

CMYK

cmyk(27%, 0%, 19%, 20%)

Oklch

oklch(79.6% 0.079 153.5)

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

#C3F2B1

Emerald · LightGray · Mint Green

HEX

#C3F2B1

RGB

rgb(195, 242, 177)

HSL

hsl(103, 71%, 82%)

HSB

hsb(103, 27%, 95%)

CMYK

cmyk(19%, 0%, 27%, 5%)

Oklch

oklch(91.2% 0.099 137.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#91FF66

Emerald · LightGreen · Apple Green

HEX

#91FF66

RGB

rgb(145, 255, 102)

HSL

hsl(103, 100%, 70%)

HSB

hsb(103, 60%, 100%)

CMYK

cmyk(43%, 0%, 60%, 0%)

Oklch

oklch(90.3% 0.215 138.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

506A8C

8B7250

Analogous

50878B

506A8C

54508B

Triadic

506A8C

8B506A

6A8B50

Split-Comp.

506A8C

8B5450

878B50

Tetradic

506A8C

8B5087

8B7250

508B54

Contrast Matrix WCAG 2.1 Contrast

506A8C	91B89D	95CCA5	C3F2B1	91FF66
—	2.5 Fail	3.0 AA Large	4.4 AA Large	4.4 AA Large
2.5 Fail	—	1.2 Fail	1.7 Fail	1.7 Fail
3.0 AA Large	1.2 Fail	—	1.5 Fail	1.5 Fail
4.4 AA Large	1.7 Fail	1.5 Fail	—	1.0 Fail
4.4 AA Large	1.7 Fail	1.5 Fail	1.0 Fail	—

White BG

5.6AA

2.2Fail

1.8Fail

1.3Fail

Black BG

3.8AA Large

9.5AAA

11.5AAA

16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B84

A2A2A4

ADADAE

D7D8C1

C1C28B

Deuteranopia

5A5882

A09DA5

AAA6B1

D5D1C5

BAB294

Tritanopia

517D7C

93A9AA

98B6B8

C5CDD0

97A8AF

Achromatopsia

666666

A9A9A9

B7B7B7

DDDDDD

CDCDCD

Shades & Tints Shades & Tints

#506A8C

Dark

Light

#91B89D

Dark

Light

#95CCA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #506a8c;
  --color-2: #91b89d;
  --color-3: #95cca5;
  --color-4: #c3f2b1;
  --color-5: #91ff66;
}

SCSS

$color-1: #506a8c;
$color-2: #91b89d;
$color-3: #95cca5;
$color-4: #c3f2b1;
$color-5: #91ff66;

TAILWIND

colors: {
  'brand-1': '#506a8c',
  'brand-2': '#91b89d',
  'brand-3': '#95cca5',
  'brand-4': '#c3f2b1',
  'brand-5': '#91ff66',
}

RGB Array

[80, 106, 140], [145, 184, 157], [149, 204, 165], [195, 242, 177], [145, 255, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #506A8C, #91B89D, #95CCA5, #C3F2B1, #91FF66 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: #506a8c; --color-2: #91b89d; --color-3: #95cca5; --color-4: #c3f2b1; --color-5: #91ff66. 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 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