#DBCBC8 + #F7B0A9 + #EB8681 + #BD635F + #975450 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DBCBC8

Peach Pink · LightGray · Cherry Blossom

HEX

#DBCBC8

RGB

rgb(219, 203, 200)

HSL

hsl(9, 21%, 82%)

HSB

hsb(9, 9%, 86%)

CMYK

cmyk(0%, 7%, 9%, 14%)

Oklch

oklch(85.4% 0.018 30.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F7B0A9

Peach Pink · LightPink · Cherry Blossom

HEX

#F7B0A9

RGB

rgb(247, 176, 169)

HSL

hsl(5, 83%, 82%)

HSB

hsb(5, 32%, 97%)

CMYK

cmyk(0%, 29%, 32%, 3%)

Oklch

oklch(82.2% 0.084 25.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#EB8681

Peach Pink · LightCoral · Coral Red

HEX

#EB8681

RGB

rgb(235, 134, 129)

HSL

hsl(3, 73%, 71%)

HSB

hsb(3, 45%, 92%)

CMYK

cmyk(0%, 43%, 45%, 8%)

Oklch

oklch(72.8% 0.125 23.6)

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

#BD635F

Crimson · Sienna · Passion Red

HEX

#BD635F

RGB

rgb(189, 99, 95)

HSL

hsl(3, 42%, 56%)

HSB

hsb(3, 50%, 74%)

CMYK

cmyk(0%, 48%, 50%, 26%)

Oklch

oklch(60.4% 0.116 23.8)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#975450

Crimson · Sienna · Passion Red

HEX

#975450

RGB

rgb(151, 84, 80)

HSL

hsl(3, 31%, 45%)

HSB

hsb(3, 47%, 59%)

CMYK

cmyk(0%, 44%, 47%, 41%)

Oklch

oklch(52.3% 0.090 24.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBCBC8

C7D8DB

Analogous

DBC7CE

DBCBC8

DBD4C7

Triadic

DBCBC8

C7DBCA

CAC7DB

Split-Comp.

DBCBC8

C7DBD4

C7CEDB

Tetradic

DBCBC8

CEDBC7

C7D8DB

D4C7DB

Contrast Matrix WCAG 2.1 Contrast

DBCBC8	F7B0A9	EB8681	BD635F	975450
—	1.1 Fail	1.6 Fail	2.6 Fail	3.6 AA Large
1.1 Fail	—	1.4 Fail	2.3 Fail	3.2 AA Large
1.6 Fail	1.4 Fail	—	1.6 Fail	2.2 Fail
2.6 Fail	2.3 Fail	1.6 Fail	—	1.4 Fail
3.6 AA Large	3.2 AA Large	2.2 Fail	1.4 Fail	—

White BG

1.6Fail

1.8Fail

2.5Fail

4.1AA Large

5.7AA

Black BG

13.4AAA

11.7AAA

8.3AAA

5.1AA

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4C9

D8D8AB

BFBE82

969560

7A7951

Deuteranopia

D5D6C9

DCE2AB

C5CD83

9BA260

7E8351

Tritanopia

DAC9C9

F3ACAC

E68383

B86161

945252

Achromatopsia

CFCFCF

C4C4C4

A4A4A4

7D7D7D

686868

Shades & Tints Shades & Tints

#DBCBC8

Dark

Light

#F7B0A9

Dark

Light

#EB8681

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbcbc8;
  --color-2: #f7b0a9;
  --color-3: #eb8681;
  --color-4: #bd635f;
  --color-5: #975450;
}

SCSS

$color-1: #dbcbc8;
$color-2: #f7b0a9;
$color-3: #eb8681;
$color-4: #bd635f;
$color-5: #975450;

TAILWIND

colors: {
  'brand-1': '#dbcbc8',
  'brand-2': '#f7b0a9',
  'brand-3': '#eb8681',
  'brand-4': '#bd635f',
  'brand-5': '#975450',
}

RGB Array

[219, 203, 200], [247, 176, 169], [235, 134, 129], [189, 99, 95], [151, 84, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #DBCBC8, #F7B0A9, #EB8681, #BD635F, #975450 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: #dbcbc8; --color-2: #f7b0a9; --color-3: #eb8681; --color-4: #bd635f; --color-5: #975450. 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 coffee-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