← Back to Editor

#A987AC · #DB94A1 · #F1A375 · #DEC761 · #C4DC3C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A987AC

Dark Plum · DarkGray · Violet

HEX
#A987AC
RGB
rgb(169, 135, 172)
HSL
hsl(295, 18%, 60%)
HSB
hsb(295, 22%, 67%)
CMYK
cmyk(2%, 22%, 0%, 33%)
Oklch
oklch(66.8% 0.066 323.6)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#DB94A1

Peach Pink · Tan · Coral Red

HEX
#DB94A1
RGB
rgb(219, 148, 161)
HSL
hsl(349, 50%, 72%)
HSB
hsb(349, 32%, 86%)
CMYK
cmyk(0%, 32%, 26%, 14%)
Oklch
oklch(74.0% 0.087 7.4)

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

#F1A375

Apricot · LightSalmon · Warm Sun

HEX
#F1A375
RGB
rgb(241, 163, 117)
HSL
hsl(22, 82%, 70%)
HSB
hsb(22, 51%, 95%)
CMYK
cmyk(0%, 32%, 51%, 5%)
Oklch
oklch(78.2% 0.111 51.0)

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

#DEC761

Ginger · BurlyWood · Sunflower

HEX
#DEC761
RGB
rgb(222, 199, 97)
HSL
hsl(49, 65%, 63%)
HSB
hsb(49, 56%, 87%)
CMYK
cmyk(0%, 10%, 56%, 13%)
Oklch
oklch(82.9% 0.125 96.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C4DC3C

Autumn Sage · GreenYellow · Sunflower

HEX
#C4DC3C
RGB
rgb(196, 220, 60)
HSL
hsl(69, 70%, 55%)
HSB
hsb(69, 73%, 86%)
CMYK
cmyk(11%, 0%, 73%, 14%)
Oklch
oklch(84.9% 0.178 117.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A987AC
8AAB87

Analogous

9687AB
A987AC
AB879C

Triadic

A987AC
ABA887
87ABA8

Split-Comp.

A987AC
9CAB87
87AB96

Tetradic

A987AC
AB9687
8AAB87
879CAB

Contrast Matrix WCAG 2.1 Contrast

A987AC
DB94A1
F1A375
DEC761
C4DC3C
—
1.3
Fail
1.5
Fail
1.8
Fail
2.0
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
1.6
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
2.0
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
White BG
3.1AA Large
2.4Fail
2.1Fail
1.7Fail
1.5Fail
Black BG
6.7AA
8.8AAA
10.2AAA
12.4AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9AA3
BCBC9E
CFCF80
D4D47A
CECF63

Deuteranopia

9C9FA1
C0C69D
D4DA83
D5D780
CDCB6C

Tritanopia

A79C9A
D79B9B
ED898B
DD8D91
C58188

Achromatopsia

959595
ABABAB
B5B5B5
C2C2C2
C3C3C3

Shades & Tints Shades & Tints

#A987AC

Dark
Light

#DB94A1

Dark
Light

#F1A375

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a987ac;
  --color-2: #db94a1;
  --color-3: #f1a375;
  --color-4: #dec761;
  --color-5: #c4dc3c;
}

SCSS

$color-1: #a987ac;
$color-2: #db94a1;
$color-3: #f1a375;
$color-4: #dec761;
$color-5: #c4dc3c;

TAILWIND

colors: {
  'brand-1': '#a987ac',
  'brand-2': '#db94a1',
  'brand-3': '#f1a375',
  'brand-4': '#dec761',
  'brand-5': '#c4dc3c',
}

RGB Array

[169, 135, 172], [219, 148, 161], [241, 163, 117], [222, 199, 97], [196, 220, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A987AC, #DB94A1, #F1A375, #DEC761, #C4DC3C is ideal for: corporate websites, product showcases, portfolios. 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: #a987ac; --color-2: #db94a1; --color-3: #f1a375; --color-4: #dec761; --color-5: #c4dc3c. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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