#9AE2DD + #93B4C3 + #FFB1B1 + #FFDCC3 + #DEDBD1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9AE2DD

Jade · LightBlue · Lake Green

HEX

#9AE2DD

RGB

rgb(154, 226, 221)

HSL

hsl(176, 55%, 75%)

HSB

hsb(176, 32%, 89%)

CMYK

cmyk(32%, 0%, 2%, 11%)

Oklch

oklch(86.4% 0.072 190.4)

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

#93B4C3

Sky Blue · DarkGray · Lake Green

HEX

#93B4C3

RGB

rgb(147, 180, 195)

HSL

hsl(199, 29%, 67%)

HSB

hsb(199, 25%, 76%)

CMYK

cmyk(25%, 8%, 0%, 24%)

Oklch

oklch(75.0% 0.042 227.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#FFB1B1

Peach Pink · LightPink · Cherry Blossom

HEX

#FFB1B1

RGB

rgb(255, 177, 177)

HSL

hsl(0, 100%, 85%)

HSB

hsb(0, 31%, 100%)

CMYK

cmyk(0%, 31%, 31%, 0%)

Oklch

oklch(83.5% 0.092 19.2)

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

#FFDCC3

Apricot · Bisque · Peach Orange

HEX

#FFDCC3

RGB

rgb(255, 220, 195)

HSL

hsl(25, 100%, 88%)

HSB

hsb(25, 24%, 100%)

CMYK

cmyk(0%, 14%, 24%, 0%)

Oklch

oklch(91.7% 0.051 57.6)

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

#DEDBD1

Goose Yellow · LightGray · Lemon Cream

HEX

#DEDBD1

RGB

rgb(222, 219, 209)

HSL

hsl(46, 16%, 85%)

HSB

hsb(46, 6%, 87%)

CMYK

cmyk(0%, 1%, 6%, 13%)

Oklch

oklch(89.1% 0.014 93.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AE2DD

E29CA1

Analogous

9CE2BB

9AE2DD

9CC4E2

Triadic

9AE2DD

DE9CE2

E2DE9C

Split-Comp.

9AE2DD

E29CC4

E2BB9C

Tetradic

9AE2DD

BB9CE2

E29CA1

C4E29C

Contrast Matrix WCAG 2.1 Contrast

9AE2DD	93B4C3	FFB1B1	FFDCC3	DEDBD1
—	1.5 Fail	1.2 Fail	1.1 Fail	1.1 Fail
1.5 Fail	—	1.3 Fail	1.7 Fail	1.6 Fail
1.2 Fail	1.3 Fail	—	1.3 Fail	1.2 Fail
1.1 Fail	1.7 Fail	1.3 Fail	—	1.1 Fail
1.1 Fail	1.6 Fail	1.2 Fail	1.1 Fail	—

White BG

1.5Fail

2.2Fail

1.7Fail

1.3Fail

1.4Fail

Black BG

14.3AAA

9.6AAA

12.2AAA

16.3AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9BADE

A1A2BF

DDDDB1

F0F0C9

DDDDD3

Deuteranopia

B5B0DF

9F9DBF

E2E8B1

F2F5CB

DDDDD4

Tritanopia

9EDFDF

95BDBC

FBB1B1

FDCECF

DED5D6

Achromatopsia

CCCCCC

ACACAC

C8C8C8

E4E4E4

DBDBDB

Shades & Tints Shades & Tints

#9AE2DD

Dark

Light

#93B4C3

Dark

Light

#FFB1B1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ae2dd;
  --color-2: #93b4c3;
  --color-3: #ffb1b1;
  --color-4: #ffdcc3;
  --color-5: #dedbd1;
}

SCSS

$color-1: #9ae2dd;
$color-2: #93b4c3;
$color-3: #ffb1b1;
$color-4: #ffdcc3;
$color-5: #dedbd1;

TAILWIND

colors: {
  'brand-1': '#9ae2dd',
  'brand-2': '#93b4c3',
  'brand-3': '#ffb1b1',
  'brand-4': '#ffdcc3',
  'brand-5': '#dedbd1',
}

RGB Array

[154, 226, 221], [147, 180, 195], [255, 177, 177], [255, 220, 195], [222, 219, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AE2DD, #93B4C3, #FFB1B1, #FFDCC3, #DEDBD1 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: #9ae2dd; --color-2: #93b4c3; --color-3: #ffb1b1; --color-4: #ffdcc3; --color-5: #dedbd1. 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