#66788C + #849299 + #BABF9D + #FBFCAE + #D6F2A5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#66788C

Indigo · SlateGray · Navy Blue

HEX

#66788C

RGB

rgb(102, 120, 140)

HSL

hsl(212, 16%, 47%)

HSB

hsb(212, 27%, 55%)

CMYK

cmyk(27%, 14%, 0%, 45%)

Oklch

oklch(56.5% 0.038 251.2)

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

#849299

Slate Blue · LightSlateGray · Silver Sand

HEX

#849299

RGB

rgb(132, 146, 153)

HSL

hsl(200, 9%, 56%)

HSB

hsb(200, 14%, 60%)

CMYK

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

Oklch

oklch(65.1% 0.019 229.2)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

#BABF9D

Fresh Green · DarkGray · Sunflower

HEX

#BABF9D

RGB

rgb(186, 191, 157)

HSL

hsl(69, 21%, 68%)

HSB

hsb(69, 18%, 75%)

CMYK

cmyk(3%, 0%, 18%, 25%)

Oklch

oklch(79.2% 0.047 114.3)

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

#FBFCAE

Fresh Green · Wheat · Lemon Cream

HEX

#FBFCAE

RGB

rgb(251, 252, 174)

HSL

hsl(61, 93%, 84%)

HSB

hsb(61, 31%, 99%)

CMYK

cmyk(0%, 0%, 31%, 1%)

Oklch

oklch(97.3% 0.098 108.7)

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

#D6F2A5

Willow Green · Khaki · Apple Green

HEX

#D6F2A5

RGB

rgb(214, 242, 165)

HSL

hsl(82, 75%, 80%)

HSB

hsb(82, 32%, 95%)

CMYK

cmyk(12%, 0%, 32%, 5%)

Oklch

oklch(92.3% 0.104 124.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

66788C

8B7965

Analogous

658A8B

66788C

66658B

Triadic

66788C

8B6577

778B65

Split-Comp.

66788C

8B6665

8A8B65

Tetradic

66788C

8B658A

8B7965

658B66

Contrast Matrix WCAG 2.1 Contrast

66788C	849299	BABF9D	FBFCAE	D6F2A5
—	1.4 Fail	2.4 Fail	4.2 AA Large	3.7 AA Large
1.4 Fail	—	1.7 Fail	3.0 Fail	2.6 Fail
2.4 Fail	1.7 Fail	—	1.8 Fail	1.6 Fail
4.2 AA Large	3.0 Fail	1.8 Fail	—	1.1 Fail
3.7 AA Large	2.6 Fail	1.6 Fail	1.1 Fail	—

White BG

4.5AA

3.2AA Large

1.9Fail

1.1Fail

1.2Fail

Black BG

4.6AA

6.6AA

11.0AAA

19.6AAA

17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E87

8A8A97

BCBCA5

FBFBC1

E2E2B8

Deuteranopia

6D6B86

898897

BCBCA7

FBFBC5

E1DEBC

Tritanopia

678383

859696

BAACAD

FBD0D3

D7C6CA

Achromatopsia

757575

8F8F8F

BABABA

F3F3F3

E1E1E1

Shades & Tints Shades & Tints

#66788C

Dark

Light

#849299

Dark

Light

#BABF9D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #66788c;
  --color-2: #849299;
  --color-3: #babf9d;
  --color-4: #fbfcae;
  --color-5: #d6f2a5;
}

SCSS

$color-1: #66788c;
$color-2: #849299;
$color-3: #babf9d;
$color-4: #fbfcae;
$color-5: #d6f2a5;

TAILWIND

colors: {
  'brand-1': '#66788c',
  'brand-2': '#849299',
  'brand-3': '#babf9d',
  'brand-4': '#fbfcae',
  'brand-5': '#d6f2a5',
}

RGB Array

[102, 120, 140], [132, 146, 153], [186, 191, 157], [251, 252, 174], [214, 242, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #66788C, #849299, #BABF9D, #FBFCAE, #D6F2A5 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: #66788c; --color-2: #849299; --color-3: #babf9d; --color-4: #fbfcae; --color-5: #d6f2a5. 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