#A7C1B4 + #787387 + #ECA382 + #FAF4B6 + #B3B294 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#A7C1B4

Jade · DarkGray · Apple Green

HEX

#A7C1B4

RGB

rgb(167, 193, 180)

HSL

hsl(150, 17%, 71%)

HSB

hsb(150, 13%, 76%)

CMYK

cmyk(13%, 0%, 7%, 24%)

Oklch

oklch(78.8% 0.034 164.0)

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

#787387

Deep Indigo · Gray · Warm Gray

HEX

#787387

RGB

rgb(120, 115, 135)

HSL

hsl(255, 8%, 49%)

HSB

hsb(255, 15%, 53%)

CMYK

cmyk(11%, 15%, 0%, 47%)

Oklch

oklch(56.7% 0.031 296.8)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#ECA382

Apricot · DarkSalmon · Warm Sun

HEX

#ECA382

RGB

rgb(236, 163, 130)

HSL

hsl(19, 74%, 72%)

HSB

hsb(19, 45%, 93%)

CMYK

cmyk(0%, 31%, 45%, 7%)

Oklch

oklch(77.9% 0.098 45.2)

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

#FAF4B6

Fresh Green · Bisque · Lemon Cream

HEX

#FAF4B6

RGB

rgb(250, 244, 182)

HSL

hsl(55, 87%, 85%)

HSB

hsb(55, 27%, 98%)

CMYK

cmyk(0%, 2%, 27%, 2%)

Oklch

oklch(95.7% 0.079 103.1)

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

#B3B294

Fresh Green · DarkGray · Sunflower

HEX

#B3B294

RGB

rgb(179, 178, 148)

HSL

hsl(58, 17%, 64%)

HSB

hsb(58, 17%, 70%)

CMYK

cmyk(0%, 1%, 17%, 30%)

Oklch

oklch(75.6% 0.041 105.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7C1B4

C2A8B5

Analogous

A8C2A8

A7C1B4

A8C2C2

Triadic

A7C1B4

B5A8C2

C2B5A8

Split-Comp.

A7C1B4

C2A8C2

C2A8A8

Tetradic

A7C1B4

A8A8C2

C2A8B5

C2C2A8

Contrast Matrix WCAG 2.1 Contrast

A7C1B4	787387	ECA382	FAF4B6	B3B294
—	2.4 Fail	1.1 Fail	1.7 Fail	1.1 Fail
2.4 Fail	—	2.2 Fail	4.1 AA Large	2.1 Fail
1.1 Fail	2.2 Fail	—	1.8 Fail	1.0 Fail
1.7 Fail	4.1 AA Large	1.8 Fail	—	1.9 Fail
1.1 Fail	2.1 Fail	1.0 Fail	1.9 Fail	—

White BG

1.9Fail

4.6AA

2.1Fail

1.1Fail

2.2Fail

Black BG

10.9AAA

4.6AA

10.1AAA

18.7AAA

9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B2B7

767682

CCCC8A

F7F7C5

B3B39B

Deuteranopia

B1AFB8

767781

D1D68C

F8F8C9

B3B39D

Tritanopia

A8BABA

787E7E

E89092

FAD1D3

B3A1A2

Achromatopsia

B8B8B8

777777

B5B5B5

EFEFEF

AFAFAF

Shades & Tints Shades & Tints

#A7C1B4

Dark

Light

#787387

Dark

Light

#ECA382

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7c1b4;
  --color-2: #787387;
  --color-3: #eca382;
  --color-4: #faf4b6;
  --color-5: #b3b294;
}

SCSS

$color-1: #a7c1b4;
$color-2: #787387;
$color-3: #eca382;
$color-4: #faf4b6;
$color-5: #b3b294;

TAILWIND

colors: {
  'brand-1': '#a7c1b4',
  'brand-2': '#787387',
  'brand-3': '#eca382',
  'brand-4': '#faf4b6',
  'brand-5': '#b3b294',
}

RGB Array

[167, 193, 180], [120, 115, 135], [236, 163, 130], [250, 244, 182], [179, 178, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A7C1B4, #787387, #ECA382, #FAF4B6, #B3B294 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: #a7c1b4; --color-2: #787387; --color-3: #eca382; --color-4: #faf4b6; --color-5: #b3b294. 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