#FD485B + #BA6A77 + #B192A1 + #ABB6F6 + #D6F0EE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FD485B

Peach Pink · Tomato · Coral Red

HEX

#FD485B

RGB

rgb(253, 72, 91)

HSL

hsl(354, 98%, 64%)

HSB

hsb(354, 72%, 99%)

CMYK

cmyk(0%, 72%, 64%, 1%)

Oklch

oklch(66.7% 0.216 19.7)

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

#BA6A77

Crimson · LightCoral · Passion Red

HEX

#BA6A77

RGB

rgb(186, 106, 119)

HSL

hsl(350, 37%, 57%)

HSB

hsb(350, 43%, 73%)

CMYK

cmyk(0%, 43%, 36%, 27%)

Oklch

oklch(61.7% 0.103 10.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#B192A1

Rouge · DarkGray · Rose Pink

HEX

#B192A1

RGB

rgb(177, 146, 161)

HSL

hsl(331, 17%, 63%)

HSB

hsb(331, 18%, 69%)

CMYK

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

Oklch

oklch(69.3% 0.042 347.5)

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

#ABB6F6

Azure · LightSteelBlue · Sky Blue

HEX

#ABB6F6

RGB

rgb(171, 182, 246)

HSL

hsl(231, 81%, 82%)

HSB

hsb(231, 30%, 96%)

CMYK

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

Oklch

oklch(79.1% 0.092 276.6)

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

#D6F0EE

Jade · Lavender · Glacier Blue

HEX

#D6F0EE

RGB

rgb(214, 240, 238)

HSL

hsl(175, 46%, 89%)

HSB

hsb(175, 11%, 94%)

CMYK

cmyk(11%, 0%, 1%, 6%)

Oklch

oklch(93.6% 0.027 191.1)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD485B

49FDEB

Analogous

FD49B5

FD485B

FD9149

Triadic

FD485B

5BFD49

495BFD

Split-Comp.

FD485B

49FD91

49B5FD

Tetradic

FD485B

B5FD49

49FDEB

9149FD

Contrast Matrix WCAG 2.1 Contrast

FD485B	BA6A77	B192A1	ABB6F6	D6F0EE
—	1.2 Fail	1.2 Fail	1.7 Fail	2.8 Fail
1.2 Fail	—	1.4 Fail	2.0 Fail	3.2 AA Large
1.2 Fail	1.4 Fail	—	1.4 Fail	2.3 Fail
1.7 Fail	2.0 Fail	1.4 Fail	—	1.6 Fail
2.8 Fail	3.2 AA Large	2.3 Fail	1.6 Fail	—

White BG

3.4AA Large

3.9AA Large

2.8Fail

2.0Fail

1.2Fail

Black BG

6.3AA

5.4AA

7.5AAA

10.8AAA

17.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAD56

979774

A4A39D

B0B0E7

E1E1EE

Deuteranopia

B9C755

9CA273

A5A89D

AFAEE3

E0DEEF

Tritanopia

F45352

B67171

AF9B9A

ACDAD8

D7EFEF

Achromatopsia

808080

838383

9D9D9D

BABABA

E8E8E8

Shades & Tints Shades & Tints

#FD485B

Dark

Light

#BA6A77

Dark

Light

#B192A1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd485b;
  --color-2: #ba6a77;
  --color-3: #b192a1;
  --color-4: #abb6f6;
  --color-5: #d6f0ee;
}

SCSS

$color-1: #fd485b;
$color-2: #ba6a77;
$color-3: #b192a1;
$color-4: #abb6f6;
$color-5: #d6f0ee;

TAILWIND

colors: {
  'brand-1': '#fd485b',
  'brand-2': '#ba6a77',
  'brand-3': '#b192a1',
  'brand-4': '#abb6f6',
  'brand-5': '#d6f0ee',
}

RGB Array

[253, 72, 91], [186, 106, 119], [177, 146, 161], [171, 182, 246], [214, 240, 238]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD485B, #BA6A77, #B192A1, #ABB6F6, #D6F0EE 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: #fd485b; --color-2: #ba6a77; --color-3: #b192a1; --color-4: #abb6f6; --color-5: #d6f0ee. 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