#76B894 + #AFCC99 + #C3D998 + #D1CB71 + #E3A96B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#76B894

Celadon · DarkSeaGreen · Olive Green

HEX

#76B894

RGB

rgb(118, 184, 148)

HSL

hsl(147, 32%, 59%)

HSB

hsb(147, 36%, 72%)

CMYK

cmyk(36%, 0%, 20%, 28%)

Oklch

oklch(72.8% 0.086 159.4)

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

#AFCC99

Celadon · DarkSeaGreen · Apple Green

HEX

#AFCC99

RGB

rgb(175, 204, 153)

HSL

hsl(94, 33%, 70%)

HSB

hsb(94, 25%, 80%)

CMYK

cmyk(14%, 0%, 25%, 20%)

Oklch

oklch(81.1% 0.076 132.0)

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

#C3D998

Willow Green · Tan · Apple Green

HEX

#C3D998

RGB

rgb(195, 217, 152)

HSL

hsl(80, 46%, 72%)

HSB

hsb(80, 30%, 85%)

CMYK

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

Oklch

oklch(85.3% 0.089 123.5)

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

#D1CB71

Fresh Green · BurlyWood · Sunflower

HEX

#D1CB71

RGB

rgb(209, 203, 113)

HSL

hsl(56, 51%, 63%)

HSB

hsb(56, 46%, 82%)

CMYK

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

Oklch

oklch(82.8% 0.113 105.2)

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

#E3A96B

Ginger · SandyBrown · Warm Sun

HEX

#E3A96B

RGB

rgb(227, 169, 107)

HSL

hsl(31, 68%, 65%)

HSB

hsb(31, 53%, 89%)

CMYK

cmyk(0%, 26%, 53%, 11%)

Oklch

oklch(77.6% 0.104 67.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

76B894

B8759A

Analogous

78B875

76B894

75B8B5

Triadic

76B894

9375B8

B89375

Split-Comp.

76B894

B575B8

B87578

Tetradic

76B894

7578B8

B8759A

B8B575

Contrast Matrix WCAG 2.1 Contrast

76B894	AFCC99	C3D998	D1CB71	E3A96B
—	1.3 Fail	1.5 Fail	1.4 Fail	1.1 Fail
1.3 Fail	—	1.1 Fail	1.0 Fail	1.2 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.0 Fail	1.1 Fail	—	1.2 Fail
1.1 Fail	1.2 Fail	1.3 Fail	1.2 Fail	—

White BG

2.3Fail

1.8Fail

1.5Fail

1.7Fail

2.1Fail

Black BG

9.1AAA

11.9AAA

13.7AAA

12.5AAA

10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

93939D

BCBCA5

CDCDA8

CECE87

CAC97A

Deuteranopia

8F8A9F

BAB8A8

CBCAAC

CFCF8C

CDD27E

Tritanopia

79A4A5

B0AFB1

C4B4B7

D1989C

E08688

Achromatopsia

A0A0A0

BEBEBE

CBCBCB

C3C3C3

B3B3B3

Shades & Tints Shades & Tints

#76B894

Dark

Light

#AFCC99

Dark

Light

#C3D998

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #76b894;
  --color-2: #afcc99;
  --color-3: #c3d998;
  --color-4: #d1cb71;
  --color-5: #e3a96b;
}

SCSS

$color-1: #76b894;
$color-2: #afcc99;
$color-3: #c3d998;
$color-4: #d1cb71;
$color-5: #e3a96b;

TAILWIND

colors: {
  'brand-1': '#76b894',
  'brand-2': '#afcc99',
  'brand-3': '#c3d998',
  'brand-4': '#d1cb71',
  'brand-5': '#e3a96b',
}

RGB Array

[118, 184, 148], [175, 204, 153], [195, 217, 152], [209, 203, 113], [227, 169, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #76B894, #AFCC99, #C3D998, #D1CB71, #E3A96B 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: #76b894; --color-2: #afcc99; --color-3: #c3d998; --color-4: #d1cb71; --color-5: #e3a96b. 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