#BF5434 + #EB804C + #FFF3BA + #D7BD8C + #A5B0A0 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#BF5434

Crimson · Sienna · Passion Red

HEX

#BF5434

RGB

rgb(191, 84, 52)

HSL

hsl(14, 57%, 48%)

HSB

hsb(14, 73%, 75%)

CMYK

cmyk(0%, 56%, 73%, 25%)

Oklch

oklch(57.7% 0.146 37.2)

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

#EB804C

Apricot · Coral · Warm Sun

HEX

#EB804C

RGB

rgb(235, 128, 76)

HSL

hsl(20, 80%, 61%)

HSB

hsb(20, 68%, 92%)

CMYK

cmyk(0%, 46%, 68%, 8%)

Oklch

oklch(70.9% 0.148 45.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FFF3BA

Fresh Green · Bisque · Lemon Cream

HEX

#FFF3BA

RGB

rgb(255, 243, 186)

HSL

hsl(50, 100%, 86%)

HSB

hsb(50, 27%, 100%)

CMYK

cmyk(0%, 5%, 27%, 0%)

Oklch

oklch(96.0% 0.074 97.6)

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

#D7BD8C

Ginger · BurlyWood · Warm Sun

HEX

#D7BD8C

RGB

rgb(215, 189, 140)

HSL

hsl(39, 48%, 70%)

HSB

hsb(39, 35%, 84%)

CMYK

cmyk(0%, 12%, 35%, 16%)

Oklch

oklch(80.9% 0.071 83.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#A5B0A0

Celadon · DarkGray · Silver Sand

HEX

#A5B0A0

RGB

rgb(165, 176, 160)

HSL

hsl(101, 9%, 66%)

HSB

hsb(101, 9%, 69%)

CMYK

cmyk(6%, 0%, 9%, 31%)

Oklch

oklch(74.4% 0.026 135.7)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF5434

35A0C0

Analogous

C0355A

BF5434

C09B35

Triadic

BF5434

35C055

5535C0

Split-Comp.

BF5434

35C09B

355AC0

Tetradic

BF5434

5AC035

35A0C0

9B35C0

Contrast Matrix WCAG 2.1 Contrast

BF5434	EB804C	FFF3BA	D7BD8C	A5B0A0
—	1.7 Fail	4.1 AA Large	2.5 Fail	2.1 Fail
1.7 Fail	—	2.4 Fail	1.5 Fail	1.2 Fail
4.1 AA Large	2.4 Fail	—	1.6 Fail	2.0 Fail
2.5 Fail	1.5 Fail	1.6 Fail	—	1.2 Fail
2.1 Fail	1.2 Fail	2.0 Fail	1.2 Fail	—

White BG

4.6AA

2.7Fail

1.1Fail

1.8Fail

2.3Fail

Black BG

4.5AA

7.7AAA

18.8AAA

11.5AAA

9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

91903C

BDBC59

FAFAC8

CCCC98

AAAAA4

Deuteranopia

979F3E

C3CB5C

FBFBCB

CDCF9B

A9A8A5

Tritanopia

BA4243

E66365

FED3D5

D6A1A3

A6A7A8

Achromatopsia

707070

9A9A9A

F0F0F0

BFBFBF

ABABAB

Shades & Tints Shades & Tints

#BF5434

Dark

Light

#EB804C

Dark

Light

#FFF3BA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf5434;
  --color-2: #eb804c;
  --color-3: #fff3ba;
  --color-4: #d7bd8c;
  --color-5: #a5b0a0;
}

SCSS

$color-1: #bf5434;
$color-2: #eb804c;
$color-3: #fff3ba;
$color-4: #d7bd8c;
$color-5: #a5b0a0;

TAILWIND

colors: {
  'brand-1': '#bf5434',
  'brand-2': '#eb804c',
  'brand-3': '#fff3ba',
  'brand-4': '#d7bd8c',
  'brand-5': '#a5b0a0',
}

RGB Array

[191, 84, 52], [235, 128, 76], [255, 243, 186], [215, 189, 140], [165, 176, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BF5434, #EB804C, #FFF3BA, #D7BD8C, #A5B0A0 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: #bf5434; --color-2: #eb804c; --color-3: #fff3ba; --color-4: #d7bd8c; --color-5: #a5b0a0. 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 nature-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