← Back to Editor

#303025 · #545A38 · #BFFF50 · #F5594B · #3F3331

space

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#303025

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#303025
RGB
rgb(48, 48, 37)
HSL
hsl(60, 13%, 17%)
HSB
hsb(60, 23%, 19%)
CMYK
cmyk(0%, 0%, 23%, 81%)
Oklch
oklch(30.6% 0.019 107.5)

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

#545A38

Grass Green · DarkOliveGreen · Forest Green

HEX
#545A38
RGB
rgb(84, 90, 56)
HSL
hsl(71, 23%, 29%)
HSB
hsb(71, 38%, 35%)
CMYK
cmyk(7%, 0%, 38%, 65%)
Oklch
oklch(45.3% 0.052 116.7)

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

#BFFF50

Willow Green · GreenYellow · Apple Green

HEX
#BFFF50
RGB
rgb(191, 255, 80)
HSL
hsl(82, 100%, 66%)
HSB
hsb(82, 69%, 100%)
CMYK
cmyk(25%, 0%, 69%, 0%)
Oklch
oklch(92.5% 0.209 127.5)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#F5594B

Peach Pink · Tomato · Coral Red

HEX
#F5594B
RGB
rgb(245, 89, 75)
HSL
hsl(5, 89%, 63%)
HSB
hsb(5, 69%, 96%)
CMYK
cmyk(0%, 64%, 69%, 4%)
Oklch
oklch(66.9% 0.194 28.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#3F3331

Crimson · DarkSlateGray · Wine Red

HEX
#3F3331
RGB
rgb(63, 51, 49)
HSL
hsl(9, 13%, 22%)
HSB
hsb(9, 22%, 25%)
CMYK
cmyk(0%, 19%, 22%, 75%)
Oklch
oklch(33.3% 0.018 29.1)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

303025
262631

Analogous

312B26
303025
2B3126

Triadic

303025
263131
312631

Split-Comp.

303025
262B31
2B2631

Tetradic

303025
26312B
262631
31262B

Contrast Matrix WCAG 2.1 Contrast

303025
545A38
BFFF50
F5594B
3F3331
—
1.8
Fail
11.2
AAA
4.1
AA Large
1.1
Fail
1.8
Fail
—
6.1
AA
2.2
Fail
1.7
Fail
11.2
AAA
6.1
AA
—
2.7
Fail
10.2
AAA
4.1
AA Large
2.2
Fail
2.7
Fail
—
3.7
AA Large
1.1
Fail
1.7
Fail
10.2
AAA
3.7
AA Large
—
White BG
13.3AAA
7.3AAA
1.2Fail
3.3AA Large
12.1AAA
Black BG
1.6Fail
2.9Fail
17.6AAA
6.4AA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

303028
575740
DBDB7A
B1B04E
3A3A31

Deuteranopia

303028
565642
D7D285
BBC64F
3B3B32

Tritanopia

302A2A
544748
C29CA3
ED5152
3E3232

Achromatopsia

2F2F2F
545454
D8D8D8
868686
363636

Shades & Tints Shades & Tints

#303025

Dark
Light

#545A38

Dark
Light

#BFFF50

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #303025;
  --color-2: #545a38;
  --color-3: #bfff50;
  --color-4: #f5594b;
  --color-5: #3f3331;
}

SCSS

$color-1: #303025;
$color-2: #545a38;
$color-3: #bfff50;
$color-4: #f5594b;
$color-5: #3f3331;

TAILWIND

colors: {
  'brand-1': '#303025',
  'brand-2': '#545a38',
  'brand-3': '#bfff50',
  'brand-4': '#f5594b',
  'brand-5': '#3f3331',
}

RGB Array

[48, 48, 37], [84, 90, 56], [191, 255, 80], [245, 89, 75], [63, 51, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #303025, #545A38, #BFFF50, #F5594B, #3F3331 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #303025; --color-2: #545a38; --color-3: #bfff50; --color-4: #f5594b; --color-5: #3f3331. 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 space-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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