← Back to Editor

#CFC297 · #BA928C · #A66780 · #5E3656 · #2F2B48

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 LibraryData Visualization

Color Details Color Details

#CFC297

Ginger · Tan · Sunflower

HEX
#CFC297
RGB
rgb(207, 194, 151)
HSL
hsl(46, 37%, 70%)
HSB
hsb(46, 27%, 81%)
CMYK
cmyk(0%, 6%, 27%, 19%)
Oklch
oklch(81.4% 0.059 93.2)

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

#BA928C

Peach Pink · DarkGray · Coral Red

HEX
#BA928C
RGB
rgb(186, 146, 140)
HSL
hsl(8, 25%, 64%)
HSB
hsb(8, 25%, 73%)
CMYK
cmyk(0%, 22%, 25%, 27%)
Oklch
oklch(69.6% 0.049 28.2)

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

#A66780

Dark Violet · Gray · Rose Pink

HEX
#A66780
RGB
rgb(166, 103, 128)
HSL
hsl(336, 26%, 53%)
HSB
hsb(336, 38%, 65%)
CMYK
cmyk(0%, 38%, 23%, 35%)
Oklch
oklch(59.0% 0.087 354.7)

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

#5E3656

Rose Purple · DarkSlateGray · Eggplant

HEX
#5E3656
RGB
rgb(94, 54, 86)
HSL
hsl(312, 27%, 29%)
HSB
hsb(312, 43%, 37%)
CMYK
cmyk(0%, 43%, 9%, 63%)
Oklch
oklch(39.4% 0.074 334.6)

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

#2F2B48

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#2F2B48
RGB
rgb(47, 43, 72)
HSL
hsl(248, 25%, 23%)
HSB
hsb(248, 40%, 28%)
CMYK
cmyk(35%, 40%, 0%, 72%)
Oklch
oklch(30.7% 0.052 289.3)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFC297
96A3CF

Analogous

CFA596
CFC297
C0CF96

Triadic

CFC297
96CFC2
C296CF

Split-Comp.

CFC297
96C0CF
A596CF

Tetradic

CFC297
96CFA5
96A3CF
CF96C0

Contrast Matrix WCAG 2.1 Contrast

CFC297
BA928C
A66780
5E3656
2F2B48
—
1.6
Fail
2.4
Fail
5.5
AA
7.6
AAA
1.6
Fail
—
1.6
Fail
3.5
AA Large
4.9
AA
2.4
Fail
1.6
Fail
—
2.3
Fail
3.1
AA Large
5.5
AA
3.5
AA Large
2.3
Fail
—
1.4
Fail
7.6
AAA
4.9
AA
3.1
AA Large
1.4
Fail
—
White BG
1.8Fail
2.8Fail
4.3AA Large
9.8AAA
13.5AAA
Black BG
11.8AAA
7.6AAA
4.9AA
2.1Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9A1
A9A88D
8B8A7A
4D4C4E
2D2D41

Deuteranopia

CACBA4
ABAE8E
8E9379
4F524C
2E2E3F

Tritanopia

CEAAAB
B88F8F
A37574
5C4847
2F3B3A

Achromatopsia

C1C1C1
9D9D9D
7D7D7D
464646
303030

Shades & Tints Shades & Tints

#CFC297

Dark
Light

#BA928C

Dark
Light

#A66780

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfc297;
  --color-2: #ba928c;
  --color-3: #a66780;
  --color-4: #5e3656;
  --color-5: #2f2b48;
}

SCSS

$color-1: #cfc297;
$color-2: #ba928c;
$color-3: #a66780;
$color-4: #5e3656;
$color-5: #2f2b48;

TAILWIND

colors: {
  'brand-1': '#cfc297',
  'brand-2': '#ba928c',
  'brand-3': '#a66780',
  'brand-4': '#5e3656',
  'brand-5': '#2f2b48',
}

RGB Array

[207, 194, 151], [186, 146, 140], [166, 103, 128], [94, 54, 86], [47, 43, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFC297, #BA928C, #A66780, #5E3656, #2F2B48 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cfc297; --color-2: #ba928c; --color-3: #a66780; --color-4: #5e3656; --color-5: #2f2b48. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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