#1F2225 + #385450 + #40875B + #3DAD4F + #7AD917 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1F2225

Indigo · Black · Dark Stone

HEX

#1F2225

RGB

rgb(31, 34, 37)

HSL

hsl(210, 9%, 13%)

HSB

hsb(210, 16%, 15%)

CMYK

cmyk(16%, 8%, 0%, 85%)

Oklch

oklch(25.0% 0.007 248.1)

Traditional「Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

#385450

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#385450

RGB

rgb(56, 84, 80)

HSL

hsl(171, 20%, 27%)

HSB

hsb(171, 33%, 33%)

CMYK

cmyk(33%, 0%, 5%, 67%)

Oklch

oklch(42.2% 0.034 184.9)

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

#40875B

Celadon · SeaGreen · Forest Green

HEX

#40875B

RGB

rgb(64, 135, 91)

HSL

hsl(143, 36%, 39%)

HSB

hsb(143, 53%, 53%)

CMYK

cmyk(53%, 0%, 33%, 47%)

Oklch

oklch(56.5% 0.100 154.4)

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

#3DAD4F

Celadon · MediumSeaGreen · Olive Green

HEX

#3DAD4F

RGB

rgb(61, 173, 79)

HSL

hsl(130, 48%, 46%)

HSB

hsb(130, 65%, 68%)

CMYK

cmyk(65%, 0%, 54%, 32%)

Oklch

oklch(66.3% 0.167 146.2)

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

#7AD917

Grass Green · Chartreuse · Olive Green

HEX

#7AD917

RGB

rgb(122, 217, 23)

HSL

hsl(89, 81%, 47%)

HSB

hsb(89, 89%, 85%)

CMYK

cmyk(44%, 0%, 89%, 15%)

Oklch

oklch(79.5% 0.224 134.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F2225

24211E

Analogous

1E2424

1F2225

1E1E24

Triadic

1F2225

241E21

21241E

Split-Comp.

1F2225

241E1E

24241E

Tetradic

1F2225

241E24

24211E

1E241E

Contrast Matrix WCAG 2.1 Contrast

1F2225	385450	40875B	3DAD4F	7AD917
—	1.9 Fail	3.7 AA Large	5.5 AA	9.0 AAA
1.9 Fail	—	1.9 Fail	2.9 Fail	4.6 AA
3.7 AA Large	1.9 Fail	—	1.5 Fail	2.4 Fail
5.5 AA	2.9 Fail	1.5 Fail	—	1.6 Fail
9.0 AAA	4.6 AA	2.4 Fail	1.6 Fail	—

White BG

16.0AAA

8.2AAA

4.3AA Large

2.9Fail

1.8Fail

Black BG

1.3Fail

2.6Fail

4.8AA

7.3AAA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

202024

444451

5F5F66

6D6F66

A3A446

Deuteranopia

202024

434051

5B5568

675F6B

9E9751

Tritanopia

1F2424

395252

446E70

43787C

7F6B73

Achromatopsia

212121

4B4B4B

6D6D6D

818181

A6A6A6

Shades & Tints Shades & Tints

#1F2225

Dark

Light

#385450

Dark

Light

#40875B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f2225;
  --color-2: #385450;
  --color-3: #40875b;
  --color-4: #3dad4f;
  --color-5: #7ad917;
}

SCSS

$color-1: #1f2225;
$color-2: #385450;
$color-3: #40875b;
$color-4: #3dad4f;
$color-5: #7ad917;

TAILWIND

colors: {
  'brand-1': '#1f2225',
  'brand-2': '#385450',
  'brand-3': '#40875b',
  'brand-4': '#3dad4f',
  'brand-5': '#7ad917',
}

RGB Array

[31, 34, 37], [56, 84, 80], [64, 135, 91], [61, 173, 79], [122, 217, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F2225, #385450, #40875B, #3DAD4F, #7AD917 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: #1f2225; --color-2: #385450; --color-3: #40875b; --color-4: #3dad4f; --color-5: #7ad917. 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