#FF4270 + #BCA3B9 + #A7BABE + #AACEC4 + #DCF7CE · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF4270

Peach Pink · Tomato · Coral Red

HEX

#FF4270

RGB

rgb(255, 66, 112)

HSL

hsl(345, 100%, 63%)

HSB

hsb(345, 74%, 100%)

CMYK

cmyk(0%, 74%, 56%, 0%)

Oklch

oklch(66.9% 0.224 11.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#BCA3B9

Mauve · DarkGray · Lilac Purple

HEX

#BCA3B9

RGB

rgb(188, 163, 185)

HSL

hsl(307, 16%, 69%)

HSB

hsb(307, 13%, 74%)

CMYK

cmyk(0%, 13%, 2%, 26%)

Oklch

oklch(74.4% 0.042 329.9)

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

#A7BABE

Sky Blue · Silver · Lake Green

HEX

#A7BABE

RGB

rgb(167, 186, 190)

HSL

hsl(190, 15%, 70%)

HSB

hsb(190, 12%, 75%)

CMYK

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

Oklch

oklch(77.6% 0.022 211.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#AACEC4

Jade · Silver · Lake Green

HEX

#AACEC4

RGB

rgb(170, 206, 196)

HSL

hsl(163, 27%, 74%)

HSB

hsb(163, 17%, 81%)

CMYK

cmyk(17%, 0%, 5%, 19%)

Oklch

oklch(82.2% 0.041 176.6)

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

#DCF7CE

Emerald · Beige · Mint Green

HEX

#DCF7CE

RGB

rgb(220, 247, 206)

HSL

hsl(100, 72%, 89%)

HSB

hsb(100, 17%, 97%)

CMYK

cmyk(11%, 0%, 17%, 3%)

Oklch

oklch(94.6% 0.061 134.9)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF4270

42FFD0

Analogous

FF42D0

FF4270

FF7142

Triadic

FF4270

71FF42

4271FF

Split-Comp.

FF4270

42FF71

42D0FF

Tetradic

FF4270

D0FF42

42FFD0

7142FF

Contrast Matrix WCAG 2.1 Contrast

FF4270	BCA3B9	A7BABE	AACEC4	DCF7CE
—	1.4 Fail	1.7 Fail	2.0 Fail	2.9 Fail
1.4 Fail	—	1.1 Fail	1.4 Fail	2.0 Fail
1.7 Fail	1.1 Fail	—	1.2 Fail	1.8 Fail
2.0 Fail	1.4 Fail	1.2 Fail	—	1.5 Fail
2.9 Fail	2.0 Fail	1.8 Fail	1.5 Fail	—

White BG

3.4AA Large

2.3Fail

2.0Fail

1.7Fail

1.2Fail

Black BG

6.3AA

9.1AAA

10.4AAA

12.3AAA

18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAB65

B1B1B4

AFAFBD

BABAC6

E8E8D8

Deuteranopia

B8C662

B3B5B2

AEADBD

B8B5C7

E6E4DA

Tritanopia

F65C5A

BBAFAF

A8BCBC

ACC8C9

DDE0E1

Achromatopsia

808080

ADADAD

B5B5B5

C2C2C2

EAEAEA

Shades & Tints Shades & Tints

#FF4270

Dark

Light

#BCA3B9

Dark

Light

#A7BABE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff4270;
  --color-2: #bca3b9;
  --color-3: #a7babe;
  --color-4: #aacec4;
  --color-5: #dcf7ce;
}

SCSS

$color-1: #ff4270;
$color-2: #bca3b9;
$color-3: #a7babe;
$color-4: #aacec4;
$color-5: #dcf7ce;

TAILWIND

colors: {
  'brand-1': '#ff4270',
  'brand-2': '#bca3b9',
  'brand-3': '#a7babe',
  'brand-4': '#aacec4',
  'brand-5': '#dcf7ce',
}

RGB Array

[255, 66, 112], [188, 163, 185], [167, 186, 190], [170, 206, 196], [220, 247, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #FF4270, #BCA3B9, #A7BABE, #AACEC4, #DCF7CE 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: #ff4270; --color-2: #bca3b9; --color-3: #a7babe; --color-4: #aacec4; --color-5: #dcf7ce. 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 space-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