← Back to Editor

#301800 · #783018 · #786048 · #78A890 · #300000

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

#301800

Ochre · Black · Cinnamon

HEX
#301800
RGB
rgb(48, 24, 0)
HSL
hsl(30, 100%, 9%)
HSB
hsb(30, 100%, 19%)
CMYK
cmyk(0%, 50%, 100%, 81%)
Oklch
oklch(23.8% 0.054 63.5)

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

#783018

Tangerine · Brown · Amber Brown

HEX
#783018
RGB
rgb(120, 48, 24)
HSL
hsl(15, 67%, 28%)
HSB
hsb(15, 80%, 47%)
CMYK
cmyk(0%, 60%, 80%, 53%)
Oklch
oklch(40.7% 0.107 38.4)

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

#786048

Ochre · DimGray · Amber Brown

HEX
#786048
RGB
rgb(120, 96, 72)
HSL
hsl(30, 25%, 38%)
HSB
hsb(30, 40%, 47%)
CMYK
cmyk(0%, 20%, 40%, 53%)
Oklch
oklch(50.7% 0.047 66.4)

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

#78A890

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#78A890
RGB
rgb(120, 168, 144)
HSL
hsl(150, 22%, 56%)
HSB
hsb(150, 29%, 66%)
CMYK
cmyk(29%, 0%, 14%, 34%)
Oklch
oklch(69.0% 0.062 162.5)

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

#300000

Vermilion · Black · Deep Berry

HEX
#300000
RGB
rgb(48, 0, 0)
HSL
hsl(0, 100%, 9%)
HSB
hsb(0, 100%, 19%)
CMYK
cmyk(0%, 100%, 100%, 81%)
Oklch
oklch(19.4% 0.080 29.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

301800
00172E

Analogous

2E0000
301800
2E2E00

Triadic

301800
002E17
17002E

Split-Comp.

301800
002E2E
00002E

Tetradic

301800
002E00
00172E
2E002E

Contrast Matrix WCAG 2.1 Contrast

301800
783018
786048
78A890
300000
—
1.8
Fail
2.8
Fail
6.2
AA
1.1
Fail
1.8
Fail
—
1.6
Fail
3.5
AA Large
2.0
Fail
2.8
Fail
1.6
Fail
—
2.2
Fail
3.2
AA Large
6.2
AA
3.5
AA Large
2.2
Fail
—
6.9
AA
1.1
Fail
2.0
Fail
3.2
AA Large
6.9
AA
—
White BG
16.7AAA
9.4AAA
5.9AA
2.7Fail
18.7AAA
Black BG
1.3Fail
2.2Fail
3.6AA Large
7.8AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

262506
59581E
6E6D4E
8D8D96
1B1B00

Deuteranopia

272907
5D621F
6F714F
8A8697
1E2200

Tritanopia

2F0A0B
742223
775253
7A9A9B
2E0000

Achromatopsia

1C1C1C
434343
646464
979797
0E0E0E

Shades & Tints Shades & Tints

#301800

Dark
Light

#783018

Dark
Light

#786048

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #301800;
  --color-2: #783018;
  --color-3: #786048;
  --color-4: #78a890;
  --color-5: #300000;
}

SCSS

$color-1: #301800;
$color-2: #783018;
$color-3: #786048;
$color-4: #78a890;
$color-5: #300000;

TAILWIND

colors: {
  'brand-1': '#301800',
  'brand-2': '#783018',
  'brand-3': '#786048',
  'brand-4': '#78a890',
  'brand-5': '#300000',
}

RGB Array

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

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #301800, #783018, #786048, #78A890, #300000 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: #301800; --color-2: #783018; --color-3: #786048; --color-4: #78a890; --color-5: #300000. 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