#839B8E + #98B294 + #ACC99B + #C1E0A1 + #D6F7A8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#839B8E

Celadon · LightSlateGray · Olive Green

HEX

#839B8E

RGB

rgb(131, 155, 142)

HSL

hsl(148, 11%, 56%)

HSB

hsb(148, 15%, 61%)

CMYK

cmyk(15%, 0%, 8%, 39%)

Oklch

oklch(66.7% 0.033 161.7)

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

#98B294

Celadon · DarkSeaGreen · Apple Green

HEX

#98B294

RGB

rgb(152, 178, 148)

HSL

hsl(112, 16%, 64%)

HSB

hsb(112, 17%, 70%)

CMYK

cmyk(15%, 0%, 17%, 30%)

Oklch

oklch(73.5% 0.051 141.4)

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

#ACC99B

Celadon · DarkSeaGreen · Apple Green

HEX

#ACC99B

RGB

rgb(172, 201, 155)

HSL

hsl(98, 30%, 70%)

HSB

hsb(98, 23%, 79%)

CMYK

cmyk(14%, 0%, 23%, 21%)

Oklch

oklch(80.2% 0.070 134.1)

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

#C1E0A1

Celadon · Silver · Apple Green

HEX

#C1E0A1

RGB

rgb(193, 224, 161)

HSL

hsl(90, 50%, 75%)

HSB

hsb(90, 28%, 88%)

CMYK

cmyk(14%, 0%, 28%, 12%)

Oklch

oklch(86.8% 0.090 129.4)

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

#D6F7A8

Willow Green · Wheat · Mint Green

HEX

#D6F7A8

RGB

rgb(214, 247, 168)

HSL

hsl(85, 83%, 81%)

HSB

hsb(85, 32%, 97%)

CMYK

cmyk(13%, 0%, 32%, 3%)

Oklch

oklch(93.4% 0.108 126.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

839B8E

9B8290

Analogous

839B82

839B8E

829B9A

Triadic

839B8E

8E829B

9B8E82

Split-Comp.

839B8E

9A829B

9B8283

Tetradic

839B8E

82839B

9B8290

9B9A82

Contrast Matrix WCAG 2.1 Contrast

839B8E	98B294	ACC99B	C1E0A1	D6F7A8
—	1.3 Fail	1.6 Fail	2.1 Fail	2.5 Fail
1.3 Fail	—	1.3 Fail	1.6 Fail	1.9 Fail
1.6 Fail	1.3 Fail	—	1.2 Fail	1.5 Fail
2.1 Fail	1.6 Fail	1.2 Fail	—	1.2 Fail
2.5 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

3.0Fail

2.3Fail

1.8Fail

1.5Fail

1.2Fail

Black BG

7.0AAA

9.1AAA

11.6AAA

14.4AAA

17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8E91

A3A39B

B9B9A6

CECFB0

E4E5BB

Deuteranopia

8C8A92

A2A09D

B7B5A9

CDCAB4

E2E0C0

Tritanopia

849494

99A1A2

ADAFB1

C3BCBF

D8CACE

Achromatopsia

929292

A7A7A7

BBBBBB

D0D0D0

E4E4E4

Shades & Tints Shades & Tints

#839B8E

Dark

Light

#98B294

Dark

Light

#ACC99B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #839b8e;
  --color-2: #98b294;
  --color-3: #acc99b;
  --color-4: #c1e0a1;
  --color-5: #d6f7a8;
}

SCSS

$color-1: #839b8e;
$color-2: #98b294;
$color-3: #acc99b;
$color-4: #c1e0a1;
$color-5: #d6f7a8;

TAILWIND

colors: {
  'brand-1': '#839b8e',
  'brand-2': '#98b294',
  'brand-3': '#acc99b',
  'brand-4': '#c1e0a1',
  'brand-5': '#d6f7a8',
}

RGB Array

[131, 155, 142], [152, 178, 148], [172, 201, 155], [193, 224, 161], [214, 247, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #839B8E, #98B294, #ACC99B, #C1E0A1, #D6F7A8 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: #839b8e; --color-2: #98b294; --color-3: #acc99b; --color-4: #c1e0a1; --color-5: #d6f7a8. 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