← Back to Editor

#603018 · #A87848 · #004830 · #183018 · #180000

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

#603018

Tangerine · Maroon · Cinnamon

HEX
#603018
RGB
rgb(96, 48, 24)
HSL
hsl(20, 60%, 24%)
HSB
hsb(20, 75%, 38%)
CMYK
cmyk(0%, 50%, 75%, 62%)
Oklch
oklch(36.7% 0.078 45.7)

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

#A87848

Ochre · Sienna · Amber Brown

HEX
#A87848
RGB
rgb(168, 120, 72)
HSL
hsl(30, 40%, 47%)
HSB
hsb(30, 57%, 66%)
CMYK
cmyk(0%, 29%, 57%, 34%)
Oklch
oklch(61.1% 0.088 64.9)

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

#004830

Mineral Blue · DarkGreen · Peacock Green

HEX
#004830
RGB
rgb(0, 72, 48)
HSL
hsl(160, 100%, 14%)
HSB
hsb(160, 100%, 28%)
CMYK
cmyk(100%, 0%, 33%, 72%)
Oklch
oklch(35.5% 0.077 163.0)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#183018

Celadon · Black · Dark Green

HEX
#183018
RGB
rgb(24, 48, 24)
HSL
hsl(120, 33%, 14%)
HSB
hsb(120, 50%, 19%)
CMYK
cmyk(50%, 0%, 50%, 81%)
Oklch
oklch(28.2% 0.052 144.0)

Traditional「Celadon」· Paint「Dark Green」· Creative Blush Sunrise

#180000

Vermilion · Black · Deep Berry

HEX
#180000
RGB
rgb(24, 0, 0)
HSL
hsl(0, 100%, 5%)
HSB
hsb(0, 100%, 9%)
CMYK
cmyk(0%, 100%, 100%, 91%)
Oklch
oklch(13.1% 0.054 29.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

603018
184962

Analogous

621825
603018
625618

Triadic

603018
186231
311862

Split-Comp.

603018
186256
182562

Tetradic

603018
256218
184962
561862

Contrast Matrix WCAG 2.1 Contrast

603018
A87848
004830
183018
180000
—
2.8
Fail
1.0
Fail
1.3
Fail
1.9
Fail
2.8
Fail
—
2.8
Fail
3.7
AA Large
5.2
AA
1.0
Fail
2.8
Fail
—
1.3
Fail
1.9
Fail
1.3
Fail
3.7
AA Large
1.3
Fail
—
1.4
Fail
1.9
Fail
5.2
AA
1.9
Fail
1.4
Fail
—
White BG
10.9AAA
3.9AA Large
10.7AAA
14.2AAA
20.2AAA
Black BG
1.9Fail
5.4AA
2.0Fail
1.5Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B1E
939354
1F2036
22231E
0E0D00

Deuteranopia

4E521F
969A56
1B1637
211F1F
0F1100

Tritanopia

5E2223
A65D5F
043A3B
192223
170000

Achromatopsia

3C3C3C
818181
303030
262626
070707

Shades & Tints Shades & Tints

#603018

Dark
Light

#A87848

Dark
Light

#004830

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #603018;
  --color-2: #a87848;
  --color-3: #004830;
  --color-4: #183018;
  --color-5: #180000;
}

SCSS

$color-1: #603018;
$color-2: #a87848;
$color-3: #004830;
$color-4: #183018;
$color-5: #180000;

TAILWIND

colors: {
  'brand-1': '#603018',
  'brand-2': '#a87848',
  'brand-3': '#004830',
  'brand-4': '#183018',
  'brand-5': '#180000',
}

RGB Array

[96, 48, 24], [168, 120, 72], [0, 72, 48], [24, 48, 24], [24, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #603018, #A87848, #004830, #183018, #180000 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: #603018; --color-2: #a87848; --color-3: #004830; --color-4: #183018; --color-5: #180000. 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