#869882 + #ADB18F + #D6E8B5 + #FDF5C1 + #FFD7AF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#869882

Celadon · Gray · Olive Green

HEX

#869882

RGB

rgb(134, 152, 130)

HSL

hsl(109, 10%, 55%)

HSB

hsb(109, 14%, 60%)

CMYK

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

Oklch

oklch(65.9% 0.038 140.0)

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

#ADB18F

Fresh Green · DarkGray · Sunflower

HEX

#ADB18F

RGB

rgb(173, 177, 143)

HSL

hsl(67, 18%, 63%)

HSB

hsb(67, 19%, 69%)

CMYK

cmyk(2%, 0%, 19%, 31%)

Oklch

oklch(74.8% 0.047 113.0)

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

#D6E8B5

Willow Green · Wheat · Mint Green

HEX

#D6E8B5

RGB

rgb(214, 232, 181)

HSL

hsl(81, 53%, 81%)

HSB

hsb(81, 22%, 91%)

CMYK

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

Oklch

oklch(90.5% 0.070 123.6)

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

#FDF5C1

Fresh Green · Bisque · Lemon Cream

HEX

#FDF5C1

RGB

rgb(253, 245, 193)

HSL

hsl(52, 94%, 87%)

HSB

hsb(52, 24%, 99%)

CMYK

cmyk(0%, 3%, 24%, 1%)

Oklch

oklch(96.4% 0.067 100.2)

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

#FFD7AF

Goose Yellow · Wheat · Peach Orange

HEX

#FFD7AF

RGB

rgb(255, 215, 175)

HSL

hsl(30, 100%, 84%)

HSB

hsb(30, 31%, 100%)

CMYK

cmyk(0%, 16%, 31%, 0%)

Oklch

oklch(90.3% 0.069 66.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

869882

948198

Analogous

909881

869882

819888

Triadic

869882

818598

988185

Split-Comp.

869882

888198

988190

Tetradic

869882

819098

948198

988881

Contrast Matrix WCAG 2.1 Contrast

869882	ADB18F	D6E8B5	FDF5C1	FFD7AF
—	1.4 Fail	2.4 Fail	2.8 Fail	2.3 Fail
1.4 Fail	—	1.7 Fail	2.0 Fail	1.6 Fail
2.4 Fail	1.7 Fail	—	1.2 Fail	1.0 Fail
2.8 Fail	2.0 Fail	1.2 Fail	—	1.2 Fail
2.3 Fail	1.6 Fail	1.0 Fail	1.2 Fail	—

White BG

3.1AA Large

2.2Fail

1.3Fail

1.1Fail

1.3Fail

Black BG

6.8AA

9.5AAA

16.1AAA

19.0AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E87

AFAF97

DEDEC1

FAF9CE

EEEDB9

Deuteranopia

8D8B89

AFAE99

DDDBC4

FAFBD1

F0F3BB

Tritanopia

878C8C

AD9E9F

D7CBCD

FDD8DA

FDC0C2

Achromatopsia

909090

ACACAC

DDDDDD

F1F1F1

DEDEDE

Shades & Tints Shades & Tints

#869882

Dark

Light

#ADB18F

Dark

Light

#D6E8B5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #869882;
  --color-2: #adb18f;
  --color-3: #d6e8b5;
  --color-4: #fdf5c1;
  --color-5: #ffd7af;
}

SCSS

$color-1: #869882;
$color-2: #adb18f;
$color-3: #d6e8b5;
$color-4: #fdf5c1;
$color-5: #ffd7af;

TAILWIND

colors: {
  'brand-1': '#869882',
  'brand-2': '#adb18f',
  'brand-3': '#d6e8b5',
  'brand-4': '#fdf5c1',
  'brand-5': '#ffd7af',
}

RGB Array

[134, 152, 130], [173, 177, 143], [214, 232, 181], [253, 245, 193], [255, 215, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #869882, #ADB18F, #D6E8B5, #FDF5C1, #FFD7AF 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: #869882; --color-2: #adb18f; --color-3: #d6e8b5; --color-4: #fdf5c1; --color-5: #ffd7af. 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