#648F89 + #AB6A7C + #F4FFBB + #F0C690 + #E8947D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#648F89

Mineral Blue · SlateGray · Mint Ice

HEX

#648F89

RGB

rgb(100, 143, 137)

HSL

hsl(172, 18%, 48%)

HSB

hsb(172, 30%, 56%)

CMYK

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

Oklch

oklch(61.7% 0.048 185.2)

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

#AB6A7C

Dark Violet · Gray · Rose Pink

HEX

#AB6A7C

RGB

rgb(171, 106, 124)

HSL

hsl(343, 28%, 54%)

HSB

hsb(343, 38%, 67%)

CMYK

cmyk(0%, 38%, 27%, 33%)

Oklch

oklch(60.0% 0.086 2.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F4FFBB

Willow Green · Bisque · Mint Green

HEX

#F4FFBB

RGB

rgb(244, 255, 187)

HSL

hsl(70, 100%, 87%)

HSB

hsb(70, 27%, 100%)

CMYK

cmyk(4%, 0%, 27%, 0%)

Oklch

oklch(97.6% 0.088 115.5)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#F0C690

Goose Yellow · BurlyWood · Warm Sun

HEX

#F0C690

RGB

rgb(240, 198, 144)

HSL

hsl(34, 76%, 75%)

HSB

hsb(34, 40%, 94%)

CMYK

cmyk(0%, 17%, 40%, 6%)

Oklch

oklch(85.1% 0.085 73.3)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#E8947D

Peach Pink · DarkSalmon · Coral Red

HEX

#E8947D

RGB

rgb(232, 148, 125)

HSL

hsl(13, 70%, 70%)

HSB

hsb(13, 46%, 91%)

CMYK

cmyk(0%, 36%, 46%, 9%)

Oklch

oklch(74.7% 0.107 36.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

648F89

90646A

Analogous

649075

648F89

648090

Triadic

648F89

8B6490

908B64

Split-Comp.

648F89

906480

907564

Tetradic

648F89

756490

90646A

809064

Contrast Matrix WCAG 2.1 Contrast

648F89	AB6A7C	F4FFBB	F0C690	E8947D
—	1.1 Fail	3.4 AA Large	2.3 Fail	1.5 Fail
1.1 Fail	—	3.9 AA Large	2.6 Fail	1.8 Fail
3.4 AA Large	3.9 AA Large	—	1.5 Fail	2.2 Fail
2.3 Fail	2.6 Fail	1.5 Fail	—	1.5 Fail
1.5 Fail	1.8 Fail	2.2 Fail	1.5 Fail	—

White BG

3.6AA Large

4.1AA Large

1.1Fail

1.6Fail

2.3Fail

Black BG

5.8AA

5.1AA

19.9AAA

13.2AAA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

77778A

8F8E78

F9F9CB

DEDD9D

C4C383

Deuteranopia

74718B

939877

F8F7CF

E0E3A0

C9CF84

Tritanopia

668C8C

A87473

F5D8DB

EEA7AA

E48788

Achromatopsia

818181

7F7F7F

F4F4F4

CCCCCC

AAAAAA

Shades & Tints Shades & Tints

#648F89

Dark

Light

#AB6A7C

Dark

Light

#F4FFBB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #648f89;
  --color-2: #ab6a7c;
  --color-3: #f4ffbb;
  --color-4: #f0c690;
  --color-5: #e8947d;
}

SCSS

$color-1: #648f89;
$color-2: #ab6a7c;
$color-3: #f4ffbb;
$color-4: #f0c690;
$color-5: #e8947d;

TAILWIND

colors: {
  'brand-1': '#648f89',
  'brand-2': '#ab6a7c',
  'brand-3': '#f4ffbb',
  'brand-4': '#f0c690',
  'brand-5': '#e8947d',
}

RGB Array

[100, 143, 137], [171, 106, 124], [244, 255, 187], [240, 198, 144], [232, 148, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #648F89, #AB6A7C, #F4FFBB, #F0C690, #E8947D 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: #648f89; --color-2: #ab6a7c; --color-3: #f4ffbb; --color-4: #f0c690; --color-5: #e8947d. 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