#499F9C + #A7B294 + #D1D3AE + #FFECAA + #FD4375 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#499F9C

Mineral Blue · CadetBlue · Mint Ice

HEX

#499F9C

RGB

rgb(73, 159, 156)

HSL

hsl(178, 37%, 45%)

HSB

hsb(178, 54%, 62%)

CMYK

cmyk(54%, 0%, 2%, 38%)

Oklch

oklch(64.9% 0.083 192.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#A7B294

Willow Green · DarkGray · Apple Green

HEX

#A7B294

RGB

rgb(167, 178, 148)

HSL

hsl(82, 16%, 64%)

HSB

hsb(82, 17%, 70%)

CMYK

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

Oklch

oklch(74.7% 0.044 123.8)

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

#D1D3AE

Fresh Green · Silver · Sunflower

HEX

#D1D3AE

RGB

rgb(209, 211, 174)

HSL

hsl(63, 30%, 75%)

HSB

hsb(63, 18%, 83%)

CMYK

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

Oklch

oklch(85.6% 0.050 109.9)

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

#FFECAA

Goose Yellow · Wheat · Lemon Cream

HEX

#FFECAA

RGB

rgb(255, 236, 170)

HSL

hsl(47, 100%, 83%)

HSB

hsb(47, 33%, 100%)

CMYK

cmyk(0%, 7%, 33%, 0%)

Oklch

oklch(94.3% 0.086 94.0)

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

#FD4375

Rouge · DeepPink · Rose Pink

HEX

#FD4375

RGB

rgb(253, 67, 117)

HSL

hsl(344, 98%, 63%)

HSB

hsb(344, 74%, 99%)

CMYK

cmyk(0%, 74%, 54%, 1%)

Oklch

oklch(66.8% 0.222 10.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

499F9C

9D484B

Analogous

489D70

499F9C

48769D

Triadic

499F9C

9A489D

9D9A48

Split-Comp.

499F9C

9D4876

9D7048

Tetradic

499F9C

70489D

9D484B

769D48

Contrast Matrix WCAG 2.1 Contrast

499F9C	A7B294	D1D3AE	FFECAA	FD4375
—	1.4 Fail	2.0 Fail	2.7 Fail	1.1 Fail
1.4 Fail	—	1.4 Fail	1.9 Fail	1.5 Fail
2.0 Fail	1.4 Fail	—	1.3 Fail	2.2 Fail
2.7 Fail	1.9 Fail	1.3 Fail	—	2.9 Fail
1.1 Fail	1.5 Fail	2.2 Fail	2.9 Fail	—

White BG

3.1AA Large

2.2Fail

1.5Fail

1.2Fail

3.4AA Large

Black BG

6.7AA

9.4AAA

13.6AAA

17.8AAA

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6F9D

ACAC9B

D2D2B7

F7F7BA

ACAB69

Deuteranopia

69639D

ABAA9D

D2D2B9

F8F9BE

B7C566

Tritanopia

4D9D9D

A8A1A2

D1BEC0

FEC7C9

F45F5D

Achromatopsia

858585

ABABAB

CECECE

EAEAEA

808080

Shades & Tints Shades & Tints

#499F9C

Dark

Light

#A7B294

Dark

Light

#D1D3AE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #499f9c;
  --color-2: #a7b294;
  --color-3: #d1d3ae;
  --color-4: #ffecaa;
  --color-5: #fd4375;
}

SCSS

$color-1: #499f9c;
$color-2: #a7b294;
$color-3: #d1d3ae;
$color-4: #ffecaa;
$color-5: #fd4375;

TAILWIND

colors: {
  'brand-1': '#499f9c',
  'brand-2': '#a7b294',
  'brand-3': '#d1d3ae',
  'brand-4': '#ffecaa',
  'brand-5': '#fd4375',
}

RGB Array

[73, 159, 156], [167, 178, 148], [209, 211, 174], [255, 236, 170], [253, 67, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #499F9C, #A7B294, #D1D3AE, #FFECAA, #FD4375 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: #499f9c; --color-2: #a7b294; --color-3: #d1d3ae; --color-4: #ffecaa; --color-5: #fd4375. 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