#566A7C + #B8D2CF + #CFC39D + #DF9C90 + #DA7693 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#566A7C

Slate Blue · DimGray · Navy Blue

HEX

#566A7C

RGB

rgb(86, 106, 124)

HSL

hsl(208, 18%, 41%)

HSB

hsb(208, 31%, 49%)

CMYK

cmyk(31%, 15%, 0%, 51%)

Oklch

oklch(51.5% 0.037 245.8)

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

#B8D2CF

Jade · LightSteelBlue · Glacier Blue

HEX

#B8D2CF

RGB

rgb(184, 210, 207)

HSL

hsl(173, 22%, 77%)

HSB

hsb(173, 12%, 82%)

CMYK

cmyk(12%, 0%, 1%, 18%)

Oklch

oklch(84.4% 0.028 188.2)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#CFC39D

Goose Yellow · Tan · Sunflower

HEX

#CFC39D

RGB

rgb(207, 195, 157)

HSL

hsl(46, 34%, 71%)

HSB

hsb(46, 24%, 81%)

CMYK

cmyk(0%, 6%, 24%, 19%)

Oklch

oklch(81.7% 0.053 92.6)

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

#DF9C90

Peach Pink · DarkSalmon · Coral Red

HEX

#DF9C90

RGB

rgb(223, 156, 144)

HSL

hsl(9, 55%, 72%)

HSB

hsb(9, 35%, 87%)

CMYK

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

Oklch

oklch(75.5% 0.083 30.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DA7693

Rouge · LightCoral · Rose Pink

HEX

#DA7693

RGB

rgb(218, 118, 147)

HSL

hsl(343, 57%, 66%)

HSB

hsb(343, 46%, 85%)

CMYK

cmyk(0%, 46%, 33%, 15%)

Oklch

oklch(68.6% 0.128 2.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

566A7C

7B6756

Analogous

567B7A

566A7C

56577B

Triadic

566A7C

7B566A

6A7B56

Split-Comp.

566A7C

7B5657

7B7A56

Tetradic

566A7C

7A567B

7B6756

577B56

Contrast Matrix WCAG 2.1 Contrast

566A7C	B8D2CF	CFC39D	DF9C90	DA7693
—	3.5 AA Large	3.2 AA Large	2.5 Fail	1.9 Fail
3.5 AA Large	—	1.1 Fail	1.4 Fail	1.9 Fail
3.2 AA Large	1.1 Fail	—	1.3 Fail	1.7 Fail
2.5 Fail	1.4 Fail	1.3 Fail	—	1.3 Fail
1.9 Fail	1.9 Fail	1.7 Fail	1.3 Fail	—

White BG

5.6AA

1.6Fail

1.8Fail

2.3Fail

3.0AA Large

Black BG

3.7AA Large

13.2AAA

11.9AAA

9.3AAA

7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F78

C3C3D0

CACAA6

C2C193

AFAE8C

Deuteranopia

5E5C77

C2C0D0

CBCBA8

C6CB94

B5BC8A

Tritanopia

577473

B9D0D0

CEADAF

DC9596

D58685

Achromatopsia

666666

CACACA

C2C2C2

AFAFAF

979797

Shades & Tints Shades & Tints

#566A7C

Dark

Light

#B8D2CF

Dark

Light

#CFC39D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #566a7c;
  --color-2: #b8d2cf;
  --color-3: #cfc39d;
  --color-4: #df9c90;
  --color-5: #da7693;
}

SCSS

$color-1: #566a7c;
$color-2: #b8d2cf;
$color-3: #cfc39d;
$color-4: #df9c90;
$color-5: #da7693;

TAILWIND

colors: {
  'brand-1': '#566a7c',
  'brand-2': '#b8d2cf',
  'brand-3': '#cfc39d',
  'brand-4': '#df9c90',
  'brand-5': '#da7693',
}

RGB Array

[86, 106, 124], [184, 210, 207], [207, 195, 157], [223, 156, 144], [218, 118, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #566A7C, #B8D2CF, #CFC39D, #DF9C90, #DA7693 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: #566a7c; --color-2: #b8d2cf; --color-3: #cfc39d; --color-4: #df9c90; --color-5: #da7693. 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 warm-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