← Back to Editor

#F2EFD0 · #BFBA86 · #75A18C · #182620 · #0D0D12

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

#F2EFD0

Fresh Green · Beige · Lemon Cream

HEX
#F2EFD0
RGB
rgb(242, 239, 208)
HSL
hsl(55, 57%, 88%)
HSB
hsb(55, 14%, 95%)
CMYK
cmyk(0%, 1%, 14%, 5%)
Oklch
oklch(94.6% 0.041 102.6)

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

#BFBA86

Fresh Green · Tan · Sunflower

HEX
#BFBA86
RGB
rgb(191, 186, 134)
HSL
hsl(55, 31%, 64%)
HSB
hsb(55, 30%, 75%)
CMYK
cmyk(0%, 3%, 30%, 25%)
Oklch
oklch(78.0% 0.070 103.2)

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

#75A18C

Mineral Blue · LightSlateGray · Olive Green

HEX
#75A18C
RGB
rgb(117, 161, 140)
HSL
hsl(151, 19%, 55%)
HSB
hsb(151, 27%, 63%)
CMYK
cmyk(27%, 0%, 13%, 37%)
Oklch
oklch(67.1% 0.057 163.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#182620

Mineral Blue · Black · Dark Green

HEX
#182620
RGB
rgb(24, 38, 32)
HSL
hsl(154, 23%, 12%)
HSB
hsb(154, 37%, 15%)
CMYK
cmyk(37%, 0%, 16%, 85%)
Oklch
oklch(25.4% 0.022 166.2)

Traditional「Mineral Blue」· Paint「Dark Green」· Creative Blush Sunrise

#0D0D12

Deep Indigo · Black · Deep Sea Blue

HEX
#0D0D12
RGB
rgb(13, 13, 18)
HSL
hsl(240, 16%, 6%)
HSB
hsb(240, 28%, 7%)
CMYK
cmyk(28%, 28%, 0%, 93%)
Oklch
oklch(16.2% 0.010 285.2)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2EFD0
CFD2F2

Analogous

F2DDCF
F2EFD0
E3F2CF

Triadic

F2EFD0
CFF2EF
EFCFF2

Split-Comp.

F2EFD0
CFE3F2
DDCFF2

Tetradic

F2EFD0
CFF2DD
CFD2F2
F2CFE3

Contrast Matrix WCAG 2.1 Contrast

F2EFD0
BFBA86
75A18C
182620
0D0D12
—
1.7
Fail
2.5
Fail
13.5
AAA
16.6
AAA
1.7
Fail
—
1.5
Fail
7.9
AAA
9.8
AAA
2.5
Fail
1.5
Fail
—
5.4
AA
6.7
AA
13.5
AAA
7.9
AAA
5.4
AA
—
1.2
Fail
16.6
AAA
9.8
AAA
6.7
AA
1.2
Fail
—
White BG
1.2Fail
2.0Fail
2.9Fail
15.7AAA
19.4AAA
Black BG
18.0AAA
10.6AAA
7.2AAA
1.3Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1D8
BDBD93
888891
1E1E21
0D0D11

Deuteranopia

F1F1D9
BDBE96
868292
1D1C22
0D0D11

Tritanopia

F2DDDF
BF9D9F
779596
192323
0D1010

Achromatopsia

ECECEC
B6B6B6
919191
212121
0E0E0E

Shades & Tints Shades & Tints

#F2EFD0

Dark
Light

#BFBA86

Dark
Light

#75A18C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2efd0;
  --color-2: #bfba86;
  --color-3: #75a18c;
  --color-4: #182620;
  --color-5: #0d0d12;
}

SCSS

$color-1: #f2efd0;
$color-2: #bfba86;
$color-3: #75a18c;
$color-4: #182620;
$color-5: #0d0d12;

TAILWIND

colors: {
  'brand-1': '#f2efd0',
  'brand-2': '#bfba86',
  'brand-3': '#75a18c',
  'brand-4': '#182620',
  'brand-5': '#0d0d12',
}

RGB Array

[242, 239, 208], [191, 186, 134], [117, 161, 140], [24, 38, 32], [13, 13, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2EFD0, #BFBA86, #75A18C, #182620, #0D0D12 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2efd0; --color-2: #bfba86; --color-3: #75a18c; --color-4: #182620; --color-5: #0d0d12. 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. Restrained colors convey professionalism and trust. 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