#24303D + #29494A + #2F7043 + #449C35 + #EBBD17 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#24303D

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#24303D

RGB

rgb(36, 48, 61)

HSL

hsl(211, 26%, 19%)

HSB

hsb(211, 41%, 24%)

CMYK

cmyk(41%, 21%, 0%, 76%)

Oklch

oklch(30.4% 0.029 250.8)

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

#29494A

Slate Blue · DarkSlateGray · Peacock Green

HEX

#29494A

RGB

rgb(41, 73, 74)

HSL

hsl(182, 29%, 23%)

HSB

hsb(182, 45%, 29%)

CMYK

cmyk(45%, 1%, 0%, 71%)

Oklch

oklch(38.1% 0.038 198.3)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#2F7043

Celadon · SeaGreen · Forest Green

HEX

#2F7043

RGB

rgb(47, 112, 67)

HSL

hsl(138, 41%, 31%)

HSB

hsb(138, 58%, 44%)

CMYK

cmyk(58%, 0%, 40%, 56%)

Oklch

oklch(49.0% 0.098 151.2)

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

#449C35

Celadon · ForestGreen · Olive Green

HEX

#449C35

RGB

rgb(68, 156, 53)

HSL

hsl(111, 49%, 41%)

HSB

hsb(111, 66%, 61%)

CMYK

cmyk(56%, 0%, 66%, 39%)

Oklch

oklch(61.7% 0.163 140.9)

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

#EBBD17

Ginger · GoldenRod · Sunflower

HEX

#EBBD17

RGB

rgb(235, 189, 23)

HSL

hsl(47, 84%, 51%)

HSB

hsb(47, 90%, 92%)

CMYK

cmyk(0%, 20%, 90%, 8%)

Oklch

oklch(81.6% 0.163 90.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

24303D

3D3124

Analogous

243D3D

24303D

24243D

Triadic

24303D

3D2430

303D24

Split-Comp.

24303D

3D2424

3D3D24

Tetradic

24303D

3D243D

3D3124

243D24

Contrast Matrix WCAG 2.1 Contrast

24303D	29494A	2F7043	449C35	EBBD17
—	1.4 Fail	2.2 Fail	3.9 AA Large	7.6 AAA
1.4 Fail	—	1.6 Fail	2.8 Fail	5.5 AA
2.2 Fail	1.6 Fail	—	1.7 Fail	3.4 AA Large
3.9 AA Large	2.8 Fail	1.7 Fail	—	2.0 Fail
7.6 AAA	5.5 AA	3.4 AA Large	2.0 Fail	—

White BG

13.4AAA

9.8AAA

6.0AA

3.5AA Large

1.8Fail

Black BG

1.6Fail

2.1Fail

3.5AA Large

6.1AA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

29293A

37374A

4B4C4E

6A6B4E

D7D73F

Deuteranopia

292839

35334A

474351

655E54

DADD49

Tritanopia

253737

2B4A4A

325658

486266

E95F66

Achromatopsia

2E2E2E

404040

575757

767676

B8B8B8

Shades & Tints Shades & Tints

#24303D

Dark

Light

#29494A

Dark

Light

#2F7043

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #24303d;
  --color-2: #29494a;
  --color-3: #2f7043;
  --color-4: #449c35;
  --color-5: #ebbd17;
}

SCSS

$color-1: #24303d;
$color-2: #29494a;
$color-3: #2f7043;
$color-4: #449c35;
$color-5: #ebbd17;

TAILWIND

colors: {
  'brand-1': '#24303d',
  'brand-2': '#29494a',
  'brand-3': '#2f7043',
  'brand-4': '#449c35',
  'brand-5': '#ebbd17',
}

RGB Array

[36, 48, 61], [41, 73, 74], [47, 112, 67], [68, 156, 53], [235, 189, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #24303D, #29494A, #2F7043, #449C35, #EBBD17 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: #24303d; --color-2: #29494a; --color-3: #2f7043; --color-4: #449c35; --color-5: #ebbd17. 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