#64B664 + #89CAA6 + #ACDCE7 + #D3EAAD + #F8F671 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#64B664

Celadon · MediumSeaGreen · Olive Green

HEX

#64B664

RGB

rgb(100, 182, 100)

HSL

hsl(120, 36%, 55%)

HSB

hsb(120, 45%, 71%)

CMYK

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

Oklch

oklch(70.4% 0.141 143.9)

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

#89CAA6

Celadon · DarkSeaGreen · Apple Green

HEX

#89CAA6

RGB

rgb(137, 202, 166)

HSL

hsl(147, 38%, 66%)

HSB

hsb(147, 32%, 79%)

CMYK

cmyk(32%, 0%, 18%, 21%)

Oklch

oklch(78.5% 0.084 159.4)

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

#ACDCE7

Sky Blue · LightBlue · Glacier Blue

HEX

#ACDCE7

RGB

rgb(172, 220, 231)

HSL

hsl(191, 55%, 79%)

HSB

hsb(191, 26%, 91%)

CMYK

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

Oklch

oklch(86.4% 0.052 213.3)

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

#D3EAAD

Willow Green · Wheat · Apple Green

HEX

#D3EAAD

RGB

rgb(211, 234, 173)

HSL

hsl(83, 59%, 80%)

HSB

hsb(83, 26%, 92%)

CMYK

cmyk(10%, 0%, 26%, 8%)

Oklch

oklch(90.5% 0.084 124.8)

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

#F8F671

Fresh Green · Khaki · Sunflower

HEX

#F8F671

RGB

rgb(248, 246, 113)

HSL

hsl(59, 91%, 71%)

HSB

hsb(59, 54%, 97%)

CMYK

cmyk(0%, 1%, 54%, 3%)

Oklch

oklch(94.9% 0.154 108.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

64B664

B663B6

Analogous

8CB663

64B664

63B68C

Triadic

64B664

6363B6

B66363

Split-Comp.

64B664

8C63B6

B6638C

Tetradic

64B664

638CB6

B663B6

B68C63

Contrast Matrix WCAG 2.1 Contrast

64B664	89CAA6	ACDCE7	D3EAAD	F8F671
—	1.3 Fail	1.7 Fail	1.9 Fail	2.2 Fail
1.3 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
1.7 Fail	1.3 Fail	—	1.1 Fail	1.3 Fail
1.9 Fail	1.5 Fail	1.1 Fail	—	1.1 Fail
2.2 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

2.5Fail

1.9Fail

1.5Fail

1.3Fail

1.1Fail

Black BG

8.4AAA

11.1AAA

14.1AAA

16.1AAA

18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

888878

A5A6AF

C1C1E4

DDDDBC

F7F791

Deuteranopia

837D7D

A19DB1

BEBAE4

DCDABF

F7F799

Tritanopia

68888B

8CB6B7

AEE2E2

D4C7CA

F8ABB0

Achromatopsia

949494

B2B2B2

CFCFCF

DCDCDC

E7E7E7

Shades & Tints Shades & Tints

#64B664

Dark

Light

#89CAA6

Dark

Light

#ACDCE7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #64b664;
  --color-2: #89caa6;
  --color-3: #acdce7;
  --color-4: #d3eaad;
  --color-5: #f8f671;
}

SCSS

$color-1: #64b664;
$color-2: #89caa6;
$color-3: #acdce7;
$color-4: #d3eaad;
$color-5: #f8f671;

TAILWIND

colors: {
  'brand-1': '#64b664',
  'brand-2': '#89caa6',
  'brand-3': '#acdce7',
  'brand-4': '#d3eaad',
  'brand-5': '#f8f671',
}

RGB Array

[100, 182, 100], [137, 202, 166], [172, 220, 231], [211, 234, 173], [248, 246, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #64B664, #89CAA6, #ACDCE7, #D3EAAD, #F8F671 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: #64b664; --color-2: #89caa6; --color-3: #acdce7; --color-4: #d3eaad; --color-5: #f8f671. 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