#766B77 + #BA6886 + #F774AF + #F7A7A0 + #F4D2AB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#766B77

Ink Gray · DimGray · Warm Gray

HEX

#766B77

RGB

rgb(118, 107, 119)

HSL

hsl(295, 5%, 44%)

HSB

hsb(295, 10%, 47%)

CMYK

cmyk(1%, 10%, 0%, 53%)

Oklch

oklch(54.2% 0.023 323.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#BA6886

Dark Violet · LightCoral · Rose Pink

HEX

#BA6886

RGB

rgb(186, 104, 134)

HSL

hsl(338, 37%, 57%)

HSB

hsb(338, 44%, 73%)

CMYK

cmyk(0%, 44%, 28%, 27%)

Oklch

oklch(61.9% 0.110 357.5)

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

#F774AF

Rouge · Orchid · Rose Pink

HEX

#F774AF

RGB

rgb(247, 116, 175)

HSL

hsl(333, 89%, 71%)

HSB

hsb(333, 53%, 97%)

CMYK

cmyk(0%, 53%, 29%, 3%)

Oklch

oklch(73.0% 0.172 353.9)

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

#F7A7A0

Peach Pink · LightPink · Coral Red

HEX

#F7A7A0

RGB

rgb(247, 167, 160)

HSL

hsl(5, 84%, 80%)

HSB

hsb(5, 35%, 97%)

CMYK

cmyk(0%, 32%, 35%, 3%)

Oklch

oklch(80.4% 0.096 24.9)

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

#F4D2AB

Goose Yellow · Wheat · Peach Orange

HEX

#F4D2AB

RGB

rgb(244, 210, 171)

HSL

hsl(32, 77%, 81%)

HSB

hsb(32, 30%, 96%)

CMYK

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

Oklch

oklch(88.3% 0.064 70.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

766B77

6C766B

Analogous

6F6B76

766B77

766B71

Triadic

766B77

76756B

6B7675

Split-Comp.

766B77

71766B

6B766F

Tetradic

766B77

766F6B

6C766B

6B7176

Contrast Matrix WCAG 2.1 Contrast

766B77	BA6886	F774AF	F7A7A0	F4D2AB
—	1.3 Fail	1.9 Fail	2.7 Fail	3.5 AA Large
1.3 Fail	—	1.5 Fail	2.0 Fail	2.7 Fail
1.9 Fail	1.5 Fail	—	1.4 Fail	1.8 Fail
2.7 Fail	2.0 Fail	1.4 Fail	—	1.3 Fail
3.5 AA Large	2.7 Fail	1.8 Fail	1.3 Fail	—

White BG

5.1AA

3.9AA Large

2.6Fail

1.9Fail

1.4Fail

Black BG

4.1AA Large

5.4AA

8.1AAA

11.0AAA

14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

717174

96967F

BEBDA1

D4D4A2

E5E5B4

Deuteranopia

727373

9BA17D

C6D09D

D9DFA2

E7EAB7

Tritanopia

757271

B67978

F09593

F3A3A3

F2BCBE

Achromatopsia

707070

848484

A2A2A2

BEBEBE

D8D8D8

Shades & Tints Shades & Tints

#766B77

Dark

Light

#BA6886

Dark

Light

#F774AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #766b77;
  --color-2: #ba6886;
  --color-3: #f774af;
  --color-4: #f7a7a0;
  --color-5: #f4d2ab;
}

SCSS

$color-1: #766b77;
$color-2: #ba6886;
$color-3: #f774af;
$color-4: #f7a7a0;
$color-5: #f4d2ab;

TAILWIND

colors: {
  'brand-1': '#766b77',
  'brand-2': '#ba6886',
  'brand-3': '#f774af',
  'brand-4': '#f7a7a0',
  'brand-5': '#f4d2ab',
}

RGB Array

[118, 107, 119], [186, 104, 134], [247, 116, 175], [247, 167, 160], [244, 210, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #766B77, #BA6886, #F774AF, #F7A7A0, #F4D2AB 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: #766b77; --color-2: #ba6886; --color-3: #f774af; --color-4: #f7a7a0; --color-5: #f4d2ab. 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