#FAF9D9 + #FF3880 + #BA9BA1 + #BCCDA6 + #D5F1EC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FAF9D9

Fresh Green · Beige · Lemon Cream

HEX

#FAF9D9

RGB

rgb(250, 249, 217)

HSL

hsl(58, 77%, 92%)

HSB

hsb(58, 13%, 98%)

CMYK

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

Oklch

oklch(97.5% 0.042 105.7)

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

#FF3880

Rouge · DeepPink · Rose Pink

HEX

#FF3880

RGB

rgb(255, 56, 128)

HSL

hsl(338, 100%, 61%)

HSB

hsb(338, 78%, 100%)

CMYK

cmyk(0%, 78%, 50%, 0%)

Oklch

oklch(66.6% 0.235 5.2)

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

#BA9BA1

Peach Pink · DarkGray · Coral Red

HEX

#BA9BA1

RGB

rgb(186, 155, 161)

HSL

hsl(348, 18%, 67%)

HSB

hsb(348, 17%, 73%)

CMYK

cmyk(0%, 17%, 13%, 27%)

Oklch

oklch(71.9% 0.038 5.0)

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

#BCCDA6

Willow Green · Silver · Apple Green

HEX

#BCCDA6

RGB

rgb(188, 205, 166)

HSL

hsl(86, 28%, 73%)

HSB

hsb(86, 19%, 80%)

CMYK

cmyk(8%, 0%, 19%, 20%)

Oklch

oklch(82.5% 0.056 126.8)

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

#D5F1EC

Jade · Lavender · Glacier Blue

HEX

#D5F1EC

RGB

rgb(213, 241, 236)

HSL

hsl(169, 50%, 89%)

HSB

hsb(169, 12%, 95%)

CMYK

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

Oklch

oklch(93.6% 0.030 183.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAF9D9

DBDCFA

Analogous

FAEADB

FAF9D9

ECFADB

Triadic

FAF9D9

DBFAF9

F9DBFA

Split-Comp.

FAF9D9

DBECFA

EADBFA

Tetradic

FAF9D9

DBFAEA

DBDCFA

FADBEC

Contrast Matrix WCAG 2.1 Contrast

FAF9D9	FF3880	BA9BA1	BCCDA6	D5F1EC
—	3.2 AA Large	2.4 Fail	1.6 Fail	1.1 Fail
3.2 AA Large	—	1.4 Fail	2.0 Fail	2.9 Fail
2.4 Fail	1.4 Fail	—	1.5 Fail	2.1 Fail
1.6 Fail	2.0 Fail	1.5 Fail	—	1.4 Fail
1.1 Fail	2.9 Fail	2.1 Fail	1.4 Fail	—

White BG

1.1Fail

3.4AA Large

2.5Fail

1.7Fail

1.2Fail

Black BG

19.6AAA

6.1AA

8.3AAA

12.4AAA

17.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAE1

A9A76F

ADACA0

C3C4AF

E1E1ED

Deuteranopia

FAFAE3

B4C36A

AEB19F

C2C1B2

E0DDEE

Tritanopia

FAE7E8

F5615E

B89E9E

BDB7B9

D6EEEE

Achromatopsia

F6F6F6

7C7C7C

A5A5A5

C3C3C3

E8E8E8

Shades & Tints Shades & Tints

#FAF9D9

Dark

Light

#FF3880

Dark

Light

#BA9BA1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #faf9d9;
  --color-2: #ff3880;
  --color-3: #ba9ba1;
  --color-4: #bccda6;
  --color-5: #d5f1ec;
}

SCSS

$color-1: #faf9d9;
$color-2: #ff3880;
$color-3: #ba9ba1;
$color-4: #bccda6;
$color-5: #d5f1ec;

TAILWIND

colors: {
  'brand-1': '#faf9d9',
  'brand-2': '#ff3880',
  'brand-3': '#ba9ba1',
  'brand-4': '#bccda6',
  'brand-5': '#d5f1ec',
}

RGB Array

[250, 249, 217], [255, 56, 128], [186, 155, 161], [188, 205, 166], [213, 241, 236]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAF9D9, #FF3880, #BA9BA1, #BCCDA6, #D5F1EC 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: #faf9d9; --color-2: #ff3880; --color-3: #ba9ba1; --color-4: #bccda6; --color-5: #d5f1ec. 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 general-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