← Back to Editor

#F2CAA7 · #CFC9B0 · #88BFBC · #678499 · #56495E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F2CAA7

Apricot · Wheat · Peach Orange

HEX
#F2CAA7
RGB
rgb(242, 202, 167)
HSL
hsl(28, 74%, 80%)
HSB
hsb(28, 31%, 95%)
CMYK
cmyk(0%, 17%, 31%, 5%)
Oklch
oklch(86.5% 0.065 63.0)

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

#CFC9B0

Goose Yellow · Silver · Sunflower

HEX
#CFC9B0
RGB
rgb(207, 201, 176)
HSL
hsl(48, 24%, 75%)
HSB
hsb(48, 15%, 81%)
CMYK
cmyk(0%, 3%, 15%, 19%)
Oklch
oklch(83.4% 0.034 95.9)

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

#88BFBC

Jade · MediumAquaMarine · Lake Green

HEX
#88BFBC
RGB
rgb(136, 191, 188)
HSL
hsl(177, 30%, 64%)
HSB
hsb(177, 29%, 75%)
CMYK
cmyk(29%, 0%, 2%, 25%)
Oklch
oklch(76.6% 0.057 191.8)

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

#678499

Slate Blue · SlateGray · Navy Blue

HEX
#678499
RGB
rgb(103, 132, 153)
HSL
hsl(205, 20%, 50%)
HSB
hsb(205, 33%, 60%)
CMYK
cmyk(33%, 14%, 0%, 40%)
Oklch
oklch(59.9% 0.046 240.0)

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

#56495E

Dark Plum · DimGray · Eggplant

HEX
#56495E
RGB
rgb(86, 73, 94)
HSL
hsl(277, 13%, 33%)
HSB
hsb(277, 22%, 37%)
CMYK
cmyk(9%, 22%, 0%, 63%)
Oklch
oklch(42.7% 0.038 312.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2CAA7
A6CFF2

Analogous

F2A6A9
F2CAA7
F2EFA6

Triadic

F2CAA7
A6F2C9
C9A6F2

Split-Comp.

F2CAA7
A6F2EF
A6A9F2

Tetradic

F2CAA7
A9F2A6
A6CFF2
EFA6F2

Contrast Matrix WCAG 2.1 Contrast

F2CAA7
CFC9B0
88BFBC
678499
56495E
—
1.1
Fail
1.3
Fail
2.6
Fail
5.5
AA
1.1
Fail
—
1.2
Fail
2.4
Fail
5.0
AA
1.3
Fail
1.2
Fail
—
1.9
Fail
4.1
AA Large
2.6
Fail
2.4
Fail
1.9
Fail
—
2.1
Fail
5.5
AA
5.0
AA
4.1
AA Large
2.1
Fail
—
White BG
1.5Fail
1.7Fail
2.1Fail
3.9AA Large
8.4AAA
Black BG
13.8AAA
12.6AAA
10.2AAA
5.3AA
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E0AF
CCCCB6
A0A0BD
747494
505059

Deuteranopia

E3E6B2
CDCDB8
9D99BD
727093
515258

Tritanopia

F0B6B8
CFBBBC
8BBDBD
68908F
555554

Achromatopsia

D2D2D2
C8C8C8
AEAEAE
7E7E7E
4F4F4F

Shades & Tints Shades & Tints

#F2CAA7

Dark
Light

#CFC9B0

Dark
Light

#88BFBC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2caa7;
  --color-2: #cfc9b0;
  --color-3: #88bfbc;
  --color-4: #678499;
  --color-5: #56495e;
}

SCSS

$color-1: #f2caa7;
$color-2: #cfc9b0;
$color-3: #88bfbc;
$color-4: #678499;
$color-5: #56495e;

TAILWIND

colors: {
  'brand-1': '#f2caa7',
  'brand-2': '#cfc9b0',
  'brand-3': '#88bfbc',
  'brand-4': '#678499',
  'brand-5': '#56495e',
}

RGB Array

[242, 202, 167], [207, 201, 176], [136, 191, 188], [103, 132, 153], [86, 73, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2CAA7, #CFC9B0, #88BFBC, #678499, #56495E is ideal for: 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: #f2caa7; --color-2: #cfc9b0; --color-3: #88bfbc; --color-4: #678499; --color-5: #56495e. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 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