#CABDB1 + #CFB3AD + #D7A1A0 + #E4848A + #ED707B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CABDB1

Apricot · Silver · Warm Sun

HEX

#CABDB1

RGB

rgb(202, 189, 177)

HSL

hsl(29, 19%, 74%)

HSB

hsb(29, 12%, 79%)

CMYK

cmyk(0%, 6%, 12%, 21%)

Oklch

oklch(80.6% 0.022 65.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CFB3AD

Peach Pink · Silver · Coral Red

HEX

#CFB3AD

RGB

rgb(207, 179, 173)

HSL

hsl(11, 26%, 75%)

HSB

hsb(11, 16%, 81%)

CMYK

cmyk(0%, 14%, 16%, 19%)

Oklch

oklch(78.9% 0.034 32.1)

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

#D7A1A0

Peach Pink · Tan · Coral Red

HEX

#D7A1A0

RGB

rgb(215, 161, 160)

HSL

hsl(1, 41%, 74%)

HSB

hsb(1, 26%, 84%)

CMYK

cmyk(0%, 25%, 26%, 16%)

Oklch

oklch(75.9% 0.064 19.9)

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

#E4848A

Peach Pink · LightCoral · Coral Red

HEX

#E4848A

RGB

rgb(228, 132, 138)

HSL

hsl(356, 64%, 71%)

HSB

hsb(356, 42%, 89%)

CMYK

cmyk(0%, 42%, 39%, 11%)

Oklch

oklch(71.8% 0.118 16.5)

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

#ED707B

Peach Pink · LightCoral · Coral Red

HEX

#ED707B

RGB

rgb(237, 112, 123)

HSL

hsl(355, 78%, 68%)

HSB

hsb(355, 53%, 93%)

CMYK

cmyk(0%, 53%, 48%, 7%)

Oklch

oklch(69.6% 0.154 16.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CABDB1

B0BDC9

Analogous

C9B0B1

CABDB1

C9C9B0

Triadic

CABDB1

B0C9BC

BCB0C9

Split-Comp.

CABDB1

B0C9C9

B0B1C9

Tetradic

CABDB1

B1C9B0

B0BDC9

C9B0C9

Contrast Matrix WCAG 2.1 Contrast

CABDB1	CFB3AD	D7A1A0	E4848A	ED707B
—	1.1 Fail	1.2 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.6 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.8Fail

2.0Fail

2.2Fail

2.6Fail

2.9Fail

Black BG

11.4AAA

10.7AAA

9.5AAA

8.0AAA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C4B4

C3C3AE

C0BFA0

BABA89

B7B678

Deuteranopia

C5C6B5

C5C7AF

C3C7A0

C0C788

BEC778

Tritanopia

C9B6B7

CEB0B0

D4A0A0

DF8787

E77676

Achromatopsia

C0C0C0

BBBBBB

B1B1B1

A1A1A1

979797

Shades & Tints Shades & Tints

#CABDB1

Dark

Light

#CFB3AD

Dark

Light

#D7A1A0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cabdb1;
  --color-2: #cfb3ad;
  --color-3: #d7a1a0;
  --color-4: #e4848a;
  --color-5: #ed707b;
}

SCSS

$color-1: #cabdb1;
$color-2: #cfb3ad;
$color-3: #d7a1a0;
$color-4: #e4848a;
$color-5: #ed707b;

TAILWIND

colors: {
  'brand-1': '#cabdb1',
  'brand-2': '#cfb3ad',
  'brand-3': '#d7a1a0',
  'brand-4': '#e4848a',
  'brand-5': '#ed707b',
}

RGB Array

[202, 189, 177], [207, 179, 173], [215, 161, 160], [228, 132, 138], [237, 112, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CABDB1, #CFB3AD, #D7A1A0, #E4848A, #ED707B 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: #cabdb1; --color-2: #cfb3ad; --color-3: #d7a1a0; --color-4: #e4848a; --color-5: #ed707b. 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