← Back to Editor

#C4D684 · #98C41D · #37916F · #6148AB · #434543

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#C4D684

Willow Green · Tan · Apple Green

HEX
#C4D684
RGB
rgb(196, 214, 132)
HSL
hsl(73, 50%, 68%)
HSB
hsb(73, 38%, 84%)
CMYK
cmyk(8%, 0%, 38%, 16%)
Oklch
oklch(84.4% 0.108 118.9)

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

#98C41D

Grass Green · GreenYellow · Olive Green

HEX
#98C41D
RGB
rgb(152, 196, 29)
HSL
hsl(76, 74%, 44%)
HSB
hsb(76, 85%, 77%)
CMYK
cmyk(22%, 0%, 85%, 23%)
Oklch
oklch(76.1% 0.183 124.7)

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

#37916F

Mineral Blue · SeaGreen · Forest Green

HEX
#37916F
RGB
rgb(55, 145, 111)
HSL
hsl(157, 45%, 39%)
HSB
hsb(157, 62%, 57%)
CMYK
cmyk(62%, 0%, 23%, 43%)
Oklch
oklch(59.3% 0.101 165.0)

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

#6148AB

Deep Indigo · SlateBlue · Navy Blue

HEX
#6148AB
RGB
rgb(97, 72, 171)
HSL
hsl(255, 41%, 48%)
HSB
hsb(255, 58%, 67%)
CMYK
cmyk(43%, 58%, 0%, 33%)
Oklch
oklch(48.0% 0.152 291.2)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#434543

Dark Cyan · DarkSlateGray · Charcoal

HEX
#434543
RGB
rgb(67, 69, 67)
HSL
hsl(120, 1%, 27%)
HSB
hsb(120, 3%, 27%)
CMYK
cmyk(3%, 0%, 3%, 73%)
Oklch
oklch(38.8% 0.004 145.5)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4D684
9685D6

Analogous

D6BF85
C4D684
9CD685

Triadic

C4D684
85C5D6
D685C5

Split-Comp.

C4D684
859CD6
BF85D6

Tetradic

C4D684
85D6BF
9685D6
D6859C

Contrast Matrix WCAG 2.1 Contrast

C4D684
98C41D
37916F
6148AB
434543
—
1.3
Fail
2.4
Fail
4.4
AA Large
6.1
AA
1.3
Fail
—
1.9
Fail
3.4
AA Large
4.7
AA
2.4
Fail
1.9
Fail
—
1.8
Fail
2.5
Fail
4.4
AA Large
3.4
AA Large
1.8
Fail
—
1.4
Fail
6.1
AA
4.7
AA
2.5
Fail
1.4
Fail
—
White BG
1.6Fail
2.0Fail
3.9AA Large
6.9AA
9.7AAA
Black BG
13.3AAA
10.2AAA
5.4AA
3.0AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCC98
ABAB45
5E5F77
565693
444443

Deuteranopia

CBC99D
A9A54F
595279
58598D
444444

Tritanopia

C5A8AB
9A656C
3C7E7F
60807C
434444

Achromatopsia

C7C7C7
A4A4A4
727272
5B5B5B
444444

Shades & Tints Shades & Tints

#C4D684

Dark
Light

#98C41D

Dark
Light

#37916F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4d684;
  --color-2: #98c41d;
  --color-3: #37916f;
  --color-4: #6148ab;
  --color-5: #434543;
}

SCSS

$color-1: #c4d684;
$color-2: #98c41d;
$color-3: #37916f;
$color-4: #6148ab;
$color-5: #434543;

TAILWIND

colors: {
  'brand-1': '#c4d684',
  'brand-2': '#98c41d',
  'brand-3': '#37916f',
  'brand-4': '#6148ab',
  'brand-5': '#434543',
}

RGB Array

[196, 214, 132], [152, 196, 29], [55, 145, 111], [97, 72, 171], [67, 69, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4D684, #98C41D, #37916F, #6148AB, #434543 is ideal for: 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: #c4d684; --color-2: #98c41d; --color-3: #37916f; --color-4: #6148ab; --color-5: #434543. 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 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