← Back to Editor

#CA1312 · #8C5211 · #251D0D · #ADD344 · #B8A463

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

Color Details Color Details

#CA1312

Vermilion · FireBrick · Passion Red

HEX
#CA1312
RGB
rgb(202, 19, 18)
HSL
hsl(0, 84%, 43%)
HSB
hsb(0, 91%, 79%)
CMYK
cmyk(0%, 91%, 91%, 21%)
Oklch
oklch(53.3% 0.210 28.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#8C5211

Ochre · Sienna · Amber Brown

HEX
#8C5211
RGB
rgb(140, 82, 17)
HSL
hsl(32, 78%, 31%)
HSB
hsb(32, 88%, 55%)
CMYK
cmyk(0%, 41%, 88%, 45%)
Oklch
oklch(49.6% 0.106 62.2)

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

#251D0D

Ochre · Black · Amber Gold

HEX
#251D0D
RGB
rgb(37, 29, 13)
HSL
hsl(40, 48%, 10%)
HSB
hsb(40, 65%, 15%)
CMYK
cmyk(0%, 22%, 65%, 85%)
Oklch
oklch(23.6% 0.030 83.6)

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

#ADD344

Grass Green · GreenYellow · Olive Green

HEX
#ADD344
RGB
rgb(173, 211, 68)
HSL
hsl(76, 62%, 55%)
HSB
hsb(76, 68%, 83%)
CMYK
cmyk(18%, 0%, 68%, 17%)
Oklch
oklch(81.3% 0.171 123.1)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#B8A463

Ginger · Tan · Sunflower

HEX
#B8A463
RGB
rgb(184, 164, 99)
HSL
hsl(46, 37%, 55%)
HSB
hsb(46, 46%, 72%)
CMYK
cmyk(0%, 11%, 46%, 28%)
Oklch
oklch(72.2% 0.088 92.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CA1312
12CACA

Analogous

CA126E
CA1312
CA6E12

Triadic

CA1312
12CA12
1212CA

Split-Comp.

CA1312
12CA6E
126ECA

Tetradic

CA1312
6ECA12
12CACA
6E12CA

Contrast Matrix WCAG 2.1 Contrast

CA1312
8C5211
251D0D
ADD344
B8A463
—
1.1
Fail
2.9
Fail
3.4
AA Large
2.4
Fail
1.1
Fail
—
2.6
Fail
3.7
AA Large
2.6
Fail
2.9
Fail
2.6
Fail
—
9.7
AAA
6.8
AA
3.4
AA Large
3.7
AA Large
9.7
AAA
—
1.4
Fail
2.4
Fail
2.6
Fail
6.8
AA
1.4
Fail
—
White BG
5.8AA
6.3AA
16.7AAA
1.7Fail
2.5Fail
Black BG
3.6AA Large
3.3AA Large
1.3Fail
12.2AAA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7912
737221
222111
BDBE67
AFAF73

Deuteranopia

859312
767B25
222312
BBB86F
B1B277

Tritanopia

C11212
892D30
251415
AF8288
B77F82

Achromatopsia

4A4A4A
5C5C5C
1E1E1E
B7B7B7
A3A3A3

Shades & Tints Shades & Tints

#CA1312

Dark
Light

#8C5211

Dark
Light

#251D0D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ca1312;
  --color-2: #8c5211;
  --color-3: #251d0d;
  --color-4: #add344;
  --color-5: #b8a463;
}

SCSS

$color-1: #ca1312;
$color-2: #8c5211;
$color-3: #251d0d;
$color-4: #add344;
$color-5: #b8a463;

TAILWIND

colors: {
  'brand-1': '#ca1312',
  'brand-2': '#8c5211',
  'brand-3': '#251d0d',
  'brand-4': '#add344',
  'brand-5': '#b8a463',
}

RGB Array

[202, 19, 18], [140, 82, 17], [37, 29, 13], [173, 211, 68], [184, 164, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CA1312, #8C5211, #251D0D, #ADD344, #B8A463 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #ca1312; --color-2: #8c5211; --color-3: #251d0d; --color-4: #add344; --color-5: #b8a463. 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. 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