#EF3E1F + #CB7E51 + #BDBE7C + #CAE2A9 + #DBF7D6 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EF3E1F

Vermilion · OrangeRed · Passion Red

HEX

#EF3E1F

RGB

rgb(239, 62, 31)

HSL

hsl(9, 87%, 53%)

HSB

hsb(9, 87%, 94%)

CMYK

cmyk(0%, 74%, 87%, 6%)

Oklch

oklch(62.8% 0.217 32.2)

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

#CB7E51

Tangerine · Coral · Warm Sun

HEX

#CB7E51

RGB

rgb(203, 126, 81)

HSL

hsl(22, 54%, 56%)

HSB

hsb(22, 60%, 80%)

CMYK

cmyk(0%, 38%, 60%, 20%)

Oklch

oklch(66.5% 0.113 50.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#BDBE7C

Fresh Green · Tan · Sunflower

HEX

#BDBE7C

RGB

rgb(189, 190, 124)

HSL

hsl(61, 34%, 62%)

HSB

hsb(61, 35%, 75%)

CMYK

cmyk(1%, 0%, 35%, 25%)

Oklch

oklch(78.5% 0.087 109.0)

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

#CAE2A9

Willow Green · Silver · Apple Green

HEX

#CAE2A9

RGB

rgb(202, 226, 169)

HSL

hsl(85, 50%, 77%)

HSB

hsb(85, 25%, 89%)

CMYK

cmyk(11%, 0%, 25%, 11%)

Oklch

oklch(88.1% 0.080 126.5)

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

#DBF7D6

Emerald · Beige · Mint Green

HEX

#DBF7D6

RGB

rgb(219, 247, 214)

HSL

hsl(111, 67%, 90%)

HSB

hsb(111, 13%, 97%)

CMYK

cmyk(11%, 0%, 13%, 3%)

Oklch

oklch(94.7% 0.053 140.9)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EF3E1F

1FD0EF

Analogous

EF1F68

EF3E1F

EFA61F

Triadic

EF3E1F

1FEF3E

3E1FEF

Split-Comp.

EF3E1F

1FEFA6

1F68EF

Tetradic

EF3E1F

68EF1F

1FD0EF

A61FEF

Contrast Matrix WCAG 2.1 Contrast

EF3E1F	CB7E51	BDBE7C	CAE2A9	DBF7D6
—	1.2 Fail	2.0 Fail	2.8 Fail	3.4 AA Large
1.2 Fail	—	1.6 Fail	2.3 Fail	2.8 Fail
2.0 Fail	1.6 Fail	—	1.4 Fail	1.7 Fail
2.8 Fail	2.3 Fail	1.4 Fail	—	1.2 Fail
3.4 AA Large	2.8 Fail	1.7 Fail	1.2 Fail	—

White BG

3.9AA Large

3.2AA Large

1.9Fail

1.4Fail

1.1Fail

Black BG

5.4AA

6.6AA

10.8AAA

15.0AAA

18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A127

AAA95C

BDBD8C

D4D5B7

E7E7DE

Deuteranopia

ADBA28

AEB45F

BDBD90

D3D1BA

E6E3E0

Tritanopia

E62C2E

C76466

BD999B

CBC2C4

DCE4E6

Achromatopsia

6F6F6F

909090

B6B6B6

D4D4D4

EBEBEB

Shades & Tints Shades & Tints

#EF3E1F

Dark

Light

#CB7E51

Dark

Light

#BDBE7C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ef3e1f;
  --color-2: #cb7e51;
  --color-3: #bdbe7c;
  --color-4: #cae2a9;
  --color-5: #dbf7d6;
}

SCSS

$color-1: #ef3e1f;
$color-2: #cb7e51;
$color-3: #bdbe7c;
$color-4: #cae2a9;
$color-5: #dbf7d6;

TAILWIND

colors: {
  'brand-1': '#ef3e1f',
  'brand-2': '#cb7e51',
  'brand-3': '#bdbe7c',
  'brand-4': '#cae2a9',
  'brand-5': '#dbf7d6',
}

RGB Array

[239, 62, 31], [203, 126, 81], [189, 190, 124], [202, 226, 169], [219, 247, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #EF3E1F, #CB7E51, #BDBE7C, #CAE2A9, #DBF7D6 is ideal for: health products, baby brands, fresh-style blogs. 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: #ef3e1f; --color-2: #cb7e51; --color-3: #bdbe7c; --color-4: #cae2a9; --color-5: #dbf7d6. 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 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