#899CAB + #A1C4B7 + #C3D6BB + #E5E8BE + #FFCEA6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#899CAB

Slate Blue · LightSlateGray · Navy Blue

HEX

#899CAB

RGB

rgb(137, 156, 171)

HSL

hsl(206, 17%, 60%)

HSB

hsb(206, 20%, 67%)

CMYK

cmyk(20%, 9%, 0%, 33%)

Oklch

oklch(68.3% 0.031 241.8)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#A1C4B7

Jade · DarkGray · Apple Green

HEX

#A1C4B7

RGB

rgb(161, 196, 183)

HSL

hsl(158, 23%, 70%)

HSB

hsb(158, 18%, 77%)

CMYK

cmyk(18%, 0%, 7%, 23%)

Oklch

oklch(79.1% 0.042 170.7)

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

#C3D6BB

Celadon · Silver · Apple Green

HEX

#C3D6BB

RGB

rgb(195, 214, 187)

HSL

hsl(102, 25%, 79%)

HSB

hsb(102, 13%, 84%)

CMYK

cmyk(9%, 0%, 13%, 16%)

Oklch

oklch(85.4% 0.042 136.3)

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

#E5E8BE

Fresh Green · Wheat · Lemon Cream

HEX

#E5E8BE

RGB

rgb(229, 232, 190)

HSL

hsl(64, 48%, 83%)

HSB

hsb(64, 18%, 91%)

CMYK

cmyk(1%, 0%, 18%, 9%)

Oklch

oklch(91.8% 0.055 110.8)

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

#FFCEA6

Apricot · Wheat · Peach Orange

HEX

#FFCEA6

RGB

rgb(255, 206, 166)

HSL

hsl(27, 100%, 83%)

HSB

hsb(27, 35%, 100%)

CMYK

cmyk(0%, 19%, 35%, 0%)

Oklch

oklch(88.5% 0.076 60.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

899CAB

AA9788

Analogous

88AAA8

899CAB

888AAA

Triadic

899CAB

AA889B

9BAA88

Split-Comp.

899CAB

AA888A

AAA888

Tetradic

899CAB

A888AA

AA9788

8AAA88

Contrast Matrix WCAG 2.1 Contrast

899CAB	A1C4B7	C3D6BB	E5E8BE	FFCEA6
—	1.5 Fail	1.8 Fail	2.2 Fail	2.0 Fail
1.5 Fail	—	1.2 Fail	1.5 Fail	1.3 Fail
1.8 Fail	1.2 Fail	—	1.2 Fail	1.1 Fail
2.2 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.3 Fail	1.1 Fail	1.1 Fail	—

White BG

2.8Fail

1.9Fail

1.5Fail

1.3Fail

1.4Fail

Black BG

7.4AAA

11.1AAA

13.7AAA

16.6AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9191A7

B0B0BA

CBCBC2

E6E6C8

EAE9B0

Deuteranopia

908FA7

AEACBB

CAC9C3

E6E6CB

EDF0B2

Tritanopia

8AA5A4

A3BDBD

C4C7C8

E5D0D2

FDB7B9

Achromatopsia

989898

B8B8B8

CDCDCD

E2E2E2

D8D8D8

Shades & Tints Shades & Tints

#899CAB

Dark

Light

#A1C4B7

Dark

Light

#C3D6BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #899cab;
  --color-2: #a1c4b7;
  --color-3: #c3d6bb;
  --color-4: #e5e8be;
  --color-5: #ffcea6;
}

SCSS

$color-1: #899cab;
$color-2: #a1c4b7;
$color-3: #c3d6bb;
$color-4: #e5e8be;
$color-5: #ffcea6;

TAILWIND

colors: {
  'brand-1': '#899cab',
  'brand-2': '#a1c4b7',
  'brand-3': '#c3d6bb',
  'brand-4': '#e5e8be',
  'brand-5': '#ffcea6',
}

RGB Array

[137, 156, 171], [161, 196, 183], [195, 214, 187], [229, 232, 190], [255, 206, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #899CAB, #A1C4B7, #C3D6BB, #E5E8BE, #FFCEA6 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: #899cab; --color-2: #a1c4b7; --color-3: #c3d6bb; --color-4: #e5e8be; --color-5: #ffcea6. 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