← Back to Editor

#F3ECCF · #D5D2A3 · #C1AD88 · #B2686B · #5C3F3F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F3ECCF

Goose Yellow · Beige · Lemon Cream

HEX
#F3ECCF
RGB
rgb(243, 236, 207)
HSL
hsl(48, 60%, 88%)
HSB
hsb(48, 15%, 95%)
CMYK
cmyk(0%, 3%, 15%, 5%)
Oklch
oklch(94.1% 0.039 95.9)

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

#D5D2A3

Fresh Green · Wheat · Sunflower

HEX
#D5D2A3
RGB
rgb(213, 210, 163)
HSL
hsl(56, 37%, 74%)
HSB
hsb(56, 23%, 84%)
CMYK
cmyk(0%, 1%, 23%, 16%)
Oklch
oklch(85.4% 0.062 104.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#C1AD88

Ginger · Tan · Warm Sun

HEX
#C1AD88
RGB
rgb(193, 173, 136)
HSL
hsl(39, 31%, 65%)
HSB
hsb(39, 30%, 76%)
CMYK
cmyk(0%, 10%, 30%, 24%)
Oklch
oklch(75.5% 0.055 82.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#B2686B

Crimson · Gray · Passion Red

HEX
#B2686B
RGB
rgb(178, 104, 107)
HSL
hsl(358, 32%, 55%)
HSB
hsb(358, 42%, 70%)
CMYK
cmyk(0%, 42%, 40%, 30%)
Oklch
oklch(60.0% 0.095 17.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#5C3F3F

Crimson · DarkOliveGreen · Wine Red

HEX
#5C3F3F
RGB
rgb(92, 63, 63)
HSL
hsl(0, 19%, 30%)
HSB
hsb(0, 32%, 36%)
CMYK
cmyk(0%, 32%, 32%, 64%)
Oklch
oklch(40.0% 0.041 19.0)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3ECCF
CED5F3

Analogous

F3D9CE
F3ECCF
E8F3CE

Triadic

F3ECCF
CEF3EB
EBCEF3

Split-Comp.

F3ECCF
CEE8F3
D9CEF3

Tetradic

F3ECCF
CEF3D9
CED5F3
F3CEE8

Contrast Matrix WCAG 2.1 Contrast

F3ECCF
D5D2A3
C1AD88
B2686B
5C3F3F
—
1.3
Fail
1.8
Fail
3.5
AA Large
7.9
AAA
1.3
Fail
—
1.4
Fail
2.7
Fail
6.1
AA
1.8
Fail
1.4
Fail
—
1.9
Fail
4.3
AA Large
3.5
AA Large
2.7
Fail
1.9
Fail
—
2.3
Fail
7.9
AAA
6.1
AA
4.3
AA Large
2.3
Fail
—
White BG
1.2Fail
1.5Fail
2.2Fail
4.1AA Large
9.4AAA
Black BG
17.7AAA
13.6AAA
9.6AAA
5.1AA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0D6
D4D4AE
B8B891
92916A
4F4F3F

Deuteranopia

F0F1D8
D4D4B1
BABB93
969C6A
51533F

Tritanopia

F3DCDD
D5B7B9
C0989A
AE6A6A
5B3F3F

Achromatopsia

EBEBEB
CECECE
AFAFAF
7E7E7E
484848

Shades & Tints Shades & Tints

#F3ECCF

Dark
Light

#D5D2A3

Dark
Light

#C1AD88

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3eccf;
  --color-2: #d5d2a3;
  --color-3: #c1ad88;
  --color-4: #b2686b;
  --color-5: #5c3f3f;
}

SCSS

$color-1: #f3eccf;
$color-2: #d5d2a3;
$color-3: #c1ad88;
$color-4: #b2686b;
$color-5: #5c3f3f;

TAILWIND

colors: {
  'brand-1': '#f3eccf',
  'brand-2': '#d5d2a3',
  'brand-3': '#c1ad88',
  'brand-4': '#b2686b',
  'brand-5': '#5c3f3f',
}

RGB Array

[243, 236, 207], [213, 210, 163], [193, 173, 136], [178, 104, 107], [92, 63, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3ECCF, #D5D2A3, #C1AD88, #B2686B, #5C3F3F 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: #f3eccf; --color-2: #d5d2a3; --color-3: #c1ad88; --color-4: #b2686b; --color-5: #5c3f3f. 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