#4360EE + #727DD4 + #A09ABB + #CEB6A0 + #FED387 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#4360EE

Azure · SlateBlue · Navy Blue

HEX

#4360EE

RGB

rgb(67, 96, 238)

HSL

hsl(230, 83%, 60%)

HSB

hsb(230, 72%, 93%)

CMYK

cmyk(72%, 60%, 0%, 7%)

Oklch

oklch(55.4% 0.215 269.2)

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

#727DD4

Azure · MediumSlateBlue · Cobalt Blue

HEX

#727DD4

RGB

rgb(114, 125, 212)

HSL

hsl(233, 53%, 64%)

HSB

hsb(233, 46%, 83%)

CMYK

cmyk(46%, 41%, 0%, 17%)

Oklch

oklch(62.0% 0.131 276.4)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#A09ABB

Wisteria · DarkGray · Cobalt Blue

HEX

#A09ABB

RGB

rgb(160, 154, 187)

HSL

hsl(251, 20%, 67%)

HSB

hsb(251, 18%, 73%)

CMYK

cmyk(14%, 18%, 0%, 27%)

Oklch

oklch(70.2% 0.048 293.5)

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

#CEB6A0

Apricot · Tan · Warm Sun

HEX

#CEB6A0

RGB

rgb(206, 182, 160)

HSL

hsl(29, 32%, 72%)

HSB

hsb(29, 22%, 81%)

CMYK

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

Oklch

oklch(79.1% 0.041 64.7)

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

#FED387

Goose Yellow · Khaki · Peach Orange

HEX

#FED387

RGB

rgb(254, 211, 135)

HSL

hsl(38, 98%, 76%)

HSB

hsb(38, 47%, 100%)

CMYK

cmyk(0%, 17%, 47%, 0%)

Oklch

oklch(88.8% 0.106 81.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4360EE

EED144

Analogous

44B5EE

4360EE

7D44EE

Triadic

4360EE

EE4461

61EE44

Split-Comp.

4360EE

EE7D44

B5EE44

Tetradic

4360EE

EE44B5

EED144

44EE7D

Contrast Matrix WCAG 2.1 Contrast

4360EE	727DD4	A09ABB	CEB6A0	FED387
—	1.4 Fail	1.9 Fail	2.6 Fail	3.6 AA Large
1.4 Fail	—	1.4 Fail	1.9 Fail	2.7 Fail
1.9 Fail	1.4 Fail	—	1.4 Fail	1.9 Fail
2.6 Fail	1.9 Fail	1.4 Fail	—	1.4 Fail
3.6 AA Large	2.7 Fail	1.9 Fail	1.4 Fail	—

White BG

5.1AA

3.8AA Large

2.7Fail

1.9Fail

1.4Fail

Black BG

4.1AA Large

5.6AA

7.8AAA

10.8AAA

14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5050CC

7777BF

9D9DB3

C4C3A5

EBEB99

Deuteranopia

4E4CC3

7675BA

9E9EB1

C5C7A7

EEF19E

Tritanopia

44B1AB

73AEAB

A0ADAB

CDAAAA

FCA8AB

Achromatopsia

686868

848484

A0A0A0

BBBBBB

D7D7D7

Shades & Tints Shades & Tints

#4360EE

Dark

Light

#727DD4

Dark

Light

#A09ABB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4360ee;
  --color-2: #727dd4;
  --color-3: #a09abb;
  --color-4: #ceb6a0;
  --color-5: #fed387;
}

SCSS

$color-1: #4360ee;
$color-2: #727dd4;
$color-3: #a09abb;
$color-4: #ceb6a0;
$color-5: #fed387;

TAILWIND

colors: {
  'brand-1': '#4360ee',
  'brand-2': '#727dd4',
  'brand-3': '#a09abb',
  'brand-4': '#ceb6a0',
  'brand-5': '#fed387',
}

RGB Array

[67, 96, 238], [114, 125, 212], [160, 154, 187], [206, 182, 160], [254, 211, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4360EE, #727DD4, #A09ABB, #CEB6A0, #FED387 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: #4360ee; --color-2: #727dd4; --color-3: #a09abb; --color-4: #ceb6a0; --color-5: #fed387. 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