#C3D039 + #74AA63 + #24838D + #4D5162 + #482830 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C3D039

Autumn Sage · GreenYellow · Sunflower

HEX

#C3D039

RGB

rgb(195, 208, 57)

HSL

hsl(65, 62%, 52%)

HSB

hsb(65, 73%, 82%)

CMYK

cmyk(6%, 0%, 73%, 18%)

Oklch

oklch(82.1% 0.167 114.4)

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

#74AA63

Celadon · Gray · Olive Green

HEX

#74AA63

RGB

rgb(116, 170, 99)

HSL

hsl(106, 29%, 53%)

HSB

hsb(106, 42%, 67%)

CMYK

cmyk(32%, 0%, 42%, 33%)

Oklch

oklch(68.3% 0.115 138.5)

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

#24838D

Lake Blue · Teal · Mint Ice

HEX

#24838D

RGB

rgb(36, 131, 141)

HSL

hsl(186, 59%, 35%)

HSB

hsb(186, 74%, 55%)

CMYK

cmyk(74%, 7%, 0%, 45%)

Oklch

oklch(56.1% 0.086 205.4)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#4D5162

Indigo · DarkSlateGray · Prussian Blue

HEX

#4D5162

RGB

rgb(77, 81, 98)

HSL

hsl(229, 12%, 34%)

HSB

hsb(229, 21%, 38%)

CMYK

cmyk(21%, 17%, 0%, 62%)

Oklch

oklch(43.8% 0.028 274.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#482830

Crimson · DarkSlateGray · Wine Red

HEX

#482830

RGB

rgb(72, 40, 48)

HSL

hsl(345, 29%, 22%)

HSB

hsb(345, 44%, 28%)

CMYK

cmyk(0%, 44%, 33%, 72%)

Oklch

oklch(32.1% 0.049 4.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3D039

4539D0

Analogous

D09139

C3D039

78D039

Triadic

C3D039

39C4D0

D039C4

Split-Comp.

C3D039

3978D0

9139D0

Tetradic

C3D039

39D091

4539D0

D03978

Contrast Matrix WCAG 2.1 Contrast

C3D039	74AA63	24838D	4D5162	482830
—	1.6 Fail	2.6 Fail	4.6 AA	7.6 AAA
1.6 Fail	—	1.6 Fail	2.9 Fail	4.7 AA
2.6 Fail	1.6 Fail	—	1.8 Fail	2.9 Fail
4.6 AA	2.9 Fail	1.8 Fail	—	1.6 Fail
7.6 AAA	4.7 AA	2.9 Fail	1.6 Fail	—

White BG

1.7Fail

2.7Fail

4.5AA Large

7.9AAA

12.9AAA

Black BG

12.4AAA

7.7AAA

4.7AA

2.7Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C95E

8B8C74

4D4E8B

4F4F5E

3A3A2E

Deuteranopia

C8C766

888478

48418A

4F4E5D

3C3E2E

Tritanopia

C47A81

778285

298988

4D5B5A

462D2C

Achromatopsia

BBBBBB

929292

686868

525252

323232

Shades & Tints Shades & Tints

#C3D039

Dark

Light

#74AA63

Dark

Light

#24838D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3d039;
  --color-2: #74aa63;
  --color-3: #24838d;
  --color-4: #4d5162;
  --color-5: #482830;
}

SCSS

$color-1: #c3d039;
$color-2: #74aa63;
$color-3: #24838d;
$color-4: #4d5162;
$color-5: #482830;

TAILWIND

colors: {
  'brand-1': '#c3d039',
  'brand-2': '#74aa63',
  'brand-3': '#24838d',
  'brand-4': '#4d5162',
  'brand-5': '#482830',
}

RGB Array

[195, 208, 57], [116, 170, 99], [36, 131, 141], [77, 81, 98], [72, 40, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3D039, #74AA63, #24838D, #4D5162, #482830 is ideal for: tech websites, dark mode UIs, game UIs. 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: #c3d039; --color-2: #74aa63; --color-3: #24838d; --color-4: #4d5162; --color-5: #482830. 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. 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