#A5C2B8 + #CCC9BC + #F0DDC7 + #FD674D + #8F847C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A5C2B8

Jade · Silver · Apple Green

HEX

#A5C2B8

RGB

rgb(165, 194, 184)

HSL

hsl(159, 19%, 70%)

HSB

hsb(159, 15%, 76%)

CMYK

cmyk(15%, 0%, 5%, 24%)

Oklch

oklch(79.0% 0.034 172.6)

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

#CCC9BC

Goose Yellow · Silver · Lemon Cream

HEX

#CCC9BC

RGB

rgb(204, 201, 188)

HSL

hsl(49, 14%, 77%)

HSB

hsb(49, 8%, 80%)

CMYK

cmyk(0%, 1%, 8%, 20%)

Oklch

oklch(83.5% 0.018 96.1)

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

#F0DDC7

Goose Yellow · Bisque · Peach Orange

HEX

#F0DDC7

RGB

rgb(240, 221, 199)

HSL

hsl(32, 58%, 86%)

HSB

hsb(32, 17%, 94%)

CMYK

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

Oklch

oklch(90.7% 0.036 71.4)

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

#FD674D

Peach Pink · Tomato · Coral Red

HEX

#FD674D

RGB

rgb(253, 103, 77)

HSL

hsl(9, 98%, 65%)

HSB

hsb(9, 70%, 99%)

CMYK

cmyk(0%, 59%, 70%, 1%)

Oklch

oklch(69.9% 0.188 32.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#8F847C

Tangerine · Gray · Warm Gray

HEX

#8F847C

RGB

rgb(143, 132, 124)

HSL

hsl(25, 8%, 52%)

HSB

hsb(25, 13%, 56%)

CMYK

cmyk(0%, 8%, 13%, 44%)

Oklch

oklch(62.1% 0.018 58.5)

Traditional「Tangerine」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A5C2B8

C1A4AE

Analogous

A4C1A8

A5C2B8

A4BDC1

Triadic

A5C2B8

B7A4C1

C1B7A4

Split-Comp.

A5C2B8

C1A4BD

C1A8A4

Tetradic

A5C2B8

A8A4C1

C1A4AE

BDC1A4

Contrast Matrix WCAG 2.1 Contrast

A5C2B8	CCC9BC	F0DDC7	FD674D	8F847C
—	1.1 Fail	1.4 Fail	1.5 Fail	1.9 Fail
1.1 Fail	—	1.3 Fail	1.8 Fail	2.2 Fail
1.4 Fail	1.3 Fail	—	2.2 Fail	2.8 Fail
1.5 Fail	1.8 Fail	2.2 Fail	—	1.3 Fail
1.9 Fail	2.2 Fail	2.8 Fail	1.3 Fail	—

White BG

1.9Fail

1.7Fail

1.3Fail

2.9Fail

3.6AA Large

Black BG

11.0AAA

12.6AAA

15.9AAA

7.2AAA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B2BA

CBCBBF

E8E8CC

BCBB53

8A8A7E

Deuteranopia

B0AEBB

CBCBC0

E9EACE

C5D055

8B8C7E

Tritanopia

A6BCBD

CCC2C2

EFD1D1

F65859

8E7F80

Achromatopsia

B8B8B8

C8C8C8

E0E0E0

919191

868686

Shades & Tints Shades & Tints

#A5C2B8

Dark

Light

#CCC9BC

Dark

Light

#F0DDC7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a5c2b8;
  --color-2: #ccc9bc;
  --color-3: #f0ddc7;
  --color-4: #fd674d;
  --color-5: #8f847c;
}

SCSS

$color-1: #a5c2b8;
$color-2: #ccc9bc;
$color-3: #f0ddc7;
$color-4: #fd674d;
$color-5: #8f847c;

TAILWIND

colors: {
  'brand-1': '#a5c2b8',
  'brand-2': '#ccc9bc',
  'brand-3': '#f0ddc7',
  'brand-4': '#fd674d',
  'brand-5': '#8f847c',
}

RGB Array

[165, 194, 184], [204, 201, 188], [240, 221, 199], [253, 103, 77], [143, 132, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A5C2B8, #CCC9BC, #F0DDC7, #FD674D, #8F847C 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: #a5c2b8; --color-2: #ccc9bc; --color-3: #f0ddc7; --color-4: #fd674d; --color-5: #8f847c. 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