#D4CEAE + #F3C4B0 + #C6AFA7 + #5F88C8 + #5A6986 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D4CEAE

Fresh Green · Silver · Lemon Cream

HEX

#D4CEAE

RGB

rgb(212, 206, 174)

HSL

hsl(51, 31%, 76%)

HSB

hsb(51, 18%, 83%)

CMYK

cmyk(0%, 3%, 18%, 17%)

Oklch

oklch(84.8% 0.043 98.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F3C4B0

Apricot · LightPink · Peach Orange

HEX

#F3C4B0

RGB

rgb(243, 196, 176)

HSL

hsl(18, 74%, 82%)

HSB

hsb(18, 28%, 95%)

CMYK

cmyk(0%, 19%, 28%, 5%)

Oklch

oklch(85.6% 0.061 44.2)

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

#C6AFA7

Apricot · DarkGray · Warm Sun

HEX

#C6AFA7

RGB

rgb(198, 175, 167)

HSL

hsl(15, 21%, 72%)

HSB

hsb(15, 16%, 78%)

CMYK

cmyk(0%, 12%, 16%, 22%)

Oklch

oklch(77.2% 0.029 40.2)

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

#5F88C8

Azure · SteelBlue · Navy Blue

HEX

#5F88C8

RGB

rgb(95, 136, 200)

HSL

hsl(217, 49%, 58%)

HSB

hsb(217, 53%, 78%)

CMYK

cmyk(53%, 32%, 0%, 22%)

Oklch

oklch(62.4% 0.108 259.0)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#5A6986

Indigo · DimGray · Navy Blue

HEX

#5A6986

RGB

rgb(90, 105, 134)

HSL

hsl(220, 20%, 44%)

HSB

hsb(220, 33%, 53%)

CMYK

cmyk(33%, 22%, 0%, 47%)

Oklch

oklch(52.0% 0.050 263.4)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4CEAE

AFB5D5

Analogous

D5BCAF

D4CEAE

C7D5AF

Triadic

D4CEAE

AFD5CF

CFAFD5

Split-Comp.

D4CEAE

AFC7D5

BCAFD5

Tetradic

D4CEAE

AFD5BC

AFB5D5

D5AFC7

Contrast Matrix WCAG 2.1 Contrast

D4CEAE	F3C4B0	C6AFA7	5F88C8	5A6986
—	1.0 Fail	1.3 Fail	2.3 Fail	3.5 AA Large
1.0 Fail	—	1.3 Fail	2.3 Fail	3.5 AA Large
1.3 Fail	1.3 Fail	—	1.7 Fail	2.7 Fail
2.3 Fail	2.3 Fail	1.7 Fail	—	1.5 Fail
3.5 AA Large	3.5 AA Large	2.7 Fail	1.5 Fail	—

White BG

1.6Fail

2.1Fail

3.6AA Large

5.5AA

Black BG

13.2AAA

13.3AAA

10.1AAA

5.8AA

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1B6

DFDEB5

BCBCA9

7171B9

60617F

Deuteranopia

D2D2B8

E1E5B6

BDBFA9

6E6BB5

605F7D

Tritanopia

D4BCBD

F1B9BA

C5AAAB

61ACAA

5B7978

Achromatopsia

CCCCCC

D0D0D0

B5B5B5

838383

686868

Shades & Tints Shades & Tints

#D4CEAE

Dark

Light

#F3C4B0

Dark

Light

#C6AFA7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4ceae;
  --color-2: #f3c4b0;
  --color-3: #c6afa7;
  --color-4: #5f88c8;
  --color-5: #5a6986;
}

SCSS

$color-1: #d4ceae;
$color-2: #f3c4b0;
$color-3: #c6afa7;
$color-4: #5f88c8;
$color-5: #5a6986;

TAILWIND

colors: {
  'brand-1': '#d4ceae',
  'brand-2': '#f3c4b0',
  'brand-3': '#c6afa7',
  'brand-4': '#5f88c8',
  'brand-5': '#5a6986',
}

RGB Array

[212, 206, 174], [243, 196, 176], [198, 175, 167], [95, 136, 200], [90, 105, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4CEAE, #F3C4B0, #C6AFA7, #5F88C8, #5A6986 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: #d4ceae; --color-2: #f3c4b0; --color-3: #c6afa7; --color-4: #5f88c8; --color-5: #5a6986. 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