← Back to Editor

#AE0C3E · #AFCCA8 · #F5EEC3 · #C7B299 · #33211C

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

Color Details Color Details

#AE0C3E

Dark Violet · FireBrick · Camellia

HEX
#AE0C3E
RGB
rgb(174, 12, 62)
HSL
hsl(341, 87%, 36%)
HSB
hsb(341, 93%, 68%)
CMYK
cmyk(0%, 93%, 64%, 32%)
Oklch
oklch(48.2% 0.187 13.4)

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

#AFCCA8

Celadon · Silver · Apple Green

HEX
#AFCCA8
RGB
rgb(175, 204, 168)
HSL
hsl(108, 26%, 73%)
HSB
hsb(108, 18%, 80%)
CMYK
cmyk(14%, 0%, 18%, 20%)
Oklch
oklch(81.4% 0.059 139.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#F5EEC3

Fresh Green · Bisque · Lemon Cream

HEX
#F5EEC3
RGB
rgb(245, 238, 195)
HSL
hsl(52, 71%, 86%)
HSB
hsb(52, 20%, 96%)
CMYK
cmyk(0%, 3%, 20%, 4%)
Oklch
oklch(94.4% 0.056 99.7)

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

#C7B299

Ginger · Tan · Warm Sun

HEX
#C7B299
RGB
rgb(199, 178, 153)
HSL
hsl(33, 29%, 69%)
HSB
hsb(33, 23%, 78%)
CMYK
cmyk(0%, 11%, 23%, 22%)
Oklch
oklch(77.5% 0.042 72.0)

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

#33211C

Crimson · Black · Deep Berry

HEX
#33211C
RGB
rgb(51, 33, 28)
HSL
hsl(13, 29%, 15%)
HSB
hsb(13, 45%, 20%)
CMYK
cmyk(0%, 35%, 45%, 80%)
Oklch
oklch(26.9% 0.030 36.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AE0C3E
0CAC79

Analogous

AC0C8E
AE0C3E
AC290C

Triadic

AE0C3E
3FAC0C
0C3FAC

Split-Comp.

AE0C3E
0CAC29
0C8EAC

Tetradic

AE0C3E
8EAC0C
0CAC79
290CAC

Contrast Matrix WCAG 2.1 Contrast

AE0C3E
AFCCA8
F5EEC3
C7B299
33211C
—
4.1
AA Large
6.1
AA
3.5
AA Large
2.1
Fail
4.1
AA Large
—
1.5
Fail
1.2
Fail
8.7
AAA
6.1
AA
1.5
Fail
—
1.7
Fail
13.0
AAA
3.5
AA Large
1.2
Fail
1.7
Fail
—
7.5
AAA
2.1
Fail
8.7
AAA
13.0
AAA
7.5
AAA
—
White BG
7.2AAA
1.7Fail
1.2Fail
2.0Fail
15.3AAA
Black BG
2.9Fail
12.0AAA
17.9AAA
10.3AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

686632
BCBCB1
F2F2CD
BEBE9F
2B2B1D

Deuteranopia

717D2F
BAB8B3
F2F3D0
BFC1A1
2C2E1E

Tritanopia

A62826
B0B8B9
F5D6D7
C6A4A5
321E1E

Achromatopsia

424242
BFBFBF
EBEBEB
B5B5B5
262626

Shades & Tints Shades & Tints

#AE0C3E

Dark
Light

#AFCCA8

Dark
Light

#F5EEC3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ae0c3e;
  --color-2: #afcca8;
  --color-3: #f5eec3;
  --color-4: #c7b299;
  --color-5: #33211c;
}

SCSS

$color-1: #ae0c3e;
$color-2: #afcca8;
$color-3: #f5eec3;
$color-4: #c7b299;
$color-5: #33211c;

TAILWIND

colors: {
  'brand-1': '#ae0c3e',
  'brand-2': '#afcca8',
  'brand-3': '#f5eec3',
  'brand-4': '#c7b299',
  'brand-5': '#33211c',
}

RGB Array

[174, 12, 62], [175, 204, 168], [245, 238, 195], [199, 178, 153], [51, 33, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AE0C3E, #AFCCA8, #F5EEC3, #C7B299, #33211C 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: #ae0c3e; --color-2: #afcca8; --color-3: #f5eec3; --color-4: #c7b299; --color-5: #33211c. 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