← Back to Editor

#FFAF99 · #CC7A88 · #7D4A71 · #492F59 · #0C0A24

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

#FFAF99

Peach Pink · LightSalmon · Coral Red

HEX
#FFAF99
RGB
rgb(255, 175, 153)
HSL
hsl(13, 100%, 80%)
HSB
hsb(13, 40%, 100%)
CMYK
cmyk(0%, 31%, 40%, 0%)
Oklch
oklch(82.6% 0.099 36.0)

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

#CC7A88

Peach Pink · LightCoral · Coral Red

HEX
#CC7A88
RGB
rgb(204, 122, 136)
HSL
hsl(350, 45%, 64%)
HSB
hsb(350, 40%, 80%)
CMYK
cmyk(0%, 40%, 33%, 20%)
Oklch
oklch(67.1% 0.103 9.2)

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

#7D4A71

Rose Purple · DimGray · Eggplant

HEX
#7D4A71
RGB
rgb(125, 74, 113)
HSL
hsl(314, 26%, 39%)
HSB
hsb(314, 41%, 49%)
CMYK
cmyk(0%, 41%, 10%, 51%)
Oklch
oklch(48.2% 0.088 336.1)

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

#492F59

Dark Plum · DarkSlateGray · Eggplant

HEX
#492F59
RGB
rgb(73, 47, 89)
HSL
hsl(277, 31%, 27%)
HSB
hsb(277, 47%, 35%)
CMYK
cmyk(18%, 47%, 0%, 65%)
Oklch
oklch(35.5% 0.077 311.5)

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

#0C0A24

Deep Indigo · Black · Deep Sea Blue

HEX
#0C0A24
RGB
rgb(12, 10, 36)
HSL
hsl(245, 57%, 9%)
HSB
hsb(245, 72%, 14%)
CMYK
cmyk(67%, 72%, 0%, 86%)
Oklch
oklch(16.6% 0.052 282.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFAF99
99E9FF

Analogous

FF99B6
FFAF99
FFE299

Triadic

FFAF99
99FFAF
AF99FF

Split-Comp.

FFAF99
99FFE2
99B6FF

Tetradic

FFAF99
B6FF99
99E9FF
E299FF

Contrast Matrix WCAG 2.1 Contrast

FFAF99
CC7A88
7D4A71
492F59
0C0A24
—
1.8
Fail
3.8
AA Large
6.5
AA
10.9
AAA
1.8
Fail
—
2.2
Fail
3.7
AA Large
6.2
AA
3.8
AA Large
2.2
Fail
—
1.7
Fail
2.8
Fail
6.5
AA
3.7
AA Large
1.7
Fail
—
1.7
Fail
10.9
AAA
6.2
AA
2.8
Fail
1.7
Fail
—
White BG
1.8Fail
3.1AA Large
6.8AA
11.4AAA
19.4AAA
Black BG
11.8AAA
6.7AA
3.1AA Large
1.8Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDC9E
A8A885
676668
3E3E4F
0B0B1E

Deuteranopia

E1E7A0
ADB384
6A6E65
3F414C
0B0B1C

Tritanopia

FBA3A3
C88281
7A605E
484745
0C1918

Achromatopsia

C4C4C4
949494
5E5E5E
3C3C3C
0E0E0E

Shades & Tints Shades & Tints

#FFAF99

Dark
Light

#CC7A88

Dark
Light

#7D4A71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffaf99;
  --color-2: #cc7a88;
  --color-3: #7d4a71;
  --color-4: #492f59;
  --color-5: #0c0a24;
}

SCSS

$color-1: #ffaf99;
$color-2: #cc7a88;
$color-3: #7d4a71;
$color-4: #492f59;
$color-5: #0c0a24;

TAILWIND

colors: {
  'brand-1': '#ffaf99',
  'brand-2': '#cc7a88',
  'brand-3': '#7d4a71',
  'brand-4': '#492f59',
  'brand-5': '#0c0a24',
}

RGB Array

[255, 175, 153], [204, 122, 136], [125, 74, 113], [73, 47, 89], [12, 10, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFAF99, #CC7A88, #7D4A71, #492F59, #0C0A24 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ffaf99; --color-2: #cc7a88; --color-3: #7d4a71; --color-4: #492f59; --color-5: #0c0a24. 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. 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