#7E81A4 + #94D7C1 + #EDE698 + #FBF7EB + #FB8D6C · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#7E81A4

Azure · LightSlateGray · Navy Blue

HEX

#7E81A4

RGB

rgb(126, 129, 164)

HSL

hsl(235, 17%, 57%)

HSB

hsb(235, 23%, 64%)

CMYK

cmyk(23%, 21%, 0%, 36%)

Oklch

oklch(61.4% 0.053 280.9)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#94D7C1

Jade · LightSteelBlue · Lake Green

HEX

#94D7C1

RGB

rgb(148, 215, 193)

HSL

hsl(160, 46%, 71%)

HSB

hsb(160, 31%, 84%)

CMYK

cmyk(31%, 0%, 10%, 16%)

Oklch

oklch(82.8% 0.075 171.9)

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

#EDE698

Fresh Green · Khaki · Lemon Cream

HEX

#EDE698

RGB

rgb(237, 230, 152)

HSL

hsl(55, 70%, 76%)

HSB

hsb(55, 36%, 93%)

CMYK

cmyk(0%, 3%, 36%, 7%)

Oklch

oklch(91.3% 0.099 103.8)

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

#FBF7EB

Goose Yellow · SeaShell · Lemon Cream

HEX

#FBF7EB

RGB

rgb(251, 247, 235)

HSL

hsl(45, 67%, 95%)

HSB

hsb(45, 6%, 98%)

CMYK

cmyk(0%, 2%, 6%, 2%)

Oklch

oklch(97.6% 0.016 91.5)

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

#FB8D6C

Peach Pink · Salmon · Coral Red

HEX

#FB8D6C

RGB

rgb(251, 141, 108)

HSL

hsl(14, 95%, 70%)

HSB

hsb(14, 57%, 98%)

CMYK

cmyk(0%, 44%, 57%, 2%)

Oklch

oklch(75.5% 0.142 37.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7E81A4

A4A17F

Analogous

7F94A4

7E81A4

8E7FA4

Triadic

7E81A4

A47F82

82A47F

Split-Comp.

7E81A4

A48E7F

94A47F

Tetradic

7E81A4

A47F94

A4A17F

7FA48E

Contrast Matrix WCAG 2.1 Contrast

7E81A4	94D7C1	EDE698	FBF7EB	FB8D6C
—	2.3 Fail	2.9 Fail	3.5 AA Large	1.6 Fail
2.3 Fail	—	1.3 Fail	1.5 Fail	1.4 Fail
2.9 Fail	1.3 Fail	—	1.2 Fail	1.8 Fail
3.5 AA Large	1.5 Fail	1.2 Fail	—	2.1 Fail
1.6 Fail	1.4 Fail	1.8 Fail	2.1 Fail	—

White BG

3.8AA Large

1.6Fail

1.3Fail

1.1Fail

2.3Fail

Black BG

5.6AA

12.7AAA

16.4AAA

19.6AAA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7F9C

B1B2C6

EAEAAB

F9F9EE

CBCA74

Deuteranopia

7F7F9A

ADA8C8

EAEBAF

FAFAEF

D2DA76

Tritanopia

7E9593

97CBCB

EDBABD

FBF0F1

F67A7C

Achromatopsia

848484

C0C0C0

DFDFDF

F7F7F7

AAAAAA

Shades & Tints Shades & Tints

#7E81A4

Dark

Light

#94D7C1

Dark

Light

#EDE698

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7e81a4;
  --color-2: #94d7c1;
  --color-3: #ede698;
  --color-4: #fbf7eb;
  --color-5: #fb8d6c;
}

SCSS

$color-1: #7e81a4;
$color-2: #94d7c1;
$color-3: #ede698;
$color-4: #fbf7eb;
$color-5: #fb8d6c;

TAILWIND

colors: {
  'brand-1': '#7e81a4',
  'brand-2': '#94d7c1',
  'brand-3': '#ede698',
  'brand-4': '#fbf7eb',
  'brand-5': '#fb8d6c',
}

RGB Array

[126, 129, 164], [148, 215, 193], [237, 230, 152], [251, 247, 235], [251, 141, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #7E81A4, #94D7C1, #EDE698, #FBF7EB, #FB8D6C 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: #7e81a4; --color-2: #94d7c1; --color-3: #ede698; --color-4: #fbf7eb; --color-5: #fb8d6c. 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