← Back to Editor

#F3E2B4 · #CDC7A5 · #A3AB96 · #31386E · #FC076F

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

#F3E2B4

Goose Yellow · Wheat · Lemon Cream

HEX
#F3E2B4
RGB
rgb(243, 226, 180)
HSL
hsl(44, 72%, 83%)
HSB
hsb(44, 26%, 95%)
CMYK
cmyk(0%, 7%, 26%, 5%)
Oklch
oklch(91.5% 0.063 90.2)

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

#CDC7A5

Fresh Green · Silver · Sunflower

HEX
#CDC7A5
RGB
rgb(205, 199, 165)
HSL
hsl(51, 29%, 73%)
HSB
hsb(51, 20%, 80%)
CMYK
cmyk(0%, 3%, 20%, 20%)
Oklch
oklch(82.6% 0.046 99.0)

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

#A3AB96

Willow Green · DarkGray · Apple Green

HEX
#A3AB96
RGB
rgb(163, 171, 150)
HSL
hsl(83, 11%, 63%)
HSB
hsb(83, 12%, 67%)
CMYK
cmyk(5%, 0%, 12%, 33%)
Oklch
oklch(72.9% 0.031 124.2)

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

#31386E

Indigo · DarkSlateBlue · Prussian Blue

HEX
#31386E
RGB
rgb(49, 56, 110)
HSL
hsl(233, 38%, 31%)
HSB
hsb(233, 55%, 43%)
CMYK
cmyk(55%, 49%, 0%, 57%)
Oklch
oklch(36.4% 0.093 275.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#FC076F

Dark Violet · DeepPink · Rose Pink

HEX
#FC076F
RGB
rgb(252, 7, 111)
HSL
hsl(335, 98%, 51%)
HSB
hsb(335, 97%, 99%)
CMYK
cmyk(0%, 97%, 56%, 1%)
Oklch
oklch(63.7% 0.253 7.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3E2B4
B4C5F3

Analogous

F3C3B4
F3E2B4
E4F3B4

Triadic

F3E2B4
B4F3E2
E2B4F3

Split-Comp.

F3E2B4
B4E4F3
C3B4F3

Tetradic

F3E2B4
B4F3C3
B4C5F3
F3B4E4

Contrast Matrix WCAG 2.1 Contrast

F3E2B4
CDC7A5
A3AB96
31386E
FC076F
—
1.3
Fail
1.9
Fail
8.5
AAA
3.0
AA Large
1.3
Fail
—
1.4
Fail
6.4
AA
2.3
Fail
1.9
Fail
1.4
Fail
—
4.6
AA
1.6
Fail
8.5
AAA
6.4
AA
4.6
AA
—
2.8
Fail
3.0
AA Large
2.3
Fail
1.6
Fail
2.8
Fail
—
White BG
1.3Fail
1.7Fail
2.4Fail
10.9AAA
3.9AA Large
Black BG
16.3AAA
12.3AAA
8.8AAA
1.9Fail
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEBBF
CACAAD
A6A79B
343461
929056

Deuteranopia

EDEEC2
CBCBAF
A6A59C
34335E
A0B250

Tritanopia

F2C8CA
CDB4B5
A39FA0
315754
F0423E

Achromatopsia

E2E2E2
C5C5C5
A6A6A6
3C3C3C
5C5C5C

Shades & Tints Shades & Tints

#F3E2B4

Dark
Light

#CDC7A5

Dark
Light

#A3AB96

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3e2b4;
  --color-2: #cdc7a5;
  --color-3: #a3ab96;
  --color-4: #31386e;
  --color-5: #fc076f;
}

SCSS

$color-1: #f3e2b4;
$color-2: #cdc7a5;
$color-3: #a3ab96;
$color-4: #31386e;
$color-5: #fc076f;

TAILWIND

colors: {
  'brand-1': '#f3e2b4',
  'brand-2': '#cdc7a5',
  'brand-3': '#a3ab96',
  'brand-4': '#31386e',
  'brand-5': '#fc076f',
}

RGB Array

[243, 226, 180], [205, 199, 165], [163, 171, 150], [49, 56, 110], [252, 7, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F3E2B4, #CDC7A5, #A3AB96, #31386E, #FC076F is ideal for: 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: #f3e2b4; --color-2: #cdc7a5; --color-3: #a3ab96; --color-4: #31386e; --color-5: #fc076f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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