#A870A7 + #CB7EB1 + #E199B0 + #DEC4C9 + #ECD4D9 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#A870A7

Rose Purple · MediumOrchid · Violet

HEX

#A870A7

RGB

rgb(168, 112, 167)

HSL

hsl(301, 24%, 55%)

HSB

hsb(301, 33%, 66%)

CMYK

cmyk(0%, 33%, 1%, 34%)

Oklch

oklch(62.3% 0.103 327.3)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#CB7EB1

Mauve · Orchid · Rose Pink

HEX

#CB7EB1

RGB

rgb(203, 126, 177)

HSL

hsl(320, 43%, 65%)

HSB

hsb(320, 38%, 80%)

CMYK

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

Oklch

oklch(69.0% 0.115 340.6)

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

#E199B0

Rouge · LightPink · Rose Pink

HEX

#E199B0

RGB

rgb(225, 153, 176)

HSL

hsl(341, 55%, 74%)

HSB

hsb(341, 32%, 88%)

CMYK

cmyk(0%, 32%, 22%, 12%)

Oklch

oklch(76.0% 0.091 358.7)

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

#DEC4C9

Peach Pink · LightGray · Cherry Blossom

HEX

#DEC4C9

RGB

rgb(222, 196, 201)

HSL

hsl(348, 28%, 82%)

HSB

hsb(348, 12%, 87%)

CMYK

cmyk(0%, 12%, 9%, 13%)

Oklch

oklch(84.4% 0.030 4.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#ECD4D9

Peach Pink · LightGray · Cherry Blossom

HEX

#ECD4D9

RGB

rgb(236, 212, 217)

HSL

hsl(348, 39%, 88%)

HSB

hsb(348, 10%, 93%)

CMYK

cmyk(0%, 10%, 8%, 7%)

Oklch

oklch(89.1% 0.027 3.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A870A7

71A872

Analogous

8D71A8

A870A7

A8718B

Triadic

A870A7

A7A871

71A7A8

Split-Comp.

A870A7

8BA871

71A88D

Tetradic

A870A7

A88D71

71A872

718BA8

Contrast Matrix WCAG 2.1 Contrast

A870A7	CB7EB1	E199B0	DEC4C9	ECD4D9
—	1.3 Fail	1.7 Fail	2.3 Fail	2.7 Fail
1.3 Fail	—	1.3 Fail	1.8 Fail	2.1 Fail
1.7 Fail	1.3 Fail	—	1.4 Fail	1.6 Fail
2.3 Fail	1.8 Fail	1.4 Fail	—	1.2 Fail
2.7 Fail	2.1 Fail	1.6 Fail	1.2 Fail	—

White BG

3.8AA Large

2.9Fail

2.2Fail

1.6Fail

1.4Fail

Black BG

5.5AA

7.2AAA

9.4AAA

12.8AAA

15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

908F9A

AAA9A5

C2C1AA

D3D3C8

E2E1D8

Deuteranopia

939797

AEB4A2

C6CBA9

D4D6C8

E3E5D7

Tritanopia

A58F8D

C79B99

DDA6A5

DDC7C7

EBD7D7

Achromatopsia

878787

9B9B9B

B1B1B1

CCCCCC

DCDCDC

Shades & Tints Shades & Tints

#A870A7

Dark

Light

#CB7EB1

Dark

Light

#E199B0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a870a7;
  --color-2: #cb7eb1;
  --color-3: #e199b0;
  --color-4: #dec4c9;
  --color-5: #ecd4d9;
}

SCSS

$color-1: #a870a7;
$color-2: #cb7eb1;
$color-3: #e199b0;
$color-4: #dec4c9;
$color-5: #ecd4d9;

TAILWIND

colors: {
  'brand-1': '#a870a7',
  'brand-2': '#cb7eb1',
  'brand-3': '#e199b0',
  'brand-4': '#dec4c9',
  'brand-5': '#ecd4d9',
}

RGB Array

[168, 112, 167], [203, 126, 177], [225, 153, 176], [222, 196, 201], [236, 212, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A870A7, #CB7EB1, #E199B0, #DEC4C9, #ECD4D9 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: #a870a7; --color-2: #cb7eb1; --color-3: #e199b0; --color-4: #dec4c9; --color-5: #ecd4d9. 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