#4981B2 + #4AB5AD + #F5EACE + #E0CABC + #FF869E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#4981B2

Slate Blue · SteelBlue · Navy Blue

HEX

#4981B2

RGB

rgb(73, 129, 178)

HSL

hsl(208, 42%, 49%)

HSB

hsb(208, 59%, 70%)

CMYK

cmyk(59%, 28%, 0%, 30%)

Oklch

oklch(58.6% 0.096 246.7)

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

#4AB5AD

Mineral Blue · CadetBlue · Mint Ice

HEX

#4AB5AD

RGB

rgb(74, 181, 173)

HSL

hsl(176, 42%, 50%)

HSB

hsb(176, 59%, 71%)

CMYK

cmyk(59%, 0%, 4%, 29%)

Oklch

oklch(70.9% 0.098 188.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#F5EACE

Goose Yellow · Bisque · Lemon Cream

HEX

#F5EACE

RGB

rgb(245, 234, 206)

HSL

hsl(43, 66%, 88%)

HSB

hsb(43, 16%, 96%)

CMYK

cmyk(0%, 4%, 16%, 4%)

Oklch

oklch(93.8% 0.039 89.1)

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

#E0CABC

Apricot · LightGray · Peach Orange

HEX

#E0CABC

RGB

rgb(224, 202, 188)

HSL

hsl(23, 37%, 81%)

HSB

hsb(23, 16%, 88%)

CMYK

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

Oklch

oklch(85.3% 0.031 54.6)

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

#FF869E

Peach Pink · LightCoral · Coral Red

HEX

#FF869E

RGB

rgb(255, 134, 158)

HSL

hsl(348, 100%, 76%)

HSB

hsb(348, 47%, 100%)

CMYK

cmyk(0%, 47%, 38%, 0%)

Oklch

oklch(76.0% 0.148 8.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4981B2

B17948

Analogous

48B1AE

4981B2

484CB1

Triadic

4981B2

B14880

80B148

Split-Comp.

4981B2

B1484C

B1AE48

Tetradic

4981B2

AE48B1

B17948

4CB148

Contrast Matrix WCAG 2.1 Contrast

4981B2	4AB5AD	F5EACE	E0CABC	FF869E
—	1.7 Fail	3.5 AA Large	2.6 Fail	1.8 Fail
1.7 Fail	—	2.1 Fail	1.6 Fail	1.1 Fail
3.5 AA Large	2.1 Fail	—	1.3 Fail	1.9 Fail
2.6 Fail	1.6 Fail	1.3 Fail	—	1.5 Fail
1.8 Fail	1.1 Fail	1.9 Fail	1.5 Fail	—

White BG

4.1AA Large

2.5Fail

1.2Fail

1.6Fail

2.3Fail

Black BG

5.1AA

8.5AAA

17.5AAA

13.3AAA

9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6162A6

7879AF

F0F0D5

D6D6BF

CBCA98

Deuteranopia

5E5AA3

726AAF

F1F2D6

D8D9C0

D2DB97

Tritanopia

4C9D9B

4FB0B1

F4DADB

DFC2C3

F99493

Achromatopsia

767676

949494

EAEAEA

CFCFCF

ADADAD

Shades & Tints Shades & Tints

#4981B2

Dark

Light

#4AB5AD

Dark

Light

#F5EACE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4981b2;
  --color-2: #4ab5ad;
  --color-3: #f5eace;
  --color-4: #e0cabc;
  --color-5: #ff869e;
}

SCSS

$color-1: #4981b2;
$color-2: #4ab5ad;
$color-3: #f5eace;
$color-4: #e0cabc;
$color-5: #ff869e;

TAILWIND

colors: {
  'brand-1': '#4981b2',
  'brand-2': '#4ab5ad',
  'brand-3': '#f5eace',
  'brand-4': '#e0cabc',
  'brand-5': '#ff869e',
}

RGB Array

[73, 129, 178], [74, 181, 173], [245, 234, 206], [224, 202, 188], [255, 134, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4981B2, #4AB5AD, #F5EACE, #E0CABC, #FF869E 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: #4981b2; --color-2: #4ab5ad; --color-3: #f5eace; --color-4: #e0cabc; --color-5: #ff869e. 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