← Back to Editor

#F9C68F · #DBD5A3 · #AFD9AB · #82CEB0

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F9C68F

Goose Yellow · BurlyWood · Peach Orange

HEX
#F9C68F
RGB
rgb(249, 198, 143)
HSL
hsl(31, 90%, 77%)
HSB
hsb(31, 43%, 98%)
CMYK
cmyk(0%, 20%, 43%, 2%)
Oklch
oklch(85.9% 0.092 68.2)

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

#DBD5A3

Fresh Green · Wheat · Sunflower

HEX
#DBD5A3
RGB
rgb(219, 213, 163)
HSL
hsl(54, 44%, 75%)
HSB
hsb(54, 26%, 86%)
CMYK
cmyk(0%, 3%, 26%, 14%)
Oklch
oklch(86.6% 0.066 101.9)

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

#AFD9AB

Celadon · Silver · Apple Green

HEX
#AFD9AB
RGB
rgb(175, 217, 171)
HSL
hsl(115, 38%, 76%)
HSB
hsb(115, 21%, 85%)
CMYK
cmyk(19%, 0%, 21%, 15%)
Oklch
oklch(84.3% 0.077 142.6)

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

#82CEB0

Jade · MediumAquaMarine · Apple Green

HEX
#82CEB0
RGB
rgb(130, 206, 176)
HSL
hsl(156, 44%, 66%)
HSB
hsb(156, 37%, 81%)
CMYK
cmyk(37%, 0%, 15%, 19%)
Oklch
oklch(79.3% 0.087 167.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9C68F
90C3F9

Analogous

F99190
F9C68F
F7F990

Triadic

F9C68F
90F9C6
C690F9

Split-Comp.

F9C68F
90F7F9
9190F9

Tetradic

F9C68F
90F991
90C3F9
F990F7

Contrast Matrix WCAG 2.1 Contrast

F9C68F
DBD5A3
AFD9AB
82CEB0
—
1.0
Fail
1.0
Fail
1.2
Fail
1.0
Fail
—
1.1
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
1.2
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
White BG
1.6Fail
1.5Fail
1.6Fail
1.8Fail
Black BG
13.5AAA
14.1AAA
13.3AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E29C
D8D8AF
C1C2B6
A3A4B7

Deuteranopia

E6EAA0
D9D9B2
BFBCB9
9F99B9

Tritanopia

F6A7A9
DBB9BB
B1BFC1
86BDBE

Achromatopsia

CFCFCF
D1D1D1
C7C7C7
B4B4B4

Shades & Tints Shades & Tints

#F9C68F

Dark
Light

#DBD5A3

Dark
Light

#AFD9AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9c68f;
  --color-2: #dbd5a3;
  --color-3: #afd9ab;
  --color-4: #82ceb0;
}

SCSS

$color-1: #f9c68f;
$color-2: #dbd5a3;
$color-3: #afd9ab;
$color-4: #82ceb0;

TAILWIND

colors: {
  'brand-1': '#f9c68f',
  'brand-2': '#dbd5a3',
  'brand-3': '#afd9ab',
  'brand-4': '#82ceb0',
}

RGB Array

[249, 198, 143], [219, 213, 163], [175, 217, 171], [130, 206, 176]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This earth-style palette of #F9C68F, #DBD5A3, #AFD9AB, #82CEB0 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f9c68f; --color-2: #dbd5a3; --color-3: #afd9ab; --color-4: #82ceb0. 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. 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 4-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