← Back to Editor

#F2EFAA · #D6D27C · #6B5C3F · #AD9971 · #D4A168

warm

A 5-color warm 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

#F2EFAA

Fresh Green · Wheat · Lemon Cream

HEX
#F2EFAA
RGB
rgb(242, 239, 170)
HSL
hsl(58, 73%, 81%)
HSB
hsb(58, 30%, 95%)
CMYK
cmyk(0%, 1%, 30%, 5%)
Oklch
oklch(93.8% 0.088 105.9)

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

#D6D27C

Fresh Green · BurlyWood · Sunflower

HEX
#D6D27C
RGB
rgb(214, 210, 124)
HSL
hsl(57, 52%, 66%)
HSB
hsb(57, 42%, 84%)
CMYK
cmyk(0%, 2%, 42%, 16%)
Oklch
oklch(84.8% 0.108 106.2)

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

#6B5C3F

Ochre · DarkOliveGreen · Honey Gold

HEX
#6B5C3F
RGB
rgb(107, 92, 63)
HSL
hsl(40, 26%, 33%)
HSB
hsb(40, 41%, 42%)
CMYK
cmyk(0%, 14%, 41%, 58%)
Oklch
oklch(48.2% 0.047 83.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#AD9971

Ginger · Tan · Sunflower

HEX
#AD9971
RGB
rgb(173, 153, 113)
HSL
hsl(40, 27%, 56%)
HSB
hsb(40, 35%, 68%)
CMYK
cmyk(0%, 12%, 35%, 32%)
Oklch
oklch(69.1% 0.060 84.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D4A168

Ginger · DarkSalmon · Warm Sun

HEX
#D4A168
RGB
rgb(212, 161, 104)
HSL
hsl(32, 56%, 62%)
HSB
hsb(32, 51%, 83%)
CMYK
cmyk(0%, 24%, 51%, 17%)
Oklch
oklch(74.4% 0.095 68.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2EFAA
ABAEF2

Analogous

F2CCAB
F2EFAA
D1F2AB

Triadic

F2EFAA
ABF2F0
F0ABF2

Split-Comp.

F2EFAA
ABD1F2
CCABF2

Tetradic

F2EFAA
ABF2CC
ABAEF2
F2ABD1

Contrast Matrix WCAG 2.1 Contrast

F2EFAA
D6D27C
6B5C3F
AD9971
D4A168
—
1.3
Fail
5.5
AA
2.3
Fail
1.9
Fail
1.3
Fail
—
4.1
AA Large
1.8
Fail
1.5
Fail
5.5
AA
4.1
AA Large
—
2.3
Fail
2.8
Fail
2.3
Fail
1.8
Fail
2.3
Fail
—
1.2
Fail
1.9
Fail
1.5
Fail
2.8
Fail
1.2
Fail
—
White BG
1.2Fail
1.6Fail
6.5AA
2.8Fail
2.3Fail
Black BG
17.7AAA
13.4AAA
3.2AA Large
7.6AAA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1BB
D4D491
656446
A4A47B
BEBD76

Deuteranopia

F1F1BF
D5D596
656648
A6A77D
C1C579

Tritanopia

F2C8CB
D6A1A5
6A4C4D
AC8284
D18183

Achromatopsia

E8E8E8
C9C9C9
5D5D5D
9A9A9A
AAAAAA

Shades & Tints Shades & Tints

#F2EFAA

Dark
Light

#D6D27C

Dark
Light

#6B5C3F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2efaa;
  --color-2: #d6d27c;
  --color-3: #6b5c3f;
  --color-4: #ad9971;
  --color-5: #d4a168;
}

SCSS

$color-1: #f2efaa;
$color-2: #d6d27c;
$color-3: #6b5c3f;
$color-4: #ad9971;
$color-5: #d4a168;

TAILWIND

colors: {
  'brand-1': '#f2efaa',
  'brand-2': '#d6d27c',
  'brand-3': '#6b5c3f',
  'brand-4': '#ad9971',
  'brand-5': '#d4a168',
}

RGB Array

[242, 239, 170], [214, 210, 124], [107, 92, 63], [173, 153, 113], [212, 161, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F2EFAA, #D6D27C, #6B5C3F, #AD9971, #D4A168 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: #f2efaa; --color-2: #d6d27c; --color-3: #6b5c3f; --color-4: #ad9971; --color-5: #d4a168. 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 warm-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