← Back to Editor

#F1F4A3 · #E1DDD7 · #A1B39F · #897E84 · #1D081B

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

#F1F4A3

Fresh Green · Khaki · Lemon Cream

HEX
#F1F4A3
RGB
rgb(241, 244, 163)
HSL
hsl(62, 79%, 80%)
HSB
hsb(62, 33%, 96%)
CMYK
cmyk(1%, 0%, 33%, 4%)
Oklch
oklch(94.7% 0.102 110.0)

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

#E1DDD7

Goose Yellow · LightGray · Peach Orange

HEX
#E1DDD7
RGB
rgb(225, 221, 215)
HSL
hsl(36, 14%, 86%)
HSB
hsb(36, 4%, 88%)
CMYK
cmyk(0%, 2%, 4%, 12%)
Oklch
oklch(89.9% 0.009 78.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#A1B39F

Celadon · DarkGray · Apple Green

HEX
#A1B39F
RGB
rgb(161, 179, 159)
HSL
hsl(114, 12%, 66%)
HSB
hsb(114, 11%, 70%)
CMYK
cmyk(10%, 0%, 11%, 30%)
Oklch
oklch(74.7% 0.035 142.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#897E84

Ash · Gray · Warm Gray

HEX
#897E84
RGB
rgb(137, 126, 132)
HSL
hsl(327, 4%, 52%)
HSB
hsb(327, 8%, 54%)
CMYK
cmyk(0%, 8%, 4%, 46%)
Oklch
oklch(60.5% 0.016 343.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#1D081B

Rose Purple · Black · Dark Purple

HEX
#1D081B
RGB
rgb(29, 8, 27)
HSL
hsl(306, 57%, 7%)
HSB
hsb(306, 72%, 11%)
CMYK
cmyk(0%, 72%, 7%, 89%)
Oklch
oklch(17.9% 0.049 331.1)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1F4A3
A6A4F4

Analogous

F4CFA4
F1F4A3
C9F4A4

Triadic

F1F4A3
A4F2F4
F4A4F2

Split-Comp.

F1F4A3
A4C9F4
CFA4F4

Tetradic

F1F4A3
A4F4CF
A6A4F4
F4A4C9

Contrast Matrix WCAG 2.1 Contrast

F1F4A3
E1DDD7
A1B39F
897E84
1D081B
—
1.2
Fail
1.9
Fail
3.4
AA Large
16.5
AAA
1.2
Fail
—
1.6
Fail
2.9
Fail
14.1
AAA
1.9
Fail
1.6
Fail
—
1.8
Fail
8.6
AAA
3.4
AA Large
2.9
Fail
1.8
Fail
—
4.9
AA
16.5
AAA
14.1
AAA
8.6
AAA
4.9
AA
—
White BG
1.2Fail
1.4Fail
2.2Fail
3.9AA Large
19.0AAA
Black BG
18.2AAA
15.5AAA
9.5AAA
5.4AA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2B7
DFDFD8
A9A9A4
848483
141416

Deuteranopia

F2F2BB
E0E0D9
A8A6A5
858682
151715

Tritanopia

F1C6C9
E1DADA
A2A8A9
888181
1C1312

Achromatopsia

EAEAEA
DEDEDE
ABABAB
828282
101010

Shades & Tints Shades & Tints

#F1F4A3

Dark
Light

#E1DDD7

Dark
Light

#A1B39F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1f4a3;
  --color-2: #e1ddd7;
  --color-3: #a1b39f;
  --color-4: #897e84;
  --color-5: #1d081b;
}

SCSS

$color-1: #f1f4a3;
$color-2: #e1ddd7;
$color-3: #a1b39f;
$color-4: #897e84;
$color-5: #1d081b;

TAILWIND

colors: {
  'brand-1': '#f1f4a3',
  'brand-2': '#e1ddd7',
  'brand-3': '#a1b39f',
  'brand-4': '#897e84',
  'brand-5': '#1d081b',
}

RGB Array

[241, 244, 163], [225, 221, 215], [161, 179, 159], [137, 126, 132], [29, 8, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1F4A3, #E1DDD7, #A1B39F, #897E84, #1D081B 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: #f1f4a3; --color-2: #e1ddd7; --color-3: #a1b39f; --color-4: #897e84; --color-5: #1d081b. 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