#F59184 + #D2CCAF + #A1C3BA + #8BADB7 + #8689A5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F59184

Peach Pink · DarkSalmon · Coral Red

HEX

#F59184

RGB

rgb(245, 145, 132)

HSL

hsl(7, 85%, 74%)

HSB

hsb(7, 46%, 96%)

CMYK

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

Oklch

oklch(75.9% 0.123 28.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D2CCAF

Fresh Green · Silver · Sunflower

HEX

#D2CCAF

RGB

rgb(210, 204, 175)

HSL

hsl(50, 28%, 75%)

HSB

hsb(50, 17%, 82%)

CMYK

cmyk(0%, 3%, 17%, 18%)

Oklch

oklch(84.2% 0.040 97.5)

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

#A1C3BA

Jade · Silver · Lake Green

HEX

#A1C3BA

RGB

rgb(161, 195, 186)

HSL

hsl(164, 22%, 70%)

HSB

hsb(164, 17%, 76%)

CMYK

cmyk(17%, 0%, 5%, 24%)

Oklch

oklch(79.0% 0.039 177.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#8BADB7

Sky Blue · DarkGray · Lake Green

HEX

#8BADB7

RGB

rgb(139, 173, 183)

HSL

hsl(194, 23%, 63%)

HSB

hsb(194, 24%, 72%)

CMYK

cmyk(24%, 5%, 0%, 28%)

Oklch

oklch(72.6% 0.040 217.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#8689A5

Azure · LightSlateGray · Navy Blue

HEX

#8689A5

RGB

rgb(134, 137, 165)

HSL

hsl(234, 15%, 59%)

HSB

hsb(234, 19%, 65%)

CMYK

cmyk(19%, 17%, 0%, 35%)

Oklch

oklch(63.7% 0.042 280.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F59184

84E8F5

Analogous

F584B0

F59184

F5CA84

Triadic

F59184

84F591

9184F5

Split-Comp.

F59184

84F5CA

84B0F5

Tetradic

F59184

B0F584

84E8F5

CA84F5

Contrast Matrix WCAG 2.1 Contrast

F59184	D2CCAF	A1C3BA	8BADB7	8689A5
—	1.4 Fail	1.2 Fail	1.1 Fail	1.5 Fail
1.4 Fail	—	1.2 Fail	1.5 Fail	2.1 Fail
1.2 Fail	1.2 Fail	—	1.3 Fail	1.8 Fail
1.1 Fail	1.5 Fail	1.3 Fail	—	1.4 Fail
1.5 Fail	2.1 Fail	1.8 Fail	1.4 Fail	—

White BG

2.3Fail

1.6Fail

1.9Fail

2.4Fail

3.4AA Large

Black BG

9.3AAA

13.0AAA

11.0AAA

8.8AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CAC987

CFCFB6

B0B0BC

9A9AB5

87879E

Deuteranopia

D0D788

D0D0B8

AEABBD

9895B4

87879D

Tritanopia

F08A8A

D2BCBD

A3BEBE

8DB3B2

869998

Achromatopsia

ADADAD

CACACA

B8B8B8

A4A4A4

8B8B8B

Shades & Tints Shades & Tints

#F59184

Dark

Light

#D2CCAF

Dark

Light

#A1C3BA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f59184;
  --color-2: #d2ccaf;
  --color-3: #a1c3ba;
  --color-4: #8badb7;
  --color-5: #8689a5;
}

SCSS

$color-1: #f59184;
$color-2: #d2ccaf;
$color-3: #a1c3ba;
$color-4: #8badb7;
$color-5: #8689a5;

TAILWIND

colors: {
  'brand-1': '#f59184',
  'brand-2': '#d2ccaf',
  'brand-3': '#a1c3ba',
  'brand-4': '#8badb7',
  'brand-5': '#8689a5',
}

RGB Array

[245, 145, 132], [210, 204, 175], [161, 195, 186], [139, 173, 183], [134, 137, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F59184, #D2CCAF, #A1C3BA, #8BADB7, #8689A5 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: #f59184; --color-2: #d2ccaf; --color-3: #a1c3ba; --color-4: #8badb7; --color-5: #8689a5. 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