#B38DAA + #AFA2B2 + #C4B3B5 + #F4CAAF + #F2E2B7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B38DAA

Mauve · DarkGray · Lilac Purple

HEX

#B38DAA

RGB

rgb(179, 141, 170)

HSL

hsl(314, 20%, 63%)

HSB

hsb(314, 21%, 70%)

CMYK

cmyk(0%, 21%, 5%, 30%)

Oklch

oklch(68.8% 0.061 334.7)

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

#AFA2B2

Lilac · DarkGray · Silver Sand

HEX

#AFA2B2

RGB

rgb(175, 162, 178)

HSL

hsl(289, 9%, 67%)

HSB

hsb(289, 9%, 70%)

CMYK

cmyk(2%, 9%, 0%, 30%)

Oklch

oklch(72.8% 0.027 319.9)

Traditional「Lilac」· Paint「Silver Sand」· Creative Urban Concrete

#C4B3B5

Peach Pink · Silver · Coral Red

HEX

#C4B3B5

RGB

rgb(196, 179, 181)

HSL

hsl(353, 13%, 74%)

HSB

hsb(353, 9%, 77%)

CMYK

cmyk(0%, 9%, 8%, 23%)

Oklch

oklch(78.2% 0.020 9.4)

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

#F4CAAF

Apricot · Wheat · Peach Orange

HEX

#F4CAAF

RGB

rgb(244, 202, 175)

HSL

hsl(23, 76%, 82%)

HSB

hsb(23, 28%, 96%)

CMYK

cmyk(0%, 17%, 28%, 4%)

Oklch

oklch(86.8% 0.060 54.5)

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

#F2E2B7

Goose Yellow · Wheat · Lemon Cream

HEX

#F2E2B7

RGB

rgb(242, 226, 183)

HSL

hsl(44, 69%, 83%)

HSB

hsb(44, 24%, 95%)

CMYK

cmyk(0%, 7%, 24%, 5%)

Oklch

oklch(91.5% 0.059 90.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B38DAA

8EB497

Analogous

A98EB4

B38DAA

B48E98

Triadic

B38DAA

ABB48E

8EABB4

Split-Comp.

B38DAA

98B48E

8EB4A9

Tetradic

B38DAA

B4A98E

8EB497

8E98B4

Contrast Matrix WCAG 2.1 Contrast

B38DAA	AFA2B2	C4B3B5	F4CAAF	F2E2B7
—	1.2 Fail	1.4 Fail	1.9 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.6 Fail	1.9 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.6 Fail
1.9 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
2.2 Fail	1.9 Fail	1.6 Fail	1.2 Fail	—

White BG

2.9Fail

2.4Fail

2.0Fail

1.5Fail

1.3Fail

Black BG

7.3AAA

8.6AAA

10.5AAA

13.9AAA

16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A2A3

A9A9AE

BDBCB5

E2E1B6

EBEBC1

Deuteranopia

A5A8A1

AAABAD

BEBFB4

E4E7B7

ECEDC4

Tritanopia

B19D9C

AEABAA

C3B4B4

F2BBBC

F1CACB

Achromatopsia

9C9C9C

A8A8A8

B8B8B8

D3D3D3

E2E2E2

Shades & Tints Shades & Tints

#B38DAA

Dark

Light

#AFA2B2

Dark

Light

#C4B3B5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b38daa;
  --color-2: #afa2b2;
  --color-3: #c4b3b5;
  --color-4: #f4caaf;
  --color-5: #f2e2b7;
}

SCSS

$color-1: #b38daa;
$color-2: #afa2b2;
$color-3: #c4b3b5;
$color-4: #f4caaf;
$color-5: #f2e2b7;

TAILWIND

colors: {
  'brand-1': '#b38daa',
  'brand-2': '#afa2b2',
  'brand-3': '#c4b3b5',
  'brand-4': '#f4caaf',
  'brand-5': '#f2e2b7',
}

RGB Array

[179, 141, 170], [175, 162, 178], [196, 179, 181], [244, 202, 175], [242, 226, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B38DAA, #AFA2B2, #C4B3B5, #F4CAAF, #F2E2B7 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: #b38daa; --color-2: #afa2b2; --color-3: #c4b3b5; --color-4: #f4caaf; --color-5: #f2e2b7. 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