← Back to Editor

#F7F5F2 · #B0B879 · #86A164 · #267869 · #110D12

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

#F7F5F2

Goose Yellow · SeaShell · Peach Orange

HEX
#F7F5F2
RGB
rgb(247, 245, 242)
HSL
hsl(36, 24%, 96%)
HSB
hsb(36, 2%, 97%)
CMYK
cmyk(0%, 1%, 2%, 3%)
Oklch
oklch(97.1% 0.005 78.3)

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

#B0B879

Autumn Sage · Tan · Sunflower

HEX
#B0B879
RGB
rgb(176, 184, 121)
HSL
hsl(68, 31%, 60%)
HSB
hsb(68, 34%, 72%)
CMYK
cmyk(4%, 0%, 34%, 28%)
Oklch
oklch(76.1% 0.085 114.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#86A164

Grass Green · Gray · Olive Green

HEX
#86A164
RGB
rgb(134, 161, 100)
HSL
hsl(87, 24%, 51%)
HSB
hsb(87, 38%, 63%)
CMYK
cmyk(17%, 0%, 38%, 37%)
Oklch
oklch(67.3% 0.090 128.1)

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

#267869

Mineral Blue · SeaGreen · Mint Ice

HEX
#267869
RGB
rgb(38, 120, 105)
HSL
hsl(169, 52%, 31%)
HSB
hsb(169, 68%, 47%)
CMYK
cmyk(68%, 0%, 13%, 53%)
Oklch
oklch(51.9% 0.082 178.3)

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

#110D12

Dark Plum · Black · Dark Purple

HEX
#110D12
RGB
rgb(17, 13, 18)
HSL
hsl(288, 16%, 6%)
HSB
hsb(288, 28%, 7%)
CMYK
cmyk(6%, 28%, 0%, 93%)
Oklch
oklch(16.7% 0.012 319.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7F5F2
F2F4F7

Analogous

F7F3F2
F7F5F2
F7F7F2

Triadic

F7F5F2
F2F7F5
F5F2F7

Split-Comp.

F7F5F2
F2F7F7
F3F2F7

Tetradic

F7F5F2
F2F7F3
F2F4F7
F7F2F7

Contrast Matrix WCAG 2.1 Contrast

F7F5F2
B0B879
86A164
267869
110D12
—
1.9
Fail
2.6
Fail
4.9
AA
17.7
AAA
1.9
Fail
—
1.4
Fail
2.5
Fail
9.2
AAA
2.6
Fail
1.4
Fail
—
1.8
Fail
6.7
AA
4.9
AA
2.5
Fail
1.8
Fail
—
3.6
AA Large
17.7
AAA
9.2
AAA
6.7
AA
3.6
AA Large
—
White BG
1.1Fail
2.1Fail
2.9Fail
5.3AA
19.3AAA
Black BG
19.3AAA
10.0AAA
7.3AAA
4.0AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6F3
B3B488
929273
4A4A6D
0F0F11

Deuteranopia

F6F6F3
B3B28C
908E76
453F6E
101011

Tritanopia

F7F3F3
B09497
877E81
2A6F70
111010

Achromatopsia

F5F5F5
AEAEAE
929292
5E5E5E
0F0F0F

Shades & Tints Shades & Tints

#F7F5F2

Dark
Light

#B0B879

Dark
Light

#86A164

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7f5f2;
  --color-2: #b0b879;
  --color-3: #86a164;
  --color-4: #267869;
  --color-5: #110d12;
}

SCSS

$color-1: #f7f5f2;
$color-2: #b0b879;
$color-3: #86a164;
$color-4: #267869;
$color-5: #110d12;

TAILWIND

colors: {
  'brand-1': '#f7f5f2',
  'brand-2': '#b0b879',
  'brand-3': '#86a164',
  'brand-4': '#267869',
  'brand-5': '#110d12',
}

RGB Array

[247, 245, 242], [176, 184, 121], [134, 161, 100], [38, 120, 105], [17, 13, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7F5F2, #B0B879, #86A164, #267869, #110D12 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: #f7f5f2; --color-2: #b0b879; --color-3: #86a164; --color-4: #267869; --color-5: #110d12. 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