← Back to Editor

#AFBD97 · #FFF3C7 · #FFFCF2 · #C6B6D1 · #564263

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#AFBD97

Willow Green · DarkGray · Apple Green

HEX
#AFBD97
RGB
rgb(175, 189, 151)
HSL
hsl(82, 22%, 67%)
HSB
hsb(82, 20%, 74%)
CMYK
cmyk(7%, 0%, 20%, 26%)
Oklch
oklch(77.7% 0.054 124.1)

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

#FFF3C7

Goose Yellow · Bisque · Lemon Cream

HEX
#FFF3C7
RGB
rgb(255, 243, 199)
HSL
hsl(47, 100%, 89%)
HSB
hsb(47, 22%, 100%)
CMYK
cmyk(0%, 5%, 22%, 0%)
Oklch
oklch(96.3% 0.058 94.6)

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

#FFFCF2

Goose Yellow · SeaShell · Lemon Cream

HEX
#FFFCF2
RGB
rgb(255, 252, 242)
HSL
hsl(46, 100%, 97%)
HSB
hsb(46, 5%, 100%)
CMYK
cmyk(0%, 1%, 5%, 0%)
Oklch
oklch(99.1% 0.014 93.0)

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

#C6B6D1

Lilac · Silver · Lilac Purple

HEX
#C6B6D1
RGB
rgb(198, 182, 209)
HSL
hsl(276, 23%, 77%)
HSB
hsb(276, 13%, 82%)
CMYK
cmyk(5%, 13%, 0%, 18%)
Oklch
oklch(79.8% 0.041 311.7)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#564263

Dark Plum · DarkSlateBlue · Eggplant

HEX
#564263
RGB
rgb(86, 66, 99)
HSL
hsl(276, 20%, 32%)
HSB
hsb(276, 33%, 39%)
CMYK
cmyk(13%, 33%, 0%, 61%)
Oklch
oklch(41.4% 0.059 311.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFBD97
A698BD

Analogous

BDB898
AFBD97
9DBD98

Triadic

AFBD97
98B0BD
BD98B0

Split-Comp.

AFBD97
989DBD
B898BD

Tetradic

AFBD97
98BDB8
A698BD
BD989D

Contrast Matrix WCAG 2.1 Contrast

AFBD97
FFF3C7
FFFCF2
C6B6D1
564263
—
1.8
Fail
1.9
Fail
1.0
Fail
4.5
AA Large
1.8
Fail
—
1.1
Fail
1.7
Fail
8.0
AAA
1.9
Fail
1.1
Fail
—
1.9
Fail
8.7
AAA
1.0
Fail
1.7
Fail
1.9
Fail
—
4.7
AA
4.5
AA Large
8.0
AAA
8.7
AAA
4.7
AA
—
White BG
2.0Fail
1.1Fail
1.0Fail
1.9Fail
8.9AAA
Black BG
10.5AAA
18.9AAA
20.5AAA
11.0AAA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5A0
FAFAD2
FEFEF4
BFBFCA
4D4D5B

Deuteranopia

B4B3A2
FBFBD4
FEFEF5
C0C1C9
4F5059

Tritanopia

B0A7A9
FEDADC
FFF6F7
C5C5C4
555553

Achromatopsia

B4B4B4
F2F2F2
FCFCFC
BEBEBE
4C4C4C

Shades & Tints Shades & Tints

#AFBD97

Dark
Light

#FFF3C7

Dark
Light

#FFFCF2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afbd97;
  --color-2: #fff3c7;
  --color-3: #fffcf2;
  --color-4: #c6b6d1;
  --color-5: #564263;
}

SCSS

$color-1: #afbd97;
$color-2: #fff3c7;
$color-3: #fffcf2;
$color-4: #c6b6d1;
$color-5: #564263;

TAILWIND

colors: {
  'brand-1': '#afbd97',
  'brand-2': '#fff3c7',
  'brand-3': '#fffcf2',
  'brand-4': '#c6b6d1',
  'brand-5': '#564263',
}

RGB Array

[175, 189, 151], [255, 243, 199], [255, 252, 242], [198, 182, 209], [86, 66, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #AFBD97, #FFF3C7, #FFFCF2, #C6B6D1, #564263 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #afbd97; --color-2: #fff3c7; --color-3: #fffcf2; --color-4: #c6b6d1; --color-5: #564263. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 cool-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