#CAA4D8 + #FB80D8 + #FFA690 + #B2AC82 + #736CB0 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#CAA4D8

Lilac · Silver · Lilac Purple

HEX

#CAA4D8

RGB

rgb(202, 164, 216)

HSL

hsl(284, 40%, 75%)

HSB

hsb(284, 24%, 85%)

CMYK

cmyk(6%, 24%, 0%, 15%)

Oklch

oklch(77.0% 0.084 316.8)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#FB80D8

Mauve · Violet · Lilac Purple

HEX

#FB80D8

RGB

rgb(251, 128, 216)

HSL

hsl(317, 94%, 74%)

HSB

hsb(317, 49%, 98%)

CMYK

cmyk(0%, 49%, 14%, 2%)

Oklch

oklch(76.6% 0.181 339.2)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#FFA690

Peach Pink · LightSalmon · Coral Red

HEX

#FFA690

RGB

rgb(255, 166, 144)

HSL

hsl(12, 100%, 78%)

HSB

hsb(12, 44%, 100%)

CMYK

cmyk(0%, 35%, 44%, 0%)

Oklch

oklch(80.8% 0.111 34.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B2AC82

Autumn Sage · Tan · Sunflower

HEX

#B2AC82

RGB

rgb(178, 172, 130)

HSL

hsl(53, 24%, 60%)

HSB

hsb(53, 27%, 70%)

CMYK

cmyk(0%, 3%, 27%, 30%)

Oklch

oklch(73.9% 0.058 100.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#736CB0

Deep Indigo · SlateBlue · Navy Blue

HEX

#736CB0

RGB

rgb(115, 108, 176)

HSL

hsl(246, 30%, 56%)

HSB

hsb(246, 39%, 69%)

CMYK

cmyk(35%, 39%, 0%, 31%)

Oklch

oklch(56.7% 0.104 287.3)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAA4D8

B3D9A6

Analogous

B2A6D9

CAA4D8

D9A6CD

Triadic

CAA4D8

D9CBA6

A6D9CB

Split-Comp.

CAA4D8

CDD9A6

A6D9B2

Tetradic

CAA4D8

D9B2A6

B3D9A6

A6CDD9

Contrast Matrix WCAG 2.1 Contrast

CAA4D8	FB80D8	FFA690	B2AC82	736CB0
—	1.1 Fail	1.1 Fail	1.1 Fail	2.2 Fail
1.1 Fail	—	1.2 Fail	1.0 Fail	2.0 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	2.5 Fail
1.1 Fail	1.0 Fail	1.2 Fail	—	2.0 Fail
2.2 Fail	2.0 Fail	2.5 Fail	2.0 Fail	—

White BG

2.1Fail

2.3Fail

1.9Fail

2.3Fail

4.7AA

Black BG

9.8AAA

9.2AAA

11.1AAA

9.1AAA

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BAB9CB

C6C5C3

D8D895

AFAF8C

7070A0

Deuteranopia

BCBFC8

CDD6BE

DEE497

B0B08F

70719C

Tritanopia

C8C1BF

F5B2AE

FB9A9A

B29496

739390

Achromatopsia

B5B5B5

AFAFAF

BEBEBE

A9A9A9

767676

Shades & Tints Shades & Tints

#CAA4D8

Dark

Light

#FB80D8

Dark

Light

#FFA690

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #caa4d8;
  --color-2: #fb80d8;
  --color-3: #ffa690;
  --color-4: #b2ac82;
  --color-5: #736cb0;
}

SCSS

$color-1: #caa4d8;
$color-2: #fb80d8;
$color-3: #ffa690;
$color-4: #b2ac82;
$color-5: #736cb0;

TAILWIND

colors: {
  'brand-1': '#caa4d8',
  'brand-2': '#fb80d8',
  'brand-3': '#ffa690',
  'brand-4': '#b2ac82',
  'brand-5': '#736cb0',
}

RGB Array

[202, 164, 216], [251, 128, 216], [255, 166, 144], [178, 172, 130], [115, 108, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #CAA4D8, #FB80D8, #FFA690, #B2AC82, #736CB0 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: #caa4d8; --color-2: #fb80d8; --color-3: #ffa690; --color-4: #b2ac82; --color-5: #736cb0. 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