#5397B2 + #72B2C1 + #D0AAA5 + #F6CDAB + #FCDAB2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5397B2

Slate Blue · CadetBlue · Lake Green

HEX

#5397B2

RGB

rgb(83, 151, 178)

HSL

hsl(197, 38%, 51%)

HSB

hsb(197, 53%, 70%)

CMYK

cmyk(53%, 15%, 0%, 30%)

Oklch

oklch(64.2% 0.080 226.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#72B2C1

Slate Blue · MediumAquaMarine · Lake Green

HEX

#72B2C1

RGB

rgb(114, 178, 193)

HSL

hsl(191, 39%, 60%)

HSB

hsb(191, 41%, 76%)

CMYK

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

Oklch

oklch(72.6% 0.069 214.2)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#D0AAA5

Peach Pink · Tan · Coral Red

HEX

#D0AAA5

RGB

rgb(208, 170, 165)

HSL

hsl(7, 31%, 73%)

HSB

hsb(7, 21%, 82%)

CMYK

cmyk(0%, 18%, 21%, 18%)

Oklch

oklch(77.1% 0.045 26.9)

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

#F6CDAB

Apricot · Wheat · Peach Orange

HEX

#F6CDAB

RGB

rgb(246, 205, 171)

HSL

hsl(27, 81%, 82%)

HSB

hsb(27, 30%, 96%)

CMYK

cmyk(0%, 17%, 30%, 4%)

Oklch

oklch(87.5% 0.065 61.5)

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

#FCDAB2

Goose Yellow · Wheat · Peach Orange

HEX

#FCDAB2

RGB

rgb(252, 218, 178)

HSL

hsl(32, 93%, 84%)

HSB

hsb(32, 29%, 99%)

CMYK

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

Oklch

oklch(90.7% 0.065 71.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5397B2

B26D53

Analogous

53B29D

5397B2

5367B2

Triadic

5397B2

B25397

97B253

Split-Comp.

5397B2

B25367

B29D53

Tetradic

5397B2

9D53B2

B26D53

67B253

Contrast Matrix WCAG 2.1 Contrast

5397B2	72B2C1	D0AAA5	F6CDAB	FCDAB2
—	1.4 Fail	1.5 Fail	2.2 Fail	2.5 Fail
1.4 Fail	—	1.1 Fail	1.6 Fail	1.8 Fail
1.5 Fail	1.1 Fail	—	1.4 Fail	1.6 Fail
2.2 Fail	1.6 Fail	1.4 Fail	—	1.1 Fail
2.5 Fail	1.8 Fail	1.6 Fail	1.1 Fail	—

White BG

3.3AA Large

2.4Fail

2.1Fail

1.5Fail

1.3Fail

Black BG

6.4AA

8.9AAA

10.0AAA

14.2AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7071AB

8E8EBD

C0BFA6

E4E4B3

EDEDBC

Deuteranopia

6D67AA

8A85BD

C2C5A7

E7EAB5

EFF2BE

Tritanopia

56A6A5

75BBBA

CEA7A7

F4BABB

FAC3C5

Achromatopsia

868686

A1A1A1

B5B5B5

D5D5D5

E0E0E0

Shades & Tints Shades & Tints

#5397B2

Dark

Light

#72B2C1

Dark

Light

#D0AAA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5397b2;
  --color-2: #72b2c1;
  --color-3: #d0aaa5;
  --color-4: #f6cdab;
  --color-5: #fcdab2;
}

SCSS

$color-1: #5397b2;
$color-2: #72b2c1;
$color-3: #d0aaa5;
$color-4: #f6cdab;
$color-5: #fcdab2;

TAILWIND

colors: {
  'brand-1': '#5397b2',
  'brand-2': '#72b2c1',
  'brand-3': '#d0aaa5',
  'brand-4': '#f6cdab',
  'brand-5': '#fcdab2',
}

RGB Array

[83, 151, 178], [114, 178, 193], [208, 170, 165], [246, 205, 171], [252, 218, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5397B2, #72B2C1, #D0AAA5, #F6CDAB, #FCDAB2 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: #5397b2; --color-2: #72b2c1; --color-3: #d0aaa5; --color-4: #f6cdab; --color-5: #fcdab2. 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