#7CA628 + #242625 + #2E4D5C + #258992 + #21B5B5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7CA628

Grass Green · Olive · Forest Green

HEX

#7CA628

RGB

rgb(124, 166, 40)

HSL

hsl(80, 61%, 40%)

HSB

hsb(80, 76%, 65%)

CMYK

cmyk(25%, 0%, 76%, 35%)

Oklch

oklch(67.1% 0.156 126.7)

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

#242625

Ink Black · DarkSlateGray · Dark Stone

HEX

#242625

RGB

rgb(36, 38, 37)

HSL

hsl(150, 3%, 15%)

HSB

hsb(150, 5%, 15%)

CMYK

cmyk(5%, 0%, 3%, 85%)

Oklch

oklch(26.6% 0.003 164.8)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#2E4D5C

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#2E4D5C

RGB

rgb(46, 77, 92)

HSL

hsl(200, 33%, 27%)

HSB

hsb(200, 50%, 36%)

CMYK

cmyk(50%, 16%, 0%, 64%)

Oklch

oklch(40.3% 0.045 230.3)

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

#258992

Lake Blue · Teal · Mint Ice

HEX

#258992

RGB

rgb(37, 137, 146)

HSL

hsl(185, 60%, 36%)

HSB

hsb(185, 75%, 57%)

CMYK

cmyk(75%, 6%, 0%, 43%)

Oklch

oklch(57.9% 0.089 204.0)

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

#21B5B5

Lake Blue · LightSeaGreen · Mint Ice

HEX

#21B5B5

RGB

rgb(33, 181, 181)

HSL

hsl(180, 69%, 42%)

HSB

hsb(180, 82%, 71%)

CMYK

cmyk(82%, 0%, 0%, 29%)

Oklch

oklch(70.3% 0.114 194.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CA628

5128A4

Analogous

A48F28

7CA628

3DA428

Triadic

7CA628

287BA4

A4287B

Split-Comp.

7CA628

283DA4

8F28A4

Tetradic

7CA628

28A48F

5128A4

A4283D

Contrast Matrix WCAG 2.1 Contrast

7CA628	242625	2E4D5C	258992	21B5B5
—	5.3 AA	3.1 AA Large	1.4 Fail	1.1 Fail
5.3 AA	—	1.7 Fail	3.7 AA Large	6.0 AA
3.1 AA Large	1.7 Fail	—	2.2 Fail	3.6 AA Large
1.4 Fail	3.7 AA Large	2.2 Fail	—	1.6 Fail
1.1 Fail	6.0 AA	3.6 AA Large	1.6 Fail	—

White BG

2.9Fail

15.2AAA

9.0AAA

4.1AA Large

2.5Fail

Black BG

7.3AAA

1.4Fail

2.3Fail

5.1AA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8F46

252525

3B3C58

505190

6162B5

Deuteranopia

8C894E

252525

3A3757

4B438F

594DB5

Tritanopia

7E5F64

242525

305655

2A8E8E

28B5B5

Achromatopsia

8B8B8B

252525

454545

6C6C6C

898989

Shades & Tints Shades & Tints

#7CA628

Dark

Light

#242625

Dark

Light

#2E4D5C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ca628;
  --color-2: #242625;
  --color-3: #2e4d5c;
  --color-4: #258992;
  --color-5: #21b5b5;
}

SCSS

$color-1: #7ca628;
$color-2: #242625;
$color-3: #2e4d5c;
$color-4: #258992;
$color-5: #21b5b5;

TAILWIND

colors: {
  'brand-1': '#7ca628',
  'brand-2': '#242625',
  'brand-3': '#2e4d5c',
  'brand-4': '#258992',
  'brand-5': '#21b5b5',
}

RGB Array

[124, 166, 40], [36, 38, 37], [46, 77, 92], [37, 137, 146], [33, 181, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7CA628, #242625, #2E4D5C, #258992, #21B5B5 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: #7ca628; --color-2: #242625; --color-3: #2e4d5c; --color-4: #258992; --color-5: #21b5b5. 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