← Back to Editor

#101D0C · #255308 · #0D8722 · #71AF1C · #D3BA3B

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

#101D0C

Celadon · Black · Dark Green

HEX
#101D0C
RGB
rgb(16, 29, 12)
HSL
hsl(106, 41%, 8%)
HSB
hsb(106, 59%, 11%)
CMYK
cmyk(45%, 0%, 59%, 89%)
Oklch
oklch(21.3% 0.037 138.6)

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

#255308

Pine Green · DarkGreen · Dark Green

HEX
#255308
RGB
rgb(37, 83, 8)
HSL
hsl(97, 82%, 18%)
HSB
hsb(97, 90%, 33%)
CMYK
cmyk(55%, 0%, 90%, 67%)
Oklch
oklch(39.4% 0.113 136.8)

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

#0D8722

Pine Green · ForestGreen · Forest Green

HEX
#0D8722
RGB
rgb(13, 135, 34)
HSL
hsl(130, 82%, 29%)
HSB
hsb(130, 90%, 53%)
CMYK
cmyk(90%, 0%, 75%, 47%)
Oklch
oklch(54.3% 0.169 144.5)

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

#71AF1C

Grass Green · Olive · Forest Green

HEX
#71AF1C
RGB
rgb(113, 175, 28)
HSL
hsl(85, 72%, 40%)
HSB
hsb(85, 84%, 69%)
CMYK
cmyk(35%, 0%, 84%, 31%)
Oklch
oklch(68.6% 0.179 131.1)

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

#D3BA3B

Autumn Sage · GoldenRod · Sunflower

HEX
#D3BA3B
RGB
rgb(211, 186, 59)
HSL
hsl(50, 63%, 53%)
HSB
hsb(50, 72%, 83%)
CMYK
cmyk(0%, 12%, 72%, 17%)
Oklch
oklch(78.8% 0.143 97.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

101D0C
190C1D

Analogous

181D0C
101D0C
0C1D10

Triadic

101D0C
0C101D
1D0C10

Split-Comp.

101D0C
100C1D
1D0C18

Tetradic

101D0C
0C181D
190C1D
1D100C

Contrast Matrix WCAG 2.1 Contrast

101D0C
255308
0D8722
71AF1C
D3BA3B
—
1.9
Fail
3.7
AA Large
6.5
AA
9.0
AAA
1.9
Fail
—
1.9
Fail
3.4
AA Large
4.7
AA
3.7
AA Large
1.9
Fail
—
1.7
Fail
2.4
Fail
6.5
AA
3.4
AA Large
1.7
Fail
—
1.4
Fail
9.0
AAA
4.7
AA
2.4
Fail
1.4
Fail
—
White BG
17.5AAA
9.1AAA
4.7AA
2.7Fail
1.9Fail
Black BG
1.2Fail
2.3Fail
4.5AA
7.9AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

161610
39391A
42433A
8C8C40
C8C85A

Deuteranopia

151411
36331F
3B3240
888448
CACC61

Tritanopia

111314
27282C
134E52
745C62
D27277

Achromatopsia

171717
3D3D3D
575757
8C8C8C
B3B3B3

Shades & Tints Shades & Tints

#101D0C

Dark
Light

#255308

Dark
Light

#0D8722

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #101d0c;
  --color-2: #255308;
  --color-3: #0d8722;
  --color-4: #71af1c;
  --color-5: #d3ba3b;
}

SCSS

$color-1: #101d0c;
$color-2: #255308;
$color-3: #0d8722;
$color-4: #71af1c;
$color-5: #d3ba3b;

TAILWIND

colors: {
  'brand-1': '#101d0c',
  'brand-2': '#255308',
  'brand-3': '#0d8722',
  'brand-4': '#71af1c',
  'brand-5': '#d3ba3b',
}

RGB Array

[16, 29, 12], [37, 83, 8], [13, 135, 34], [113, 175, 28], [211, 186, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #101D0C, #255308, #0D8722, #71AF1C, #D3BA3B 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: #101d0c; --color-2: #255308; --color-3: #0d8722; --color-4: #71af1c; --color-5: #d3ba3b. 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