#98BDAB + #C4D0AC + #E6DC9F + #F8E8AD + #F7CE7E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#98BDAB

Jade · DarkGray · Apple Green

HEX

#98BDAB

RGB

rgb(152, 189, 171)

HSL

hsl(151, 22%, 67%)

HSB

hsb(151, 20%, 74%)

CMYK

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

Oklch

oklch(76.6% 0.047 164.1)

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

#C4D0AC

Willow Green · Silver · Apple Green

HEX

#C4D0AC

RGB

rgb(196, 208, 172)

HSL

hsl(80, 28%, 75%)

HSB

hsb(80, 17%, 82%)

CMYK

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

Oklch

oklch(83.9% 0.050 122.5)

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

#E6DC9F

Fresh Green · Khaki · Lemon Cream

HEX

#E6DC9F

RGB

rgb(230, 220, 159)

HSL

hsl(52, 59%, 76%)

HSB

hsb(52, 31%, 90%)

CMYK

cmyk(0%, 4%, 31%, 10%)

Oklch

oklch(88.8% 0.079 99.9)

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

#F8E8AD

Goose Yellow · Wheat · Lemon Cream

HEX

#F8E8AD

RGB

rgb(248, 232, 173)

HSL

hsl(47, 84%, 83%)

HSB

hsb(47, 30%, 97%)

CMYK

cmyk(0%, 6%, 30%, 3%)

Oklch

oklch(93.0% 0.077 94.7)

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

#F7CE7E

Goose Yellow · Khaki · Sunflower

HEX

#F7CE7E

RGB

rgb(247, 206, 126)

HSL

hsl(40, 88%, 73%)

HSB

hsb(40, 49%, 97%)

CMYK

cmyk(0%, 17%, 49%, 3%)

Oklch

oklch(87.0% 0.109 83.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

98BDAB

BD98AA

Analogous

98BD99

98BDAB

98BDBD

Triadic

98BDAB

AB98BD

BDAB98

Split-Comp.

98BDAB

BD98BD

BD9998

Tetradic

98BDAB

9998BD

BD98AA

BDBD98

Contrast Matrix WCAG 2.1 Contrast

98BDAB	C4D0AC	E6DC9F	F8E8AD	F7CE7E
—	1.3 Fail	1.5 Fail	1.7 Fail	1.4 Fail
1.3 Fail	—	1.2 Fail	1.3 Fail	1.1 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.7 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.4 Fail	1.1 Fail	1.1 Fail	1.2 Fail	—

White BG

2.1Fail

1.6Fail

1.4Fail

1.2Fail

1.5Fail

Black BG

10.2AAA

13.0AAA

15.1AAA

17.1AAA

14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A8AF

C9C9B5

E2E2AE

F1F1BB

E5E591

Deuteranopia

A6A3B0

C9C8B7

E2E3B1

F2F3BF

E8EB96

Tritanopia

9AB3B4

C5BCBD

E6B9BC

F7C7C9

F5A1A4

Achromatopsia

B0B0B0

C8C8C8

D8D8D8

E6E6E6

D1D1D1

Shades & Tints Shades & Tints

#98BDAB

Dark

Light

#C4D0AC

Dark

Light

#E6DC9F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #98bdab;
  --color-2: #c4d0ac;
  --color-3: #e6dc9f;
  --color-4: #f8e8ad;
  --color-5: #f7ce7e;
}

SCSS

$color-1: #98bdab;
$color-2: #c4d0ac;
$color-3: #e6dc9f;
$color-4: #f8e8ad;
$color-5: #f7ce7e;

TAILWIND

colors: {
  'brand-1': '#98bdab',
  'brand-2': '#c4d0ac',
  'brand-3': '#e6dc9f',
  'brand-4': '#f8e8ad',
  'brand-5': '#f7ce7e',
}

RGB Array

[152, 189, 171], [196, 208, 172], [230, 220, 159], [248, 232, 173], [247, 206, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #98BDAB, #C4D0AC, #E6DC9F, #F8E8AD, #F7CE7E 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: #98bdab; --color-2: #c4d0ac; --color-3: #e6dc9f; --color-4: #f8e8ad; --color-5: #f7ce7e. 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