← Back to Editor

#AC897D · #A3BFB6 · #C6C478 · #DFB871 · #F37096

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AC897D

Tangerine · Gray · Warm Sun

HEX
#AC897D
RGB
rgb(172, 137, 125)
HSL
hsl(15, 22%, 58%)
HSB
hsb(15, 27%, 67%)
CMYK
cmyk(0%, 20%, 27%, 33%)
Oklch
oklch(66.0% 0.046 39.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#A3BFB6

Jade · DarkGray · Lake Green

HEX
#A3BFB6
RGB
rgb(163, 191, 182)
HSL
hsl(161, 18%, 69%)
HSB
hsb(161, 15%, 75%)
CMYK
cmyk(15%, 0%, 5%, 25%)
Oklch
oklch(78.1% 0.033 174.0)

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

#C6C478

Fresh Green · Tan · Sunflower

HEX
#C6C478
RGB
rgb(198, 196, 120)
HSL
hsl(58, 41%, 62%)
HSB
hsb(58, 39%, 78%)
CMYK
cmyk(0%, 1%, 39%, 22%)
Oklch
oklch(80.5% 0.098 107.1)

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

#DFB871

Ginger · BurlyWood · Warm Sun

HEX
#DFB871
RGB
rgb(223, 184, 113)
HSL
hsl(39, 63%, 66%)
HSB
hsb(39, 49%, 87%)
CMYK
cmyk(0%, 17%, 49%, 13%)
Oklch
oklch(80.2% 0.100 81.5)

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

#F37096

Rouge · LightCoral · Rose Pink

HEX
#F37096
RGB
rgb(243, 112, 150)
HSL
hsl(343, 85%, 70%)
HSB
hsb(343, 54%, 95%)
CMYK
cmyk(0%, 54%, 38%, 5%)
Oklch
oklch(71.1% 0.164 4.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AC897D
7CA0AB

Analogous

AB7C88
AC897D
ABA07C

Triadic

AC897D
7CAB88
887CAB

Split-Comp.

AC897D
7CABA0
7C88AB

Tetradic

AC897D
88AB7C
7CA0AB
A07CAB

Contrast Matrix WCAG 2.1 Contrast

AC897D
A3BFB6
C6C478
DFB871
F37096
—
1.6
Fail
1.7
Fail
1.7
Fail
1.1
Fail
1.6
Fail
—
1.1
Fail
1.1
Fail
1.4
Fail
1.7
Fail
1.1
Fail
—
1.0
Fail
1.5
Fail
1.7
Fail
1.1
Fail
1.0
Fail
—
1.5
Fail
1.1
Fail
1.4
Fail
1.5
Fail
1.5
Fail
—
White BG
3.2AA Large
2.0Fail
1.8Fail
1.9Fail
2.8Fail
Black BG
6.6AA
10.7AAA
11.6AAA
11.2AAA
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9D80
AFAFB8
C5C58A
CECE82
BAB98D

Deuteranopia

9FA281
AEABB9
C5C58F
D0D386
C2CC8B

Tritanopia

AA8283
A4BABA
C6999C
DD9093
EC8684

Achromatopsia

929292
B6B6B6
BCBCBC
BCBCBC
9C9C9C

Shades & Tints Shades & Tints

#AC897D

Dark
Light

#A3BFB6

Dark
Light

#C6C478

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ac897d;
  --color-2: #a3bfb6;
  --color-3: #c6c478;
  --color-4: #dfb871;
  --color-5: #f37096;
}

SCSS

$color-1: #ac897d;
$color-2: #a3bfb6;
$color-3: #c6c478;
$color-4: #dfb871;
$color-5: #f37096;

TAILWIND

colors: {
  'brand-1': '#ac897d',
  'brand-2': '#a3bfb6',
  'brand-3': '#c6c478',
  'brand-4': '#dfb871',
  'brand-5': '#f37096',
}

RGB Array

[172, 137, 125], [163, 191, 182], [198, 196, 120], [223, 184, 113], [243, 112, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AC897D, #A3BFB6, #C6C478, #DFB871, #F37096 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: #ac897d; --color-2: #a3bfb6; --color-3: #c6c478; --color-4: #dfb871; --color-5: #f37096. 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