← Back to Editor

#F1E6C4 · #5BBC86 · #DD4B1E · #343129 · #FAA823

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

#F1E6C4

Goose Yellow · Bisque · Lemon Cream

HEX
#F1E6C4
RGB
rgb(241, 230, 196)
HSL
hsl(45, 62%, 86%)
HSB
hsb(45, 19%, 95%)
CMYK
cmyk(0%, 5%, 19%, 5%)
Oklch
oklch(92.5% 0.046 92.2)

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

#5BBC86

Celadon · MediumSeaGreen · Olive Green

HEX
#5BBC86
RGB
rgb(91, 188, 134)
HSL
hsl(147, 42%, 55%)
HSB
hsb(147, 52%, 74%)
CMYK
cmyk(52%, 0%, 29%, 26%)
Oklch
oklch(72.2% 0.122 157.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#DD4B1E

Vermilion · Chocolate · Passion Red

HEX
#DD4B1E
RGB
rgb(221, 75, 30)
HSL
hsl(14, 76%, 49%)
HSB
hsb(14, 86%, 87%)
CMYK
cmyk(0%, 66%, 86%, 13%)
Oklch
oklch(61.1% 0.190 36.4)

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

#343129

Ochre · DarkSlateGray · Amber Gold

HEX
#343129
RGB
rgb(52, 49, 41)
HSL
hsl(44, 12%, 18%)
HSB
hsb(44, 21%, 20%)
CMYK
cmyk(0%, 6%, 21%, 80%)
Oklch
oklch(31.4% 0.014 89.9)

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

#FAA823

Ginger · GoldenRod · Warm Sun

HEX
#FAA823
RGB
rgb(250, 168, 35)
HSL
hsl(37, 96%, 56%)
HSB
hsb(37, 86%, 98%)
CMYK
cmyk(0%, 33%, 86%, 2%)
Oklch
oklch(79.3% 0.162 72.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1E6C4
C5D0F1

Analogous

F1D0C5
F1E6C4
E6F1C5

Triadic

F1E6C4
C5F1E6
E6C5F1

Split-Comp.

F1E6C4
C5E6F1
D0C5F1

Tetradic

F1E6C4
C5F1D0
C5D0F1
F1C5E6

Contrast Matrix WCAG 2.1 Contrast

F1E6C4
5BBC86
DD4B1E
343129
FAA823
—
1.9
Fail
3.3
AA Large
10.4
AAA
1.6
Fail
1.9
Fail
—
1.8
Fail
5.6
AA
1.2
Fail
3.3
AA Large
1.8
Fail
—
3.2
AA Large
2.1
Fail
10.4
AAA
5.6
AA
3.2
AA Large
—
6.6
AA
1.6
Fail
1.2
Fail
2.1
Fail
6.6
AA
—
White BG
1.2Fail
2.3Fail
4.1AA Large
13.0AAA
2.0Fail
Black BG
16.9AAA
9.0AAA
5.1AA
1.6Fail
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECCC
858693
9E9C29
33332B
D6D643

Deuteranopia

EDEECE
7F7896
A6B12C
33332B
DBE14B

Tritanopia

F0D3D4
609DA0
D63133
342C2D
F65D62

Achromatopsia

E5E5E5
999999
727272
313131
B1B1B1

Shades & Tints Shades & Tints

#F1E6C4

Dark
Light

#5BBC86

Dark
Light

#DD4B1E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1e6c4;
  --color-2: #5bbc86;
  --color-3: #dd4b1e;
  --color-4: #343129;
  --color-5: #faa823;
}

SCSS

$color-1: #f1e6c4;
$color-2: #5bbc86;
$color-3: #dd4b1e;
$color-4: #343129;
$color-5: #faa823;

TAILWIND

colors: {
  'brand-1': '#f1e6c4',
  'brand-2': '#5bbc86',
  'brand-3': '#dd4b1e',
  'brand-4': '#343129',
  'brand-5': '#faa823',
}

RGB Array

[241, 230, 196], [91, 188, 134], [221, 75, 30], [52, 49, 41], [250, 168, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1E6C4, #5BBC86, #DD4B1E, #343129, #FAA823 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: #f1e6c4; --color-2: #5bbc86; --color-3: #dd4b1e; --color-4: #343129; --color-5: #faa823. 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