← Back to Editor

#AFA155 · #AF7C13 · #D48237 · #C63C00 · #3A2722

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#AFA155

Autumn Sage · Tan · Sunflower

HEX
#AFA155
RGB
rgb(175, 161, 85)
HSL
hsl(51, 36%, 51%)
HSB
hsb(51, 51%, 69%)
CMYK
cmyk(0%, 8%, 51%, 31%)
Oklch
oklch(70.5% 0.099 99.1)

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

#AF7C13

Ochre · DarkGoldenRod · Honey Gold

HEX
#AF7C13
RGB
rgb(175, 124, 19)
HSL
hsl(40, 80%, 38%)
HSB
hsb(40, 89%, 69%)
CMYK
cmyk(0%, 29%, 89%, 31%)
Oklch
oklch(62.2% 0.125 78.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#D48237

Tangerine · Chocolate · Warm Sun

HEX
#D48237
RGB
rgb(212, 130, 55)
HSL
hsl(29, 65%, 52%)
HSB
hsb(29, 74%, 83%)
CMYK
cmyk(0%, 39%, 74%, 17%)
Oklch
oklch(68.1% 0.134 59.5)

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

#C63C00

Tangerine · FireBrick · Amber Brown

HEX
#C63C00
RGB
rgb(198, 60, 0)
HSL
hsl(18, 100%, 39%)
HSB
hsb(18, 100%, 78%)
CMYK
cmyk(0%, 70%, 100%, 22%)
Oklch
oklch(55.4% 0.183 37.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#3A2722

Crimson · DarkSlateGray · Deep Berry

HEX
#3A2722
RGB
rgb(58, 39, 34)
HSL
hsl(13, 26%, 18%)
HSB
hsb(13, 41%, 23%)
CMYK
cmyk(0%, 33%, 41%, 77%)
Oklch
oklch(29.4% 0.030 35.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFA155
5563AF

Analogous

AF7555
AFA155
90AF55

Triadic

AFA155
55AFA2
A255AF

Split-Comp.

AFA155
5590AF
7555AF

Tetradic

AFA155
55AF75
5563AF
AF5590

Contrast Matrix WCAG 2.1 Contrast

AFA155
AF7C13
D48237
C63C00
3A2722
—
1.4
Fail
1.1
Fail
2.0
Fail
5.4
AA
1.4
Fail
—
1.2
Fail
1.4
Fail
3.8
AA Large
1.1
Fail
1.2
Fail
—
1.7
Fail
4.7
AA
2.0
Fail
1.4
Fail
1.7
Fail
—
2.7
Fail
5.4
AA
3.8
AA Large
4.7
AA
2.7
Fail
—
White BG
2.6Fail
3.7AA Large
3.0Fail
5.2AA
14.1AAA
Black BG
8.1AAA
5.7AA
7.0AAA
4.0AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A967
99982C
B0B049
8A890F
323223

Deuteranopia

AAAB6C
9CA032
B5BB4E
929D12
333424

Tritanopia

AE7679
AC4045
D0575B
BF1A1D
392424

Achromatopsia

9D9D9D
7F7F7F
929292
5E5E5E
2C2C2C

Shades & Tints Shades & Tints

#AFA155

Dark
Light

#AF7C13

Dark
Light

#D48237

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afa155;
  --color-2: #af7c13;
  --color-3: #d48237;
  --color-4: #c63c00;
  --color-5: #3a2722;
}

SCSS

$color-1: #afa155;
$color-2: #af7c13;
$color-3: #d48237;
$color-4: #c63c00;
$color-5: #3a2722;

TAILWIND

colors: {
  'brand-1': '#afa155',
  'brand-2': '#af7c13',
  'brand-3': '#d48237',
  'brand-4': '#c63c00',
  'brand-5': '#3a2722',
}

RGB Array

[175, 161, 85], [175, 124, 19], [212, 130, 55], [198, 60, 0], [58, 39, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFA155, #AF7C13, #D48237, #C63C00, #3A2722 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #afa155; --color-2: #af7c13; --color-3: #d48237; --color-4: #c63c00; --color-5: #3a2722. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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