#90C0A8 + #A7CCAA + #C0D8A8 + #D8D8A8 + #A89078 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#90C0A8

Jade · DarkSeaGreen · Apple Green

HEX

#90C0A8

RGB

rgb(144, 192, 168)

HSL

hsl(150, 28%, 66%)

HSB

hsb(150, 25%, 75%)

CMYK

cmyk(25%, 0%, 13%, 25%)

Oklch

oklch(76.7% 0.061 162.8)

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

#A7CCAA

Celadon · DarkGray · Apple Green

HEX

#A7CCAA

RGB

rgb(167, 204, 170)

HSL

hsl(125, 27%, 73%)

HSB

hsb(125, 18%, 80%)

CMYK

cmyk(18%, 0%, 17%, 20%)

Oklch

oklch(80.9% 0.062 147.2)

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

#C0D8A8

Celadon · Silver · Apple Green

HEX

#C0D8A8

RGB

rgb(192, 216, 168)

HSL

hsl(90, 38%, 75%)

HSB

hsb(90, 22%, 85%)

CMYK

cmyk(11%, 0%, 22%, 15%)

Oklch

oklch(85.2% 0.070 129.4)

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

#D8D8A8

Fresh Green · Wheat · Sunflower

HEX

#D8D8A8

RGB

rgb(216, 216, 168)

HSL

hsl(60, 38%, 75%)

HSB

hsb(60, 22%, 85%)

CMYK

cmyk(0%, 0%, 22%, 15%)

Oklch

oklch(87.0% 0.063 107.6)

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

#A89078

Ginger · Gray · Warm Sun

HEX

#A89078

RGB

rgb(168, 144, 120)

HSL

hsl(30, 22%, 56%)

HSB

hsb(30, 29%, 66%)

CMYK

cmyk(0%, 14%, 29%, 34%)

Oklch

oklch(66.9% 0.045 66.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

90C0A8

C190A8

Analogous

90C190

90C0A8

90C1C1

Triadic

90C0A8

A890C1

C1A890

Split-Comp.

90C0A8

C190C1

C19090

Tetradic

90C0A8

9090C1

C190A8

C1C190

Contrast Matrix WCAG 2.1 Contrast

90C0A8	A7CCAA	C0D8A8	D8D8A8	A89078
—	1.2 Fail	1.3 Fail	1.4 Fail	1.5 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.7 Fail
1.3 Fail	1.1 Fail	—	1.0 Fail	2.0 Fail
1.4 Fail	1.2 Fail	1.0 Fail	—	2.1 Fail
1.5 Fail	1.7 Fail	2.0 Fail	2.1 Fail	—

White BG

2.0Fail

1.8Fail

1.5Fail

3.0AA Large

Black BG

10.3AAA

11.9AAA

13.6AAA

14.3AAA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A5AE

B7B7B2

CACBB4

D8D8B4

9E9D7E

Deuteranopia

A29EAF

B5B2B4

C9C7B6

D8D8B6

9FA17F

Tritanopia

92B2B3

A9B9BA

C1BDBF

D8BDBF

A78283

Achromatopsia

AFAFAF

BDBDBD

CBCBCB

D3D3D3

949494

Shades & Tints Shades & Tints

#90C0A8

Dark

Light

#A7CCAA

Dark

Light

#C0D8A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #90c0a8;
  --color-2: #a7ccaa;
  --color-3: #c0d8a8;
  --color-4: #d8d8a8;
  --color-5: #a89078;
}

SCSS

$color-1: #90c0a8;
$color-2: #a7ccaa;
$color-3: #c0d8a8;
$color-4: #d8d8a8;
$color-5: #a89078;

TAILWIND

colors: {
  'brand-1': '#90c0a8',
  'brand-2': '#a7ccaa',
  'brand-3': '#c0d8a8',
  'brand-4': '#d8d8a8',
  'brand-5': '#a89078',
}

RGB Array

[144, 192, 168], [167, 204, 170], [192, 216, 168], [216, 216, 168], [168, 144, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #90C0A8, #A7CCAA, #C0D8A8, #D8D8A8, #A89078 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: #90c0a8; --color-2: #a7ccaa; --color-3: #c0d8a8; --color-4: #d8d8a8; --color-5: #a89078. 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 coffee-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