← Back to Editor

#C4F257 · #71AF44 · #25573C · #2D3824 · #26220C

A 5-color palette 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

#C4F257

Willow Green · GreenYellow · Apple Green

HEX
#C4F257
RGB
rgb(196, 242, 87)
HSL
hsl(78, 86%, 65%)
HSB
hsb(78, 64%, 95%)
CMYK
cmyk(19%, 0%, 64%, 5%)
Oklch
oklch(90.0% 0.186 124.2)

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

#71AF44

Celadon · MediumSeaGreen · Olive Green

HEX
#71AF44
RGB
rgb(113, 175, 68)
HSL
hsl(95, 44%, 48%)
HSB
hsb(95, 61%, 69%)
CMYK
cmyk(35%, 0%, 61%, 31%)
Oklch
oklch(68.9% 0.154 134.2)

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

#25573C

Celadon · DarkSlateGray · Forest Green

HEX
#25573C
RGB
rgb(37, 87, 60)
HSL
hsl(148, 40%, 24%)
HSB
hsb(148, 57%, 34%)
CMYK
cmyk(57%, 0%, 31%, 66%)
Oklch
oklch(41.4% 0.071 157.5)

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

#2D3824

Celadon · DarkSlateGray · Dark Green

HEX
#2D3824
RGB
rgb(45, 56, 36)
HSL
hsl(93, 22%, 18%)
HSB
hsb(93, 36%, 22%)
CMYK
cmyk(20%, 0%, 36%, 78%)
Oklch
oklch(32.4% 0.037 131.6)

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

#26220C

Autumn Sage · Black · Amber Gold

HEX
#26220C
RGB
rgb(38, 34, 12)
HSL
hsl(51, 52%, 10%)
HSB
hsb(51, 68%, 15%)
CMYK
cmyk(0%, 11%, 68%, 85%)
Oklch
oklch(25.0% 0.037 99.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4F257
8759F3

Analogous

F3D459
C4F257
78F359

Triadic

C4F257
59C4F3
F359C4

Split-Comp.

C4F257
5978F3
D459F3

Tetradic

C4F257
59F3D4
8759F3
F35978

Contrast Matrix WCAG 2.1 Contrast

C4F257
71AF44
25573C
2D3824
26220C
—
2.0
Fail
6.5
AA
9.5
AAA
12.3
AAA
2.0
Fail
—
3.2
AA Large
4.6
AA
6.0
AA
6.5
AA
3.2
AA Large
—
1.5
Fail
1.9
Fail
9.5
AAA
4.6
AA
1.5
Fail
—
1.3
Fail
12.3
AAA
6.0
AA
1.9
Fail
1.3
Fail
—
White BG
1.3Fail
2.7Fail
8.4AAA
12.3AAA
16.0AAA
Black BG
16.2AAA
7.9AAA
2.5Fail
1.7Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D87D
8C8C5E
3B3B43
323229
242411

Deuteranopia

D5D286
888464
383444
31302A
252513

Tritanopia

C69AA1
747277
284849
2E2D2E
261616

Achromatopsia

D3D3D3
909090
454545
323232
212121

Shades & Tints Shades & Tints

#C4F257

Dark
Light

#71AF44

Dark
Light

#25573C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4f257;
  --color-2: #71af44;
  --color-3: #25573c;
  --color-4: #2d3824;
  --color-5: #26220c;
}

SCSS

$color-1: #c4f257;
$color-2: #71af44;
$color-3: #25573c;
$color-4: #2d3824;
$color-5: #26220c;

TAILWIND

colors: {
  'brand-1': '#c4f257',
  'brand-2': '#71af44',
  'brand-3': '#25573c',
  'brand-4': '#2d3824',
  'brand-5': '#26220c',
}

RGB Array

[196, 242, 87], [113, 175, 68], [37, 87, 60], [45, 56, 36], [38, 34, 12]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4F257, #71AF44, #25573C, #2D3824, #26220C 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: #c4f257; --color-2: #71af44; --color-3: #25573c; --color-4: #2d3824; --color-5: #26220c. 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 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