← Back to Editor

#F3E2BD · #D6CCC0 · #97B8B9 · #2ABBC0 · #5A497F

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

#F3E2BD

Goose Yellow · Wheat · Lemon Cream

HEX
#F3E2BD
RGB
rgb(243, 226, 189)
HSL
hsl(41, 69%, 85%)
HSB
hsb(41, 22%, 95%)
CMYK
cmyk(0%, 7%, 22%, 5%)
Oklch
oklch(91.7% 0.052 86.2)

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

#D6CCC0

Goose Yellow · LightGray · Peach Orange

HEX
#D6CCC0
RGB
rgb(214, 204, 192)
HSL
hsl(33, 21%, 80%)
HSB
hsb(33, 10%, 84%)
CMYK
cmyk(0%, 5%, 10%, 16%)
Oklch
oklch(85.0% 0.020 72.5)

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

#97B8B9

Sky Blue · DarkGray · Lake Green

HEX
#97B8B9
RGB
rgb(151, 184, 185)
HSL
hsl(182, 20%, 66%)
HSB
hsb(182, 18%, 73%)
CMYK
cmyk(18%, 1%, 0%, 27%)
Oklch
oklch(75.9% 0.036 198.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#2ABBC0

Lake Blue · LightSeaGreen · Mint Ice

HEX
#2ABBC0
RGB
rgb(42, 187, 192)
HSL
hsl(182, 64%, 46%)
HSB
hsb(182, 78%, 75%)
CMYK
cmyk(78%, 3%, 0%, 25%)
Oklch
oklch(72.3% 0.115 198.5)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5A497F

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#5A497F
RGB
rgb(90, 73, 127)
HSL
hsl(259, 27%, 39%)
HSB
hsb(259, 43%, 50%)
CMYK
cmyk(29%, 43%, 0%, 50%)
Oklch
oklch(44.7% 0.088 297.2)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3E2BD
BECFF3

Analogous

F3C8BE
F3E2BD
E9F3BE

Triadic

F3E2BD
BEF3E2
E2BEF3

Split-Comp.

F3E2BD
BEE9F3
C8BEF3

Tetradic

F3E2BD
BEF3C8
BECFF3
F3BEE9

Contrast Matrix WCAG 2.1 Contrast

F3E2BD
D6CCC0
97B8B9
2ABBC0
5A497F
—
1.2
Fail
1.7
Fail
1.8
Fail
6.1
AA
1.2
Fail
—
1.3
Fail
1.5
Fail
4.9
AA
1.7
Fail
1.3
Fail
—
1.1
Fail
3.7
AA Large
1.8
Fail
1.5
Fail
1.1
Fail
—
3.3
AA Large
6.1
AA
4.9
AA
3.7
AA Large
3.3
AA Large
—
White BG
1.3Fail
1.6Fail
2.1Fail
2.3Fail
7.8AAA
Black BG
16.4AAA
13.3AAA
9.9AAA
9.0AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEBC6
D2D2C3
A5A6B9
696ABF
535272

Deuteranopia

EDEEC8
D2D3C4
A3A1B9
6056BE
54556F

Tritanopia

F2CDCF
D5C5C6
99B9B9
31BEBE
596865

Achromatopsia

E3E3E3
CECECE
AEAEAE
909090
545454

Shades & Tints Shades & Tints

#F3E2BD

Dark
Light

#D6CCC0

Dark
Light

#97B8B9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3e2bd;
  --color-2: #d6ccc0;
  --color-3: #97b8b9;
  --color-4: #2abbc0;
  --color-5: #5a497f;
}

SCSS

$color-1: #f3e2bd;
$color-2: #d6ccc0;
$color-3: #97b8b9;
$color-4: #2abbc0;
$color-5: #5a497f;

TAILWIND

colors: {
  'brand-1': '#f3e2bd',
  'brand-2': '#d6ccc0',
  'brand-3': '#97b8b9',
  'brand-4': '#2abbc0',
  'brand-5': '#5a497f',
}

RGB Array

[243, 226, 189], [214, 204, 192], [151, 184, 185], [42, 187, 192], [90, 73, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3E2BD, #D6CCC0, #97B8B9, #2ABBC0, #5A497F 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: #f3e2bd; --color-2: #d6ccc0; --color-3: #97b8b9; --color-4: #2abbc0; --color-5: #5a497f. 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