#536D88 + #CDD0AF + #E9DBB3 + #F98B8C + #FB6D80 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#536D88

Indigo · SlateGray · Navy Blue

HEX

#536D88

RGB

rgb(83, 109, 136)

HSL

hsl(211, 24%, 43%)

HSB

hsb(211, 39%, 53%)

CMYK

cmyk(39%, 20%, 0%, 47%)

Oklch

oklch(52.5% 0.053 249.8)

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

#CDD0AF

Fresh Green · Silver · Sunflower

HEX

#CDD0AF

RGB

rgb(205, 208, 175)

HSL

hsl(65, 26%, 75%)

HSB

hsb(65, 16%, 82%)

CMYK

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

Oklch

oklch(84.7% 0.045 111.6)

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

#E9DBB3

Goose Yellow · Wheat · Lemon Cream

HEX

#E9DBB3

RGB

rgb(233, 219, 179)

HSL

hsl(44, 55%, 81%)

HSB

hsb(44, 23%, 91%)

CMYK

cmyk(0%, 6%, 23%, 9%)

Oklch

oklch(89.3% 0.055 91.0)

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

#F98B8C

Peach Pink · LightCoral · Coral Red

HEX

#F98B8C

RGB

rgb(249, 139, 140)

HSL

hsl(359, 90%, 76%)

HSB

hsb(359, 44%, 98%)

CMYK

cmyk(0%, 44%, 44%, 2%)

Oklch

oklch(75.6% 0.134 20.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FB6D80

Peach Pink · LightCoral · Coral Red

HEX

#FB6D80

RGB

rgb(251, 109, 128)

HSL

hsl(352, 95%, 71%)

HSB

hsb(352, 57%, 98%)

CMYK

cmyk(0%, 57%, 49%, 2%)

Oklch

oklch(71.3% 0.174 14.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

536D88

886F53

Analogous

538788

536D88

545388

Triadic

536D88

88536D

6D8853

Split-Comp.

536D88

885453

878853

Tetradic

536D88

885387

886F53

538854

Contrast Matrix WCAG 2.1 Contrast

536D88	CDD0AF	E9DBB3	F98B8C	FB6D80
—	3.4 AA Large	3.9 AA Large	2.3 Fail	1.9 Fail
3.4 AA Large	—	1.2 Fail	1.5 Fail	1.7 Fail
3.9 AA Large	1.2 Fail	—	1.7 Fail	2.0 Fail
2.3 Fail	1.5 Fail	1.7 Fail	—	1.2 Fail
1.9 Fail	1.7 Fail	2.0 Fail	1.2 Fail	—

White BG

5.4AA

1.6Fail

1.4Fail

2.3Fail

2.8Fail

Black BG

3.9AA Large

13.2AAA

15.2AAA

9.1AAA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E81

CECEB7

E3E3BD

C9C88C

BEBC7B

Deuteranopia

5D5B80

CECEB9

E4E5BF

D0D88C

C6D07A

Tritanopia

547C7B

CDBDBF

E8C4C6

F38C8C

F47877

Achromatopsia

686868

CBCBCB

DBDBDB

ACACAC

9A9A9A

Shades & Tints Shades & Tints

#536D88

Dark

Light

#CDD0AF

Dark

Light

#E9DBB3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #536d88;
  --color-2: #cdd0af;
  --color-3: #e9dbb3;
  --color-4: #f98b8c;
  --color-5: #fb6d80;
}

SCSS

$color-1: #536d88;
$color-2: #cdd0af;
$color-3: #e9dbb3;
$color-4: #f98b8c;
$color-5: #fb6d80;

TAILWIND

colors: {
  'brand-1': '#536d88',
  'brand-2': '#cdd0af',
  'brand-3': '#e9dbb3',
  'brand-4': '#f98b8c',
  'brand-5': '#fb6d80',
}

RGB Array

[83, 109, 136], [205, 208, 175], [233, 219, 179], [249, 139, 140], [251, 109, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #536D88, #CDD0AF, #E9DBB3, #F98B8C, #FB6D80 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: #536d88; --color-2: #cdd0af; --color-3: #e9dbb3; --color-4: #f98b8c; --color-5: #fb6d80. 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