#C7D8C5 + #9BDDD1 + #BBD3BD + #FF9BAB + #DDCDC1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C7D8C5

Celadon · LightGray · Mint Green

HEX

#C7D8C5

RGB

rgb(199, 216, 197)

HSL

hsl(114, 20%, 81%)

HSB

hsb(114, 9%, 85%)

CMYK

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

Oklch

oklch(86.4% 0.032 142.3)

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

#9BDDD1

Jade · LightBlue · Lake Green

HEX

#9BDDD1

RGB

rgb(155, 221, 209)

HSL

hsl(169, 49%, 74%)

HSB

hsb(169, 30%, 87%)

CMYK

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

Oklch

oklch(85.0% 0.069 182.0)

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

#BBD3BD

Celadon · Silver · Apple Green

HEX

#BBD3BD

RGB

rgb(187, 211, 189)

HSL

hsl(125, 21%, 78%)

HSB

hsb(125, 11%, 83%)

CMYK

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

Oklch

oklch(84.3% 0.040 147.6)

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

#FF9BAB

Peach Pink · LightPink · Coral Red

HEX

#FF9BAB

RGB

rgb(255, 155, 171)

HSL

hsl(350, 100%, 80%)

HSB

hsb(350, 39%, 100%)

CMYK

cmyk(0%, 39%, 33%, 0%)

Oklch

oklch(79.6% 0.120 9.8)

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

#DDCDC1

Apricot · LightGray · Peach Orange

HEX

#DDCDC1

RGB

rgb(221, 205, 193)

HSL

hsl(26, 29%, 81%)

HSB

hsb(26, 13%, 87%)

CMYK

cmyk(0%, 7%, 13%, 13%)

Oklch

oklch(85.8% 0.024 59.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7D8C5

D6C5D8

Analogous

D0D8C5

C7D8C5

C5D8CD

Triadic

C7D8C5

C5C7D8

D8C5C7

Split-Comp.

C7D8C5

CDC5D8

D8C5D0

Tetradic

C7D8C5

C5D0D8

D6C5D8

D8CDC5

Contrast Matrix WCAG 2.1 Contrast

C7D8C5	9BDDD1	BBD3BD	FF9BAB	DDCDC1
—	1.0 Fail	1.1 Fail	1.3 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.3 Fail	1.0 Fail
1.1 Fail	1.0 Fail	—	1.3 Fail	1.0 Fail
1.3 Fail	1.3 Fail	1.3 Fail	—	1.3 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.3 Fail	—

White BG

1.5Fail

1.6Fail

2.0Fail

1.5Fail

Black BG

14.1AAA

13.7AAA

13.2AAA

10.5AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECFCA

B8B8D4

C5C6C2

D4D3A7

D6D6C4

Deuteranopia

CDCCCB

B4AFD5

C4C2C4

DAE1A6

D7D8C5

Tritanopia

C8CDCE

9ED6D7

BCC7C7

FAA4A3

DCC6C7

Achromatopsia

D1D1D1

C8C8C8

C9C9C9

BBBBBB

D0D0D0

Shades & Tints Shades & Tints

#C7D8C5

Dark

Light

#9BDDD1

Dark

Light

#BBD3BD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7d8c5;
  --color-2: #9bddd1;
  --color-3: #bbd3bd;
  --color-4: #ff9bab;
  --color-5: #ddcdc1;
}

SCSS

$color-1: #c7d8c5;
$color-2: #9bddd1;
$color-3: #bbd3bd;
$color-4: #ff9bab;
$color-5: #ddcdc1;

TAILWIND

colors: {
  'brand-1': '#c7d8c5',
  'brand-2': '#9bddd1',
  'brand-3': '#bbd3bd',
  'brand-4': '#ff9bab',
  'brand-5': '#ddcdc1',
}

RGB Array

[199, 216, 197], [155, 221, 209], [187, 211, 189], [255, 155, 171], [221, 205, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7D8C5, #9BDDD1, #BBD3BD, #FF9BAB, #DDCDC1 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: #c7d8c5; --color-2: #9bddd1; --color-3: #bbd3bd; --color-4: #ff9bab; --color-5: #ddcdc1. 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