#FFE2C4 + #A3DFFF + #9FB3AA + #96A1A3 + #9D8BA3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFE2C4

Goose Yellow · Bisque · Peach Orange

HEX

#FFE2C4

RGB

rgb(255, 226, 196)

HSL

hsl(31, 100%, 88%)

HSB

hsb(31, 23%, 100%)

CMYK

cmyk(0%, 11%, 23%, 0%)

Oklch

oklch(92.9% 0.051 68.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#A3DFFF

Sky Blue · LightBlue · Sky Blue

HEX

#A3DFFF

RGB

rgb(163, 223, 255)

HSL

hsl(201, 100%, 82%)

HSB

hsb(201, 36%, 100%)

CMYK

cmyk(36%, 13%, 0%, 0%)

Oklch

oklch(87.4% 0.075 232.0)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#9FB3AA

Jade · DarkGray · Apple Green

HEX

#9FB3AA

RGB

rgb(159, 179, 170)

HSL

hsl(153, 12%, 66%)

HSB

hsb(153, 11%, 70%)

CMYK

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

Oklch

oklch(74.9% 0.026 166.8)

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

#96A1A3

Ash · DarkGray · Silver Sand

HEX

#96A1A3

RGB

rgb(150, 161, 163)

HSL

hsl(189, 7%, 61%)

HSB

hsb(189, 8%, 64%)

CMYK

cmyk(8%, 1%, 0%, 36%)

Oklch

oklch(70.1% 0.013 209.8)

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

#9D8BA3

Dark Plum · DarkGray · Violet

HEX

#9D8BA3

RGB

rgb(157, 139, 163)

HSL

hsl(285, 12%, 59%)

HSB

hsb(285, 15%, 64%)

CMYK

cmyk(4%, 15%, 0%, 36%)

Oklch

oklch(66.1% 0.041 317.7)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE2C4

C2DFFF

Analogous

FFC3C2

FFE2C4

FEFFC2

Triadic

FFE2C4

C2FFE1

E1C2FF

Split-Comp.

FFE2C4

C2FEFF

C3C2FF

Tetradic

FFE2C4

C2FFC3

C2DFFF

FFC2FE

Contrast Matrix WCAG 2.1 Contrast

FFE2C4	A3DFFF	9FB3AA	96A1A3	9D8BA3
—	1.2 Fail	1.8 Fail	2.1 Fail	2.5 Fail
1.2 Fail	—	1.5 Fail	1.8 Fail	2.2 Fail
1.8 Fail	1.5 Fail	—	1.2 Fail	1.4 Fail
2.1 Fail	1.8 Fail	1.2 Fail	—	1.2 Fail
2.5 Fail	2.2 Fail	1.4 Fail	1.2 Fail	—

White BG

1.2Fail

1.4Fail

2.2Fail

2.7Fail

3.2AA Large

Black BG

16.9AAA

14.6AAA

9.5AAA

7.9AAA

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2CB

BDBEF7

A8A8AC

9B9BA3

95959D

Deuteranopia

F4F6CD

BAB5F5

A7A5AD

9A99A2

96989C

Tritanopia

FED1D2

A6F1F0

A0AEAE

97A2A2

9C9998

Achromatopsia

E7E7E7

D1D1D1

ACACAC

9E9E9E

939393

Shades & Tints Shades & Tints

#FFE2C4

Dark

Light

#A3DFFF

Dark

Light

#9FB3AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe2c4;
  --color-2: #a3dfff;
  --color-3: #9fb3aa;
  --color-4: #96a1a3;
  --color-5: #9d8ba3;
}

SCSS

$color-1: #ffe2c4;
$color-2: #a3dfff;
$color-3: #9fb3aa;
$color-4: #96a1a3;
$color-5: #9d8ba3;

TAILWIND

colors: {
  'brand-1': '#ffe2c4',
  'brand-2': '#a3dfff',
  'brand-3': '#9fb3aa',
  'brand-4': '#96a1a3',
  'brand-5': '#9d8ba3',
}

RGB Array

[255, 226, 196], [163, 223, 255], [159, 179, 170], [150, 161, 163], [157, 139, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFE2C4, #A3DFFF, #9FB3AA, #96A1A3, #9D8BA3 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: #ffe2c4; --color-2: #a3dfff; --color-3: #9fb3aa; --color-4: #96a1a3; --color-5: #9d8ba3. 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