#46899E + #D1C0B2 + #99B4B0 + #FFAF87 + #FBBCA0 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#46899E

Slate Blue · SteelBlue · Mint Ice

HEX

#46899E

RGB

rgb(70, 137, 158)

HSL

hsl(194, 39%, 45%)

HSB

hsb(194, 56%, 62%)

CMYK

cmyk(56%, 13%, 0%, 38%)

Oklch

oklch(59.5% 0.075 220.8)

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

#D1C0B2

Apricot · Silver · Peach Orange

HEX

#D1C0B2

RGB

rgb(209, 192, 178)

HSL

hsl(27, 25%, 76%)

HSB

hsb(27, 15%, 82%)

CMYK

cmyk(0%, 8%, 15%, 18%)

Oklch

oklch(81.8% 0.027 61.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#99B4B0

Jade · DarkGray · Lake Green

HEX

#99B4B0

RGB

rgb(153, 180, 176)

HSL

hsl(171, 15%, 65%)

HSB

hsb(171, 15%, 71%)

CMYK

cmyk(15%, 0%, 2%, 29%)

Oklch

oklch(74.8% 0.030 185.7)

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

#FFAF87

Apricot · LightSalmon · Peach Orange

HEX

#FFAF87

RGB

rgb(255, 175, 135)

HSL

hsl(20, 100%, 76%)

HSB

hsb(20, 47%, 100%)

CMYK

cmyk(0%, 31%, 47%, 0%)

Oklch

oklch(82.2% 0.108 47.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FBBCA0

Apricot · LightPink · Peach Orange

HEX

#FBBCA0

RGB

rgb(251, 188, 160)

HSL

hsl(18, 92%, 81%)

HSB

hsb(18, 36%, 98%)

CMYK

cmyk(0%, 25%, 36%, 2%)

Oklch

oklch(84.6% 0.083 45.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

46899E

A05B46

Analogous

46A088

46899E

465EA0

Triadic

46899E

A0468B

8BA046

Split-Comp.

46899E

A0465E

A08846

Tetradic

46899E

8846A0

A05B46

5EA046

Contrast Matrix WCAG 2.1 Contrast

46899E	D1C0B2	99B4B0	FFAF87	FBBCA0
—	2.2 Fail	1.8 Fail	2.2 Fail	2.4 Fail
2.2 Fail	—	1.3 Fail	1.0 Fail	1.1 Fail
1.8 Fail	1.3 Fail	—	1.2 Fail	1.3 Fail
2.2 Fail	1.0 Fail	1.2 Fail	—	1.1 Fail
2.4 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

3.9AA Large

1.8Fail

2.2Fail

1.8Fail

1.6Fail

Black BG

5.3AA

11.9AAA

9.5AAA

11.7AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636499

CAC9B5

A5A5B1

DCDC91

E0DFA7

Deuteranopia

5F5A98

CBCCB6

A3A1B1

E1E793

E3E8A8

Tritanopia

499594

D0B8B9

9AB2B2

FB989A

F8ACAD

Achromatopsia

777777

C3C3C3

ABABAB

C2C2C2

CCCCCC

Shades & Tints Shades & Tints

#46899E

Dark

Light

#D1C0B2

Dark

Light

#99B4B0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #46899e;
  --color-2: #d1c0b2;
  --color-3: #99b4b0;
  --color-4: #ffaf87;
  --color-5: #fbbca0;
}

SCSS

$color-1: #46899e;
$color-2: #d1c0b2;
$color-3: #99b4b0;
$color-4: #ffaf87;
$color-5: #fbbca0;

TAILWIND

colors: {
  'brand-1': '#46899e',
  'brand-2': '#d1c0b2',
  'brand-3': '#99b4b0',
  'brand-4': '#ffaf87',
  'brand-5': '#fbbca0',
}

RGB Array

[70, 137, 158], [209, 192, 178], [153, 180, 176], [255, 175, 135], [251, 188, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #46899E, #D1C0B2, #99B4B0, #FFAF87, #FBBCA0 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: #46899e; --color-2: #d1c0b2; --color-3: #99b4b0; --color-4: #ffaf87; --color-5: #fbbca0. 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