← Back to Editor

#F3E6C6 · #F0DBAC · #D9BB7F · #2C110A · #AB9A86

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

#F3E6C6

Goose Yellow · Bisque · Lemon Cream

HEX
#F3E6C6
RGB
rgb(243, 230, 198)
HSL
hsl(43, 65%, 86%)
HSB
hsb(43, 19%, 95%)
CMYK
cmyk(0%, 5%, 19%, 5%)
Oklch
oklch(92.7% 0.044 88.5)

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

#F0DBAC

Goose Yellow · Wheat · Lemon Cream

HEX
#F0DBAC
RGB
rgb(240, 219, 172)
HSL
hsl(41, 69%, 81%)
HSB
hsb(41, 28%, 94%)
CMYK
cmyk(0%, 9%, 28%, 6%)
Oklch
oklch(89.7% 0.065 86.7)

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

#D9BB7F

Ginger · BurlyWood · Sunflower

HEX
#D9BB7F
RGB
rgb(217, 187, 127)
HSL
hsl(40, 54%, 67%)
HSB
hsb(40, 41%, 85%)
CMYK
cmyk(0%, 14%, 41%, 15%)
Oklch
oklch(80.4% 0.085 84.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#2C110A

Vermilion · Black · Deep Berry

HEX
#2C110A
RGB
rgb(44, 17, 10)
HSL
hsl(12, 63%, 11%)
HSB
hsb(12, 77%, 17%)
CMYK
cmyk(0%, 61%, 77%, 83%)
Oklch
oklch(21.7% 0.047 35.6)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#AB9A86

Ginger · DarkGray · Warm Sun

HEX
#AB9A86
RGB
rgb(171, 154, 134)
HSL
hsl(32, 18%, 60%)
HSB
hsb(32, 22%, 67%)
CMYK
cmyk(0%, 10%, 22%, 33%)
Oklch
oklch(69.6% 0.035 71.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3E6C6
C4D1F3

Analogous

F3CEC4
F3E6C6
E8F3C4

Triadic

F3E6C6
C4F3E5
E5C4F3

Split-Comp.

F3E6C6
C4E8F3
CEC4F3

Tetradic

F3E6C6
C4F3CE
C4D1F3
F3C4E8

Contrast Matrix WCAG 2.1 Contrast

F3E6C6
F0DBAC
D9BB7F
2C110A
AB9A86
—
1.1
Fail
1.5
Fail
14.2
AAA
2.2
Fail
1.1
Fail
—
1.4
Fail
13.0
AAA
2.0
Fail
1.5
Fail
1.4
Fail
—
9.5
AAA
1.5
Fail
14.2
AAA
13.0
AAA
9.5
AAA
—
6.5
AA
2.2
Fail
2.0
Fail
1.5
Fail
6.5
AA
—
White BG
1.2Fail
1.4Fail
1.8Fail
17.6AAA
2.7Fail
Black BG
16.9AAA
15.4AAA
11.4AAA
1.2Fail
7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDCE
E7E7B7
CCCC8E
20200C
A4A38B

Deuteranopia

EEEFD0
E8EABA
CED091
22240C
A5A68C

Tritanopia

F2D4D5
EFC0C2
D7999C
2B0D0D
AA8F90

Achromatopsia

E6E6E6
DCDCDC
BDBDBD
181818
9D9D9D

Shades & Tints Shades & Tints

#F3E6C6

Dark
Light

#F0DBAC

Dark
Light

#D9BB7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3e6c6;
  --color-2: #f0dbac;
  --color-3: #d9bb7f;
  --color-4: #2c110a;
  --color-5: #ab9a86;
}

SCSS

$color-1: #f3e6c6;
$color-2: #f0dbac;
$color-3: #d9bb7f;
$color-4: #2c110a;
$color-5: #ab9a86;

TAILWIND

colors: {
  'brand-1': '#f3e6c6',
  'brand-2': '#f0dbac',
  'brand-3': '#d9bb7f',
  'brand-4': '#2c110a',
  'brand-5': '#ab9a86',
}

RGB Array

[243, 230, 198], [240, 219, 172], [217, 187, 127], [44, 17, 10], [171, 154, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3E6C6, #F0DBAC, #D9BB7F, #2C110A, #AB9A86 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: #f3e6c6; --color-2: #f0dbac; --color-3: #d9bb7f; --color-4: #2c110a; --color-5: #ab9a86. 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