#63B4B5 + #74C3B0 + #A9D5A4 + #EEEC87 + #D6DD90 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#63B4B5

Slate Blue · MediumAquaMarine · Lake Green

HEX

#63B4B5

RGB

rgb(99, 180, 181)

HSL

hsl(181, 36%, 55%)

HSB

hsb(181, 45%, 71%)

CMYK

cmyk(45%, 1%, 0%, 29%)

Oklch

oklch(71.9% 0.080 196.6)

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

#74C3B0

Jade · MediumAquaMarine · Lake Green

HEX

#74C3B0

RGB

rgb(116, 195, 176)

HSL

hsl(166, 40%, 61%)

HSB

hsb(166, 41%, 76%)

CMYK

cmyk(41%, 0%, 10%, 24%)

Oklch

oklch(76.1% 0.083 176.8)

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

#A9D5A4

Celadon · LightGreen · Apple Green

HEX

#A9D5A4

RGB

rgb(169, 213, 164)

HSL

hsl(114, 37%, 74%)

HSB

hsb(114, 23%, 84%)

CMYK

cmyk(21%, 0%, 23%, 16%)

Oklch

oklch(82.9% 0.082 142.2)

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

#EEEC87

Fresh Green · Khaki · Sunflower

HEX

#EEEC87

RGB

rgb(238, 236, 135)

HSL

hsl(59, 75%, 73%)

HSB

hsb(59, 43%, 93%)

CMYK

cmyk(0%, 1%, 43%, 7%)

Oklch

oklch(92.3% 0.124 107.6)

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

#D6DD90

Fresh Green · Khaki · Sunflower

HEX

#D6DD90

RGB

rgb(214, 221, 144)

HSL

hsl(65, 53%, 72%)

HSB

hsb(65, 35%, 87%)

CMYK

cmyk(3%, 0%, 35%, 13%)

Oklch

oklch(87.4% 0.099 112.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63B4B5

B66463

Analogous

63B68E

63B4B5

638BB6

Triadic

63B4B5

B663B4

B4B663

Split-Comp.

63B4B5

B6638B

B68E63

Tetradic

63B4B5

8E63B6

B66463

8BB663

Contrast Matrix WCAG 2.1 Contrast

63B4B5	74C3B0	A9D5A4	EEEC87	D6DD90
—	1.2 Fail	1.5 Fail	1.9 Fail	1.7 Fail
1.2 Fail	—	1.3 Fail	1.7 Fail	1.4 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	1.1 Fail
1.9 Fail	1.7 Fail	1.3 Fail	—	1.2 Fail
1.7 Fail	1.4 Fail	1.1 Fail	1.2 Fail	—

White BG

2.4Fail

2.1Fail

1.6Fail

1.2Fail

1.4Fail

Black BG

8.7AAA

10.2AAA

12.7AAA

17.0AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8687B5

9697B5

BCBCB0

EDED9F

D9D9A3

Deuteranopia

817BB5

928CB6

BAB6B3

EDEDA5

D9D8A7

Tritanopia

67B5B5

78B8B9

ABB9BB

EEB3B7

D6B1B5

Achromatopsia

9C9C9C

A9A9A9

C2C2C2

E1E1E1

D2D2D2

Shades & Tints Shades & Tints

#63B4B5

Dark

Light

#74C3B0

Dark

Light

#A9D5A4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63b4b5;
  --color-2: #74c3b0;
  --color-3: #a9d5a4;
  --color-4: #eeec87;
  --color-5: #d6dd90;
}

SCSS

$color-1: #63b4b5;
$color-2: #74c3b0;
$color-3: #a9d5a4;
$color-4: #eeec87;
$color-5: #d6dd90;

TAILWIND

colors: {
  'brand-1': '#63b4b5',
  'brand-2': '#74c3b0',
  'brand-3': '#a9d5a4',
  'brand-4': '#eeec87',
  'brand-5': '#d6dd90',
}

RGB Array

[99, 180, 181], [116, 195, 176], [169, 213, 164], [238, 236, 135], [214, 221, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #63B4B5, #74C3B0, #A9D5A4, #EEEC87, #D6DD90 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: #63b4b5; --color-2: #74c3b0; --color-3: #a9d5a4; --color-4: #eeec87; --color-5: #d6dd90. 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