#908DAC + #DFC0AC + #FCC283 + #E7A16E + #CD2E33 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#908DAC

Wisteria · LightSlateGray · Cobalt Blue

HEX

#908DAC

RGB

rgb(144, 141, 172)

HSL

hsl(246, 16%, 61%)

HSB

hsb(246, 18%, 67%)

CMYK

cmyk(16%, 18%, 0%, 33%)

Oklch

oklch(65.7% 0.046 289.5)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#DFC0AC

Apricot · Tan · Peach Orange

HEX

#DFC0AC

RGB

rgb(223, 192, 172)

HSL

hsl(24, 44%, 77%)

HSB

hsb(24, 23%, 87%)

CMYK

cmyk(0%, 14%, 23%, 13%)

Oklch

oklch(82.9% 0.045 54.8)

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

#FCC283

Goose Yellow · BurlyWood · Warm Sun

HEX

#FCC283

RGB

rgb(252, 194, 131)

HSL

hsl(31, 95%, 75%)

HSB

hsb(31, 48%, 99%)

CMYK

cmyk(0%, 23%, 48%, 1%)

Oklch

oklch(85.3% 0.104 68.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#E7A16E

Apricot · DarkSalmon · Warm Sun

HEX

#E7A16E

RGB

rgb(231, 161, 110)

HSL

hsl(25, 72%, 67%)

HSB

hsb(25, 52%, 91%)

CMYK

cmyk(0%, 30%, 52%, 9%)

Oklch

oklch(76.6% 0.107 56.4)

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

#CD2E33

Vermilion · Crimson · Passion Red

HEX

#CD2E33

RGB

rgb(205, 46, 51)

HSL

hsl(358, 63%, 49%)

HSB

hsb(358, 78%, 80%)

CMYK

cmyk(0%, 78%, 75%, 20%)

Oklch

oklch(55.7% 0.195 24.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

908DAC

A8AB8C

Analogous

8C98AB

908DAC

9F8CAB

Triadic

908DAC

AB8F8C

8CAB8F

Split-Comp.

908DAC

AB9F8C

98AB8C

Tetradic

908DAC

AB8C98

A8AB8C

8CAB9F

Contrast Matrix WCAG 2.1 Contrast

908DAC	DFC0AC	FCC283	E7A16E	CD2E33
—	1.9 Fail	2.0 Fail	1.5 Fail	1.6 Fail
1.9 Fail	—	1.1 Fail	1.3 Fail	3.0 AA Large
2.0 Fail	1.1 Fail	—	1.4 Fail	3.3 AA Large
1.5 Fail	1.3 Fail	1.4 Fail	—	2.4 Fail
1.6 Fail	3.0 AA Large	3.3 AA Large	2.4 Fail	—

White BG

3.2AA Large

1.7Fail

1.6Fail

2.2Fail

5.2AA

Black BG

6.6AA

12.3AAA

13.2AAA

9.7AAA

4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8FA4

D2D1B1

E3E292

C9C87A

888732

Deuteranopia

8F8FA3

D3D6B2

E6EB96

CDD27D

919D31

Tritanopia

909F9D

DDB5B6

F99EA1

E48486

C53131

Achromatopsia

919191

C7C7C7

CCCCCC

B0B0B0

5E5E5E

Shades & Tints Shades & Tints

#908DAC

Dark

Light

#DFC0AC

Dark

Light

#FCC283

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #908dac;
  --color-2: #dfc0ac;
  --color-3: #fcc283;
  --color-4: #e7a16e;
  --color-5: #cd2e33;
}

SCSS

$color-1: #908dac;
$color-2: #dfc0ac;
$color-3: #fcc283;
$color-4: #e7a16e;
$color-5: #cd2e33;

TAILWIND

colors: {
  'brand-1': '#908dac',
  'brand-2': '#dfc0ac',
  'brand-3': '#fcc283',
  'brand-4': '#e7a16e',
  'brand-5': '#cd2e33',
}

RGB Array

[144, 141, 172], [223, 192, 172], [252, 194, 131], [231, 161, 110], [205, 46, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #908DAC, #DFC0AC, #FCC283, #E7A16E, #CD2E33 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: #908dac; --color-2: #dfc0ac; --color-3: #fcc283; --color-4: #e7a16e; --color-5: #cd2e33. 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