#767C85 + #A680A0 + #D683AB + #FF8C8C + #FF9D7D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#767C85

Ink Gray · Gray · Warm Gray

HEX

#767C85

RGB

rgb(118, 124, 133)

HSL

hsl(216, 6%, 49%)

HSB

hsb(216, 11%, 52%)

CMYK

cmyk(11%, 7%, 0%, 48%)

Oklch

oklch(58.4% 0.016 258.4)

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

#A680A0

Rose Purple · DarkGray · Violet

HEX

#A680A0

RGB

rgb(166, 128, 160)

HSL

hsl(309, 18%, 58%)

HSB

hsb(309, 23%, 65%)

CMYK

cmyk(0%, 23%, 4%, 35%)

Oklch

oklch(64.7% 0.065 331.8)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#D683AB

Rouge · Orchid · Rose Pink

HEX

#D683AB

RGB

rgb(214, 131, 171)

HSL

hsl(331, 50%, 68%)

HSB

hsb(331, 39%, 84%)

CMYK

cmyk(0%, 39%, 20%, 16%)

Oklch

oklch(70.9% 0.113 350.0)

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

#FF8C8C

Peach Pink · LightCoral · Coral Red

HEX

#FF8C8C

RGB

rgb(255, 140, 140)

HSL

hsl(0, 100%, 77%)

HSB

hsb(0, 45%, 100%)

CMYK

cmyk(0%, 45%, 45%, 0%)

Oklch

oklch(76.5% 0.140 20.8)

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

#FF9D7D

Apricot · LightSalmon · Warm Sun

HEX

#FF9D7D

RGB

rgb(255, 157, 125)

HSL

hsl(15, 100%, 75%)

HSB

hsb(15, 51%, 100%)

CMYK

cmyk(0%, 38%, 51%, 0%)

Oklch

oklch(78.9% 0.126 38.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

767C85

847E75

Analogous

758384

767C85

777584

Triadic

767C85

84757B

7B8475

Split-Comp.

767C85

847775

838475

Tetradic

767C85

847583

847E75

758477

Contrast Matrix WCAG 2.1 Contrast

767C85	A680A0	D683AB	FF8C8C	FF9D7D
—	1.2 Fail	1.5 Fail	1.9 Fail	2.1 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.7 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.9 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.1 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

4.2AA Large

3.4AA Large

2.7Fail

2.2Fail

2.0Fail

Black BG

5.0AA

6.2AA

7.7AAA

9.4AAA

10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797983

969598

B2B1A1

CDCC8C

D5D485

Deuteranopia

787882

989B96

B7BD9F

D4DD8C

DAE287

Tritanopia

768181

A49291

D29A98

F98C8C

FA8B8C

Achromatopsia

7B7B7B

8F8F8F

A0A0A0

AEAEAE

B7B7B7

Shades & Tints Shades & Tints

#767C85

Dark

Light

#A680A0

Dark

Light

#D683AB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #767c85;
  --color-2: #a680a0;
  --color-3: #d683ab;
  --color-4: #ff8c8c;
  --color-5: #ff9d7d;
}

SCSS

$color-1: #767c85;
$color-2: #a680a0;
$color-3: #d683ab;
$color-4: #ff8c8c;
$color-5: #ff9d7d;

TAILWIND

colors: {
  'brand-1': '#767c85',
  'brand-2': '#a680a0',
  'brand-3': '#d683ab',
  'brand-4': '#ff8c8c',
  'brand-5': '#ff9d7d',
}

RGB Array

[118, 124, 133], [166, 128, 160], [214, 131, 171], [255, 140, 140], [255, 157, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #767C85, #A680A0, #D683AB, #FF8C8C, #FF9D7D 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: #767c85; --color-2: #a680a0; --color-3: #d683ab; --color-4: #ff8c8c; --color-5: #ff9d7d. 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