#2F8FBA + #94A9C2 + #D0B0B9 + #E7BCBD + #EED1C7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#2F8FBA

Lake Blue · SteelBlue · Mint Ice

HEX

#2F8FBA

RGB

rgb(47, 143, 186)

HSL

hsl(199, 60%, 46%)

HSB

hsb(199, 75%, 73%)

CMYK

cmyk(75%, 23%, 0%, 27%)

Oklch

oklch(61.4% 0.108 232.1)

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

#94A9C2

Azure · DarkGray · Cobalt Blue

HEX

#94A9C2

RGB

rgb(148, 169, 194)

HSL

hsl(213, 27%, 67%)

HSB

hsb(213, 24%, 76%)

CMYK

cmyk(24%, 13%, 0%, 24%)

Oklch

oklch(72.7% 0.043 252.9)

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

#D0B0B9

Rouge · Silver · Rose Pink

HEX

#D0B0B9

RGB

rgb(208, 176, 185)

HSL

hsl(343, 25%, 75%)

HSB

hsb(343, 15%, 82%)

CMYK

cmyk(0%, 15%, 11%, 18%)

Oklch

oklch(78.8% 0.039 359.2)

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

#E7BCBD

Peach Pink · LightPink · Cherry Blossom

HEX

#E7BCBD

RGB

rgb(231, 188, 189)

HSL

hsl(359, 47%, 82%)

HSB

hsb(359, 19%, 91%)

CMYK

cmyk(0%, 19%, 18%, 9%)

Oklch

oklch(83.3% 0.050 16.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#EED1C7

Apricot · Pink · Peach Orange

HEX

#EED1C7

RGB

rgb(238, 209, 199)

HSL

hsl(15, 53%, 86%)

HSB

hsb(15, 16%, 93%)

CMYK

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

Oklch

oklch(88.2% 0.035 40.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F8FBA

BC5B2F

Analogous

2FBCA2

2F8FBA

2F49BC

Triadic

2F8FBA

BC2F8F

8FBC2F

Split-Comp.

2F8FBA

BC2F49

BCA22F

Tetradic

2F8FBA

A22FBC

BC5B2F

49BC2F

Contrast Matrix WCAG 2.1 Contrast

2F8FBA	94A9C2	D0B0B9	E7BCBD	EED1C7
—	1.5 Fail	1.8 Fail	2.1 Fail	2.5 Fail
1.5 Fail	—	1.2 Fail	1.4 Fail	1.7 Fail
1.8 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
2.1 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
2.5 Fail	1.7 Fail	1.4 Fail	1.2 Fail	—

White BG

3.6AA Large

2.4Fail

2.0Fail

1.7Fail

1.4Fail

Black BG

5.8AA

8.7AAA

10.6AAA

12.3AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5959B0

9D9DBC

C2C2B7

D4D4BD

E1E1C9

Deuteranopia

534CAD

9C9ABA

C4C6B6

D7DABD

E3E5CA

Tritanopia

34A7A6

95B7B6

CEB5B5

E5BDBD

EDCBCC

Achromatopsia

777777

A6A6A6

BBBBBB

C9C9C9

D9D9D9

Shades & Tints Shades & Tints

#2F8FBA

Dark

Light

#94A9C2

Dark

Light

#D0B0B9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f8fba;
  --color-2: #94a9c2;
  --color-3: #d0b0b9;
  --color-4: #e7bcbd;
  --color-5: #eed1c7;
}

SCSS

$color-1: #2f8fba;
$color-2: #94a9c2;
$color-3: #d0b0b9;
$color-4: #e7bcbd;
$color-5: #eed1c7;

TAILWIND

colors: {
  'brand-1': '#2f8fba',
  'brand-2': '#94a9c2',
  'brand-3': '#d0b0b9',
  'brand-4': '#e7bcbd',
  'brand-5': '#eed1c7',
}

RGB Array

[47, 143, 186], [148, 169, 194], [208, 176, 185], [231, 188, 189], [238, 209, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F8FBA, #94A9C2, #D0B0B9, #E7BCBD, #EED1C7 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: #2f8fba; --color-2: #94a9c2; --color-3: #d0b0b9; --color-4: #e7bcbd; --color-5: #eed1c7. 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