← Back to Editor

#302222 · #0D423D · #007A52 · #AABD19 · #EBE1CE

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

#302222

Crimson · DarkSlateGray · Deep Berry

HEX
#302222
RGB
rgb(48, 34, 34)
HSL
hsl(0, 17%, 16%)
HSB
hsb(0, 29%, 19%)
CMYK
cmyk(0%, 29%, 29%, 81%)
Oklch
oklch(26.9% 0.022 18.6)

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

#0D423D

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0D423D
RGB
rgb(13, 66, 61)
HSL
hsl(174, 67%, 15%)
HSB
hsb(174, 80%, 26%)
CMYK
cmyk(80%, 0%, 8%, 74%)
Oklch
oklch(34.4% 0.054 185.7)

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

#007A52

Mineral Blue · Teal · Peacock Green

HEX
#007A52
RGB
rgb(0, 122, 82)
HSL
hsl(160, 100%, 24%)
HSB
hsb(160, 100%, 48%)
CMYK
cmyk(100%, 0%, 33%, 52%)
Oklch
oklch(51.2% 0.113 161.8)

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

#AABD19

Autumn Sage · GoldenRod · Honey Gold

HEX
#AABD19
RGB
rgb(170, 189, 25)
HSL
hsl(67, 77%, 42%)
HSB
hsb(67, 87%, 74%)
CMYK
cmyk(10%, 0%, 87%, 26%)
Oklch
oklch(75.8% 0.169 116.9)

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

#EBE1CE

Goose Yellow · Bisque · Peach Orange

HEX
#EBE1CE
RGB
rgb(235, 225, 206)
HSL
hsl(39, 42%, 86%)
HSB
hsb(39, 12%, 92%)
CMYK
cmyk(0%, 4%, 12%, 8%)
Oklch
oklch(91.3% 0.028 83.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302222
223030

Analogous

302229
302222
302922

Triadic

302222
223022
222230

Split-Comp.

302222
223029
222930

Tetradic

302222
293022
223030
292230

Contrast Matrix WCAG 2.1 Contrast

302222
0D423D
007A52
AABD19
EBE1CE
—
1.4
Fail
2.8
Fail
7.3
AAA
11.8
AAA
1.4
Fail
—
2.1
Fail
5.4
AA
8.7
AAA
2.8
Fail
2.1
Fail
—
2.6
Fail
4.1
AA Large
7.3
AAA
5.4
AA
2.6
Fail
—
1.6
Fail
11.8
AAA
8.7
AAA
4.1
AA Large
1.6
Fail
—
White BG
15.2AAA
11.3AAA
5.4AA
2.1Fail
1.3Fail
Black BG
1.4Fail
1.9Fail
3.9AA Large
10.0AAA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A22
24243E
35365C
B2B241
E7E7D3

Deuteranopia

2B2C22
211D3F
2E255E
B1B04A
E7E8D4

Tritanopia

2F2222
103F3F
066365
AB6067
EBD6D7

Achromatopsia

262626
323232
515151
A5A5A5
E2E2E2

Shades & Tints Shades & Tints

#302222

Dark
Light

#0D423D

Dark
Light

#007A52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302222;
  --color-2: #0d423d;
  --color-3: #007a52;
  --color-4: #aabd19;
  --color-5: #ebe1ce;
}

SCSS

$color-1: #302222;
$color-2: #0d423d;
$color-3: #007a52;
$color-4: #aabd19;
$color-5: #ebe1ce;

TAILWIND

colors: {
  'brand-1': '#302222',
  'brand-2': '#0d423d',
  'brand-3': '#007a52',
  'brand-4': '#aabd19',
  'brand-5': '#ebe1ce',
}

RGB Array

[48, 34, 34], [13, 66, 61], [0, 122, 82], [170, 189, 25], [235, 225, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #302222, #0D423D, #007A52, #AABD19, #EBE1CE 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: #302222; --color-2: #0d423d; --color-3: #007a52; --color-4: #aabd19; --color-5: #ebe1ce. 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