← Back to Editor

#F2DEB7 · #F7941E · #D2232A · #00707E · #664232

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F2DEB7

Goose Yellow · Wheat · Lemon Cream

HEX
#F2DEB7
RGB
rgb(242, 222, 183)
HSL
hsl(40, 69%, 83%)
HSB
hsb(40, 24%, 95%)
CMYK
cmyk(0%, 8%, 24%, 5%)
Oklch
oklch(90.7% 0.056 84.0)

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

#F7941E

Ginger · GoldenRod · Warm Sun

HEX
#F7941E
RGB
rgb(247, 148, 30)
HSL
hsl(33, 93%, 54%)
HSB
hsb(33, 88%, 97%)
CMYK
cmyk(0%, 40%, 88%, 3%)
Oklch
oklch(75.4% 0.165 62.7)

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

#D2232A

Vermilion · Crimson · Passion Red

HEX
#D2232A
RGB
rgb(210, 35, 42)
HSL
hsl(358, 71%, 48%)
HSB
hsb(358, 83%, 82%)
CMYK
cmyk(0%, 83%, 80%, 18%)
Oklch
oklch(55.7% 0.208 25.8)

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

#00707E

Lake Blue · Teal · Peacock Green

HEX
#00707E
RGB
rgb(0, 112, 126)
HSL
hsl(187, 100%, 25%)
HSB
hsb(187, 100%, 49%)
CMYK
cmyk(100%, 11%, 0%, 51%)
Oklch
oklch(49.9% 0.086 209.8)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#664232

Tangerine · DarkOliveGreen · Amber Brown

HEX
#664232
RGB
rgb(102, 66, 50)
HSL
hsl(18, 34%, 30%)
HSB
hsb(18, 51%, 40%)
CMYK
cmyk(0%, 35%, 51%, 60%)
Oklch
oklch(41.6% 0.057 44.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2DEB7
B6CAF2

Analogous

F2C0B6
F2DEB7
E8F2B6

Triadic

F2DEB7
B6F2DE
DEB6F2

Split-Comp.

F2DEB7
B6E8F2
C0B6F2

Tetradic

F2DEB7
B6F2C0
B6CAF2
F2B6E8

Contrast Matrix WCAG 2.1 Contrast

F2DEB7
F7941E
D2232A
00707E
664232
—
1.7
Fail
4.0
AA Large
4.4
AA Large
6.7
AA
1.7
Fail
—
2.3
Fail
2.5
Fail
3.9
AA Large
4.0
AA Large
2.3
Fail
—
1.1
Fail
1.7
Fail
4.4
AA Large
2.5
Fail
1.1
Fail
—
1.5
Fail
6.7
AA
3.9
AA Large
1.7
Fail
1.5
Fail
—
White BG
1.3Fail
2.3Fail
5.2AA
5.8AA
8.8AAA
Black BG
15.9AAA
9.2AAA
4.0AA Large
3.6AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9C0
CCCB3B
868528
30327B
565636

Deuteranopia

EBECC3
D2D941
909E28
2A227A
595B37

Tritanopia

F1C8CA
F25156
C92727
067877
64393A

Achromatopsia

E0E0E0
A4A4A4
585858
505050
4B4B4B

Shades & Tints Shades & Tints

#F2DEB7

Dark
Light

#F7941E

Dark
Light

#D2232A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2deb7;
  --color-2: #f7941e;
  --color-3: #d2232a;
  --color-4: #00707e;
  --color-5: #664232;
}

SCSS

$color-1: #f2deb7;
$color-2: #f7941e;
$color-3: #d2232a;
$color-4: #00707e;
$color-5: #664232;

TAILWIND

colors: {
  'brand-1': '#f2deb7',
  'brand-2': '#f7941e',
  'brand-3': '#d2232a',
  'brand-4': '#00707e',
  'brand-5': '#664232',
}

RGB Array

[242, 222, 183], [247, 148, 30], [210, 35, 42], [0, 112, 126], [102, 66, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2DEB7, #F7941E, #D2232A, #00707E, #664232 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2deb7; --color-2: #f7941e; --color-3: #d2232a; --color-4: #00707e; --color-5: #664232. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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