← Back to Editor

#BEC971 · #F9E7CF · #6BC9D3 · #FFFFFF · #E6195C

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#BEC971

Fresh Green · Tan · Sunflower

HEX
#BEC971
RGB
rgb(190, 201, 113)
HSL
hsl(68, 45%, 62%)
HSB
hsb(68, 44%, 79%)
CMYK
cmyk(5%, 0%, 44%, 21%)
Oklch
oklch(80.8% 0.113 114.8)

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

#F9E7CF

Goose Yellow · Bisque · Peach Orange

HEX
#F9E7CF
RGB
rgb(249, 231, 207)
HSL
hsl(34, 78%, 89%)
HSB
hsb(34, 17%, 98%)
CMYK
cmyk(0%, 7%, 17%, 2%)
Oklch
oklch(93.6% 0.037 75.2)

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

#6BC9D3

Sky Blue · MediumTurquoise · Lake Green

HEX
#6BC9D3
RGB
rgb(107, 201, 211)
HSL
hsl(186, 54%, 62%)
HSB
hsb(186, 49%, 83%)
CMYK
cmyk(49%, 5%, 0%, 17%)
Oklch
oklch(78.2% 0.090 204.5)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#E6195C

Dark Violet · Crimson · Camellia

HEX
#E6195C
RGB
rgb(230, 25, 92)
HSL
hsl(340, 80%, 50%)
HSB
hsb(340, 89%, 90%)
CMYK
cmyk(0%, 89%, 60%, 10%)
Oklch
oklch(59.7% 0.229 11.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BEC971
7E72CA

Analogous

CAAA72
BEC971
92CA72

Triadic

BEC971
72BECA
CA72BE

Split-Comp.

BEC971
7292CA
AA72CA

Tetradic

BEC971
72CAAA
7E72CA
CA7292

Contrast Matrix WCAG 2.1 Contrast

BEC971
F9E7CF
6BC9D3
FFFFFF
E6195C
—
1.5
Fail
1.1
Fail
1.8
Fail
2.5
Fail
1.5
Fail
—
1.6
Fail
1.2
Fail
3.7
AA Large
1.1
Fail
1.6
Fail
—
1.9
Fail
2.3
Fail
1.8
Fail
1.2
Fail
1.9
Fail
—
4.5
AA
2.5
Fail
3.7
AA Large
2.3
Fail
4.5
AA
—
White BG
1.8Fail
1.2Fail
1.9Fail
1.0Fail
4.5AA
Black BG
11.8AAA
17.4AAA
10.9AAA
21.0AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C386
F1F1D5
9495D1
FFFFFF
8D8B4C

Deuteranopia

C2C18B
F2F4D6
8E87D0
FFFFFF
99A948

Tritanopia

BF979B
F8D9DA
70CFCE
FFFFFF
DC3F3C

Achromatopsia

BCBCBC
EAEAEA
AEAEAE
FFFFFF
5E5E5E

Shades & Tints Shades & Tints

#BEC971

Dark
Light

#F9E7CF

Dark
Light

#6BC9D3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bec971;
  --color-2: #f9e7cf;
  --color-3: #6bc9d3;
  --color-4: #ffffff;
  --color-5: #e6195c;
}

SCSS

$color-1: #bec971;
$color-2: #f9e7cf;
$color-3: #6bc9d3;
$color-4: #ffffff;
$color-5: #e6195c;

TAILWIND

colors: {
  'brand-1': '#bec971',
  'brand-2': '#f9e7cf',
  'brand-3': '#6bc9d3',
  'brand-4': '#ffffff',
  'brand-5': '#e6195c',
}

RGB Array

[190, 201, 113], [249, 231, 207], [107, 201, 211], [255, 255, 255], [230, 25, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BEC971, #F9E7CF, #6BC9D3, #FFFFFF, #E6195C is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #bec971; --color-2: #f9e7cf; --color-3: #6bc9d3; --color-4: #ffffff; --color-5: #e6195c. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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