← Back to Editor

#AFC9BB · #99928E · #F5BD9A · #DECAAD · #D6C9D2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AFC9BB

Celadon · Silver · Apple Green

HEX
#AFC9BB
RGB
rgb(175, 201, 187)
HSL
hsl(148, 19%, 74%)
HSB
hsb(148, 13%, 79%)
CMYK
cmyk(13%, 0%, 7%, 21%)
Oklch
oklch(81.2% 0.034 162.1)

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

#99928E

Ash · Gray · Silver Sand

HEX
#99928E
RGB
rgb(153, 146, 142)
HSL
hsl(22, 5%, 58%)
HSB
hsb(22, 7%, 60%)
CMYK
cmyk(0%, 5%, 7%, 40%)
Oklch
oklch(66.5% 0.010 52.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#F5BD9A

Apricot · BurlyWood · Peach Orange

HEX
#F5BD9A
RGB
rgb(245, 189, 154)
HSL
hsl(23, 82%, 78%)
HSB
hsb(23, 37%, 96%)
CMYK
cmyk(0%, 23%, 37%, 4%)
Oklch
oklch(84.0% 0.080 53.3)

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

#DECAAD

Goose Yellow · Wheat · Peach Orange

HEX
#DECAAD
RGB
rgb(222, 202, 173)
HSL
hsl(36, 43%, 77%)
HSB
hsb(36, 22%, 87%)
CMYK
cmyk(0%, 9%, 22%, 13%)
Oklch
oklch(84.8% 0.045 77.2)

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

#D6C9D2

Mauve · LightGray · Lavender

HEX
#D6C9D2
RGB
rgb(214, 201, 210)
HSL
hsl(318, 14%, 81%)
HSB
hsb(318, 6%, 84%)
CMYK
cmyk(0%, 6%, 2%, 16%)
Oklch
oklch(84.9% 0.019 336.6)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFC9BB
C9B0BE

Analogous

B1C9B0
AFC9BB
B0C9C8

Triadic

AFC9BB
BCB0C9
C9BCB0

Split-Comp.

AFC9BB
C8B0C9
C9B0B1

Tetradic

AFC9BB
B0B1C9
C9B0BE
C9C8B0

Contrast Matrix WCAG 2.1 Contrast

AFC9BB
99928E
F5BD9A
DECAAD
D6C9D2
—
1.7
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.7
Fail
—
1.8
Fail
1.9
Fail
1.9
Fail
1.1
Fail
1.8
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.9
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.9
Fail
1.0
Fail
1.0
Fail
—
White BG
1.8Fail
3.1AA Large
1.7Fail
1.6Fail
1.6Fail
Black BG
11.9AAA
6.9AA
12.6AAA
13.2AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABABE
96968F
DDDCA2
D5D5B4
D0D0D0

Deuteranopia

B9B7BF
96978F
E0E4A5
D7D8B6
D1D2CF

Tritanopia

B0C1C2
999090
F2A9AB
DDBABB
D5CECE

Achromatopsia

C0C0C0
949494
CACACA
CDCDCD
CECECE

Shades & Tints Shades & Tints

#AFC9BB

Dark
Light

#99928E

Dark
Light

#F5BD9A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afc9bb;
  --color-2: #99928e;
  --color-3: #f5bd9a;
  --color-4: #decaad;
  --color-5: #d6c9d2;
}

SCSS

$color-1: #afc9bb;
$color-2: #99928e;
$color-3: #f5bd9a;
$color-4: #decaad;
$color-5: #d6c9d2;

TAILWIND

colors: {
  'brand-1': '#afc9bb',
  'brand-2': '#99928e',
  'brand-3': '#f5bd9a',
  'brand-4': '#decaad',
  'brand-5': '#d6c9d2',
}

RGB Array

[175, 201, 187], [153, 146, 142], [245, 189, 154], [222, 202, 173], [214, 201, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFC9BB, #99928E, #F5BD9A, #DECAAD, #D6C9D2 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: #afc9bb; --color-2: #99928e; --color-3: #f5bd9a; --color-4: #decaad; --color-5: #d6c9d2. 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