← Back to Editor

#BA8792 · #F5ECDC · #C9C69C · #835E66 · #45373B

earth

A 5-color earth 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

#BA8792

Peach Pink · DarkGray · Coral Red

HEX
#BA8792
RGB
rgb(186, 135, 146)
HSL
hsl(347, 27%, 63%)
HSB
hsb(347, 27%, 73%)
CMYK
cmyk(0%, 27%, 22%, 27%)
Oklch
oklch(67.6% 0.064 4.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F5ECDC

Goose Yellow · Beige · Peach Orange

HEX
#F5ECDC
RGB
rgb(245, 236, 220)
HSL
hsl(38, 56%, 91%)
HSB
hsb(38, 10%, 96%)
CMYK
cmyk(0%, 4%, 10%, 4%)
Oklch
oklch(94.6% 0.023 82.1)

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

#C9C69C

Fresh Green · Tan · Sunflower

HEX
#C9C69C
RGB
rgb(201, 198, 156)
HSL
hsl(56, 29%, 70%)
HSB
hsb(56, 22%, 79%)
CMYK
cmyk(0%, 1%, 22%, 21%)
Oklch
oklch(81.8% 0.056 104.2)

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

#835E66

Crimson · DimGray · Passion Red

HEX
#835E66
RGB
rgb(131, 94, 102)
HSL
hsl(347, 16%, 44%)
HSB
hsb(347, 28%, 51%)
CMYK
cmyk(0%, 28%, 22%, 49%)
Oklch
oklch(52.3% 0.050 4.6)

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

#45373B

Dark Violet · DarkSlateGray · Raspberry

HEX
#45373B
RGB
rgb(69, 55, 59)
HSL
hsl(343, 11%, 24%)
HSB
hsb(343, 20%, 27%)
CMYK
cmyk(0%, 20%, 14%, 73%)
Oklch
oklch(35.3% 0.021 359.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA8792
87BAAF

Analogous

BA87AC
BA8792
BA9687

Triadic

BA8792
92BA87
8792BA

Split-Comp.

BA8792
87BA96
87ACBA

Tetradic

BA8792
ACBA87
87BAAF
9687BA

Contrast Matrix WCAG 2.1 Contrast

BA8792
F5ECDC
C9C69C
835E66
45373B
—
2.6
Fail
1.7
Fail
1.9
Fail
3.7
AA Large
2.6
Fail
—
1.5
Fail
4.8
AA
9.6
AAA
1.7
Fail
1.5
Fail
—
3.2
AA Large
6.5
AA
1.9
Fail
4.8
AA
3.2
AA Large
—
2.0
Fail
3.7
AA Large
9.6
AAA
6.5
AA
2.0
Fail
—
White BG
3.0AA Large
1.2Fail
1.7Fail
5.6AA
11.3AAA
Black BG
7.0AA
17.9AAA
12.0AAA
3.8AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A38F
F1F1E0
C8C8A6
737364
3F3F3A

Deuteranopia

A7AB8F
F2F2E1
C8C8A9
757864
40413A

Tritanopia

B78D8D
F5E3E4
C9AEB0
816362
443939

Achromatopsia

989898
EDEDED
C2C2C2
6A6A6A
3C3C3C

Shades & Tints Shades & Tints

#BA8792

Dark
Light

#F5ECDC

Dark
Light

#C9C69C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba8792;
  --color-2: #f5ecdc;
  --color-3: #c9c69c;
  --color-4: #835e66;
  --color-5: #45373b;
}

SCSS

$color-1: #ba8792;
$color-2: #f5ecdc;
$color-3: #c9c69c;
$color-4: #835e66;
$color-5: #45373b;

TAILWIND

colors: {
  'brand-1': '#ba8792',
  'brand-2': '#f5ecdc',
  'brand-3': '#c9c69c',
  'brand-4': '#835e66',
  'brand-5': '#45373b',
}

RGB Array

[186, 135, 146], [245, 236, 220], [201, 198, 156], [131, 94, 102], [69, 55, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #BA8792, #F5ECDC, #C9C69C, #835E66, #45373B 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: #ba8792; --color-2: #f5ecdc; --color-3: #c9c69c; --color-4: #835e66; --color-5: #45373b. 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 earth-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