#688776 + #93C2A5 + #BAD0AE + #D7D2AA + #EBD7AB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#688776

Celadon · Gray · Olive Green

HEX

#688776

RGB

rgb(104, 135, 118)

HSL

hsl(147, 13%, 47%)

HSB

hsb(147, 23%, 53%)

CMYK

cmyk(23%, 0%, 13%, 47%)

Oklch

oklch(59.4% 0.044 160.7)

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

#93C2A5

Celadon · DarkSeaGreen · Apple Green

HEX

#93C2A5

RGB

rgb(147, 194, 165)

HSL

hsl(143, 28%, 67%)

HSB

hsb(143, 24%, 76%)

CMYK

cmyk(24%, 0%, 15%, 24%)

Oklch

oklch(77.2% 0.065 157.4)

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

#BAD0AE

Celadon · Silver · Apple Green

HEX

#BAD0AE

RGB

rgb(186, 208, 174)

HSL

hsl(99, 27%, 75%)

HSB

hsb(99, 16%, 82%)

CMYK

cmyk(11%, 0%, 16%, 18%)

Oklch

oklch(83.2% 0.052 134.5)

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

#D7D2AA

Fresh Green · Wheat · Sunflower

HEX

#D7D2AA

RGB

rgb(215, 210, 170)

HSL

hsl(53, 36%, 75%)

HSB

hsb(53, 21%, 84%)

CMYK

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

Oklch

oklch(85.8% 0.053 101.5)

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

#EBD7AB

Goose Yellow · Wheat · Lemon Cream

HEX

#EBD7AB

RGB

rgb(235, 215, 171)

HSL

hsl(41, 62%, 80%)

HSB

hsb(41, 27%, 92%)

CMYK

cmyk(0%, 9%, 27%, 8%)

Oklch

oklch(88.5% 0.062 86.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

688776

876879

Analogous

6A8768

688776

688786

Triadic

688776

766887

877668

Split-Comp.

688776

866887

87686A

Tetradic

688776

686A87

876879

878668

Contrast Matrix WCAG 2.1 Contrast

688776	93C2A5	BAD0AE	D7D2AA	EBD7AB
—	2.0 Fail	2.4 Fail	2.6 Fail	2.8 Fail
2.0 Fail	—	1.2 Fail	1.3 Fail	1.4 Fail
2.4 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
2.6 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
2.8 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

4.0AA Large

2.0Fail

1.7Fail

1.5Fail

1.4Fail

Black BG

5.3AA

10.5AAA

12.7AAA

13.7AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

75767A

A7A8AC

C4C4B6

D5D5B4

E2E2B6

Deuteranopia

74717B

A5A1AE

C2C1B8

D5D6B6

E4E5B8

Tritanopia

6A7D7E

95B2B3

BBBDBE

D7BBBD

EABEC0

Achromatopsia

7C7C7C

B1B1B1

C6C6C6

CFCFCF

D8D8D8

Shades & Tints Shades & Tints

#688776

Dark

Light

#93C2A5

Dark

Light

#BAD0AE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #688776;
  --color-2: #93c2a5;
  --color-3: #bad0ae;
  --color-4: #d7d2aa;
  --color-5: #ebd7ab;
}

SCSS

$color-1: #688776;
$color-2: #93c2a5;
$color-3: #bad0ae;
$color-4: #d7d2aa;
$color-5: #ebd7ab;

TAILWIND

colors: {
  'brand-1': '#688776',
  'brand-2': '#93c2a5',
  'brand-3': '#bad0ae',
  'brand-4': '#d7d2aa',
  'brand-5': '#ebd7ab',
}

RGB Array

[104, 135, 118], [147, 194, 165], [186, 208, 174], [215, 210, 170], [235, 215, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #688776, #93C2A5, #BAD0AE, #D7D2AA, #EBD7AB 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: #688776; --color-2: #93c2a5; --color-3: #bad0ae; --color-4: #d7d2aa; --color-5: #ebd7ab. 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