← Back to Editor

#FFF1C6 · #78481A · #8ED4B7 · #B4EBD8 · #EFE3E3

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FFF1C6

Goose Yellow · Bisque · Lemon Cream

HEX
#FFF1C6
RGB
rgb(255, 241, 198)
HSL
hsl(45, 100%, 89%)
HSB
hsb(45, 22%, 100%)
CMYK
cmyk(0%, 5%, 22%, 0%)
Oklch
oklch(95.9% 0.058 92.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#78481A

Tangerine · Sienna · Amber Brown

HEX
#78481A
RGB
rgb(120, 72, 26)
HSL
hsl(29, 64%, 29%)
HSB
hsb(29, 78%, 47%)
CMYK
cmyk(0%, 40%, 78%, 53%)
Oklch
oklch(44.9% 0.088 60.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#8ED4B7

Jade · MediumAquaMarine · Apple Green

HEX
#8ED4B7
RGB
rgb(142, 212, 183)
HSL
hsl(155, 45%, 69%)
HSB
hsb(155, 33%, 83%)
CMYK
cmyk(33%, 0%, 14%, 17%)
Oklch
oklch(81.5% 0.082 166.5)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#B4EBD8

Jade · LightBlue · Mint Green

HEX
#B4EBD8
RGB
rgb(180, 235, 216)
HSL
hsl(159, 58%, 81%)
HSB
hsb(159, 23%, 92%)
CMYK
cmyk(23%, 0%, 8%, 8%)
Oklch
oklch(89.7% 0.062 171.6)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#EFE3E3

Peach Pink · Linen · Cherry Blossom

HEX
#EFE3E3
RGB
rgb(239, 227, 227)
HSL
hsl(0, 27%, 91%)
HSB
hsb(0, 5%, 94%)
CMYK
cmyk(0%, 5%, 5%, 6%)
Oklch
oklch(92.5% 0.013 17.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF1C6
C7D5FF

Analogous

FFD5C7
FFF1C6
F1FFC7

Triadic

FFF1C6
C7FFF1
F1C7FF

Split-Comp.

FFF1C6
C7F1FF
D5C7FF

Tetradic

FFF1C6
C7FFD5
C7D5FF
FFC7F1

Contrast Matrix WCAG 2.1 Contrast

FFF1C6
78481A
8ED4B7
B4EBD8
EFE3E3
—
6.8
AA
1.5
Fail
1.2
Fail
1.1
Fail
6.8
AA
—
4.5
AA Large
5.8
AA
6.1
AA
1.5
Fail
4.5
AA Large
—
1.3
Fail
1.4
Fail
1.2
Fail
5.8
AA
1.3
Fail
—
1.1
Fail
1.1
Fail
6.1
AA
1.4
Fail
1.1
Fail
—
White BG
1.1Fail
7.7AAA
1.7Fail
1.3Fail
1.3Fail
Black BG
18.6AAA
2.7Fail
12.3AAA
15.8AAA
16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9D0
636325
ACADBE
CCCCDD
EAEAE3

Deuteranopia

FAFBD3
666A28
A8A3C0
C9C5DE
EBEBE3

Tritanopia

FED9DA
762E30
92C4C5
B7E0E1
EEE3E3

Achromatopsia

F0F0F0
515151
BCBCBC
D8D8D8
E7E7E7

Shades & Tints Shades & Tints

#FFF1C6

Dark
Light

#78481A

Dark
Light

#8ED4B7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff1c6;
  --color-2: #78481a;
  --color-3: #8ed4b7;
  --color-4: #b4ebd8;
  --color-5: #efe3e3;
}

SCSS

$color-1: #fff1c6;
$color-2: #78481a;
$color-3: #8ed4b7;
$color-4: #b4ebd8;
$color-5: #efe3e3;

TAILWIND

colors: {
  'brand-1': '#fff1c6',
  'brand-2': '#78481a',
  'brand-3': '#8ed4b7',
  'brand-4': '#b4ebd8',
  'brand-5': '#efe3e3',
}

RGB Array

[255, 241, 198], [120, 72, 26], [142, 212, 183], [180, 235, 216], [239, 227, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #FFF1C6, #78481A, #8ED4B7, #B4EBD8, #EFE3E3 is ideal for: health products, baby brands, fresh-style blogs, 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: #fff1c6; --color-2: #78481a; --color-3: #8ed4b7; --color-4: #b4ebd8; --color-5: #efe3e3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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. 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