← Back to Editor

#F1EDC7 · #D3CFA0 · #B4C07E · #337979 · #543640

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F1EDC7

Fresh Green · Bisque · Lemon Cream

HEX
#F1EDC7
RGB
rgb(241, 237, 199)
HSL
hsl(54, 60%, 86%)
HSB
hsb(54, 17%, 95%)
CMYK
cmyk(0%, 2%, 17%, 5%)
Oklch
oklch(94.0% 0.050 102.3)

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

#D3CFA0

Fresh Green · Tan · Sunflower

HEX
#D3CFA0
RGB
rgb(211, 207, 160)
HSL
hsl(55, 37%, 73%)
HSB
hsb(55, 24%, 83%)
CMYK
cmyk(0%, 2%, 24%, 17%)
Oklch
oklch(84.6% 0.062 103.6)

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

#B4C07E

Willow Green · Tan · Apple Green

HEX
#B4C07E
RGB
rgb(180, 192, 126)
HSL
hsl(71, 34%, 62%)
HSB
hsb(71, 34%, 75%)
CMYK
cmyk(6%, 0%, 34%, 25%)
Oklch
oklch(78.3% 0.089 116.9)

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

#337979

Slate Blue · SeaGreen · Mint Ice

HEX
#337979
RGB
rgb(51, 121, 121)
HSL
hsl(180, 41%, 34%)
HSB
hsb(180, 58%, 47%)
CMYK
cmyk(58%, 0%, 0%, 53%)
Oklch
oklch(53.2% 0.070 195.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#543640

Dark Violet · DarkSlateGray · Camellia

HEX
#543640
RGB
rgb(84, 54, 64)
HSL
hsl(340, 22%, 27%)
HSB
hsb(340, 36%, 33%)
CMYK
cmyk(0%, 36%, 24%, 67%)
Oklch
oklch(37.2% 0.045 357.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1EDC7
C6CAF1

Analogous

F1D7C6
F1EDC7
E0F1C6

Triadic

F1EDC7
C6F1EC
ECC6F1

Split-Comp.

F1EDC7
C6E0F1
D7C6F1

Tetradic

F1EDC7
C6F1D7
C6CAF1
F1C6E0

Contrast Matrix WCAG 2.1 Contrast

F1EDC7
D3CFA0
B4C07E
337979
543640
—
1.3
Fail
1.6
Fail
4.3
AA Large
8.9
AAA
1.3
Fail
—
1.2
Fail
3.2
AA Large
6.7
AA
1.6
Fail
1.2
Fail
—
2.6
Fail
5.4
AA
4.3
AA Large
3.2
AA Large
2.6
Fail
—
2.1
Fail
8.9
AAA
6.7
AA
5.4
AA
2.1
Fail
—
White BG
1.2Fail
1.6Fail
1.9Fail
5.1AA
10.6AAA
Black BG
17.7AAA
13.2AAA
10.8AAA
4.2AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFD0
D1D1AB
B9B98E
515279
47473E

Deuteranopia

F0F0D2
D2D2AE
B9B892
4D4879
494B3D

Tritanopia

F1D7D9
D3B4B6
B59B9D
377979
533C3B

Achromatopsia

EAEAEA
CBCBCB
B5B5B5
646464
404040

Shades & Tints Shades & Tints

#F1EDC7

Dark
Light

#D3CFA0

Dark
Light

#B4C07E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1edc7;
  --color-2: #d3cfa0;
  --color-3: #b4c07e;
  --color-4: #337979;
  --color-5: #543640;
}

SCSS

$color-1: #f1edc7;
$color-2: #d3cfa0;
$color-3: #b4c07e;
$color-4: #337979;
$color-5: #543640;

TAILWIND

colors: {
  'brand-1': '#f1edc7',
  'brand-2': '#d3cfa0',
  'brand-3': '#b4c07e',
  'brand-4': '#337979',
  'brand-5': '#543640',
}

RGB Array

[241, 237, 199], [211, 207, 160], [180, 192, 126], [51, 121, 121], [84, 54, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1EDC7, #D3CFA0, #B4C07E, #337979, #543640 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: #f1edc7; --color-2: #d3cfa0; --color-3: #b4c07e; --color-4: #337979; --color-5: #543640. 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