← Back to Editor

#384910 · #69B10B · #86C747 · #FFFEF3 · #558B1C

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

#384910

Grass Green · DarkOliveGreen · Dark Green

HEX
#384910
RGB
rgb(56, 73, 16)
HSL
hsl(78, 64%, 17%)
HSB
hsb(78, 78%, 29%)
CMYK
cmyk(23%, 0%, 78%, 71%)
Oklch
oklch(37.8% 0.083 124.8)

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

#69B10B

Grass Green · Olive · Forest Green

HEX
#69B10B
RGB
rgb(105, 177, 11)
HSL
hsl(86, 88%, 37%)
HSB
hsb(86, 94%, 69%)
CMYK
cmyk(41%, 0%, 94%, 31%)
Oklch
oklch(68.6% 0.190 132.7)

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

#86C747

Emerald · GreenYellow · Olive Green

HEX
#86C747
RGB
rgb(134, 199, 71)
HSL
hsl(90, 53%, 53%)
HSB
hsb(90, 64%, 78%)
CMYK
cmyk(33%, 0%, 64%, 22%)
Oklch
oklch(76.0% 0.173 132.2)

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

#FFFEF3

Fresh Green · Snow · Lemon Cream

HEX
#FFFEF3
RGB
rgb(255, 254, 243)
HSL
hsl(55, 100%, 98%)
HSB
hsb(55, 5%, 100%)
CMYK
cmyk(0%, 0%, 5%, 0%)
Oklch
oklch(99.5% 0.014 102.4)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#558B1C

Grass Green · DarkOliveGreen · Forest Green

HEX
#558B1C
RGB
rgb(85, 139, 28)
HSL
hsl(89, 66%, 33%)
HSB
hsb(89, 80%, 55%)
CMYK
cmyk(39%, 0%, 80%, 45%)
Oklch
oklch(57.7% 0.149 132.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

384910
201047

Analogous

473C10
384910
1B4710

Triadic

384910
103647
471036

Split-Comp.

384910
101B47
3C1047

Tetradic

384910
10473C
201047
47101B

Contrast Matrix WCAG 2.1 Contrast

384910
69B10B
86C747
FFFEF3
558B1C
—
3.7
AA Large
4.8
AA
9.7
AAA
2.4
Fail
3.7
AA Large
—
1.3
Fail
2.6
Fail
1.5
Fail
4.8
AA
1.3
Fail
—
2.0
Fail
2.0
Fail
9.7
AAA
2.6
Fail
2.0
Fail
—
4.1
AA Large
2.4
Fail
1.5
Fail
2.0
Fail
4.1
AA Large
—
White BG
9.9AAA
2.7Fail
2.0Fail
1.0Fail
4.1AA Large
Black BG
2.1Fail
7.9AAA
10.3AAA
20.7AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F401E
888933
A2A366
FFFFF6
6C6D37

Deuteranopia

3E3D21
847F3D
9E9A6D
FFFFF6
69653D

Tritanopia

39292B
6D535A
897E84
FFF8F8
584C51

Achromatopsia

3D3D3D
898989
A5A5A5
FDFDFD
6E6E6E

Shades & Tints Shades & Tints

#384910

Dark
Light

#69B10B

Dark
Light

#86C747

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #384910;
  --color-2: #69b10b;
  --color-3: #86c747;
  --color-4: #fffef3;
  --color-5: #558b1c;
}

SCSS

$color-1: #384910;
$color-2: #69b10b;
$color-3: #86c747;
$color-4: #fffef3;
$color-5: #558b1c;

TAILWIND

colors: {
  'brand-1': '#384910',
  'brand-2': '#69b10b',
  'brand-3': '#86c747',
  'brand-4': '#fffef3',
  'brand-5': '#558b1c',
}

RGB Array

[56, 73, 16], [105, 177, 11], [134, 199, 71], [255, 254, 243], [85, 139, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #384910, #69B10B, #86C747, #FFFEF3, #558B1C is ideal for: social media posters, mobile apps, e-commerce promos, 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: #384910; --color-2: #69b10b; --color-3: #86c747; --color-4: #fffef3; --color-5: #558b1c. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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