← Back to Editor

#AF3F08 · #A4B50A · #F3EDD9 · #636274 · #422C02

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#AF3F08

Tangerine · FireBrick · Amber Brown

HEX
#AF3F08
RGB
rgb(175, 63, 8)
HSL
hsl(20, 91%, 36%)
HSB
hsb(20, 95%, 69%)
CMYK
cmyk(0%, 64%, 95%, 31%)
Oklch
oklch(51.9% 0.157 40.6)

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

#A4B50A

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A4B50A
RGB
rgb(164, 181, 10)
HSL
hsl(66, 90%, 37%)
HSB
hsb(66, 94%, 71%)
CMYK
cmyk(9%, 0%, 94%, 29%)
Oklch
oklch(73.5% 0.167 116.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F3EDD9

Goose Yellow · Beige · Lemon Cream

HEX
#F3EDD9
RGB
rgb(243, 237, 217)
HSL
hsl(46, 52%, 90%)
HSB
hsb(46, 11%, 95%)
CMYK
cmyk(0%, 2%, 11%, 5%)
Oklch
oklch(94.5% 0.027 93.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#636274

Deep Indigo · DimGray · Warm Gray

HEX
#636274
RGB
rgb(99, 98, 116)
HSL
hsl(243, 8%, 42%)
HSB
hsb(243, 16%, 45%)
CMYK
cmyk(15%, 16%, 0%, 55%)
Oklch
oklch(50.4% 0.028 287.9)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#422C02

Ochre · Maroon · Cinnamon

HEX
#422C02
RGB
rgb(66, 44, 2)
HSL
hsl(39, 94%, 13%)
HSB
hsb(39, 97%, 26%)
CMYK
cmyk(0%, 33%, 97%, 74%)
Oklch
oklch(31.2% 0.063 78.1)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF3F08
0878AF

Analogous

AF0824
AF3F08
AF9308

Triadic

AF3F08
08AF40
4008AF

Split-Comp.

AF3F08
08AF93
0824AF

Tetradic

AF3F08
24AF08
0878AF
9308AF

Contrast Matrix WCAG 2.1 Contrast

AF3F08
A4B50A
F3EDD9
636274
422C02
—
2.6
Fail
5.1
AA
1.0
Fail
2.2
Fail
2.6
Fail
—
2.0
Fail
2.6
Fail
5.8
AA
5.1
AA
2.0
Fail
—
5.1
AA
11.3
AAA
1.0
Fail
2.6
Fail
5.1
AA
—
2.2
Fail
2.2
Fail
5.8
AA
11.3
AAA
2.2
Fail
—
White BG
5.9AA
2.3Fail
1.2Fail
5.9AA
13.2AAA
Black BG
3.5AA Large
9.2AAA
17.9AAA
3.5AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7D15
ABAC33
F0F0DE
636370
38380C

Deuteranopia

858D19
AAA93D
F1F1DF
63636F
3A3B0F

Tritanopia

A92022
A5545B
F3E2E3
636C6B
411416

Achromatopsia

5A5A5A
9C9C9C
EDEDED
646464
2E2E2E

Shades & Tints Shades & Tints

#AF3F08

Dark
Light

#A4B50A

Dark
Light

#F3EDD9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af3f08;
  --color-2: #a4b50a;
  --color-3: #f3edd9;
  --color-4: #636274;
  --color-5: #422c02;
}

SCSS

$color-1: #af3f08;
$color-2: #a4b50a;
$color-3: #f3edd9;
$color-4: #636274;
$color-5: #422c02;

TAILWIND

colors: {
  'brand-1': '#af3f08',
  'brand-2': '#a4b50a',
  'brand-3': '#f3edd9',
  'brand-4': '#636274',
  'brand-5': '#422c02',
}

RGB Array

[175, 63, 8], [164, 181, 10], [243, 237, 217], [99, 98, 116], [66, 44, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AF3F08, #A4B50A, #F3EDD9, #636274, #422C02 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #af3f08; --color-2: #a4b50a; --color-3: #f3edd9; --color-4: #636274; --color-5: #422c02. 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 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