#2A484A + #2A6A45 + #AFC24C + #E69C21 + #DB5458 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2A484A

Slate Blue · DarkSlateGray · Peacock Green

HEX

#2A484A

RGB

rgb(42, 72, 74)

HSL

hsl(184, 28%, 23%)

HSB

hsb(184, 43%, 29%)

CMYK

cmyk(43%, 3%, 0%, 71%)

Oklch

oklch(37.9% 0.036 201.2)

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

#2A6A45

Celadon · DarkSlateGray · Forest Green

HEX

#2A6A45

RGB

rgb(42, 106, 69)

HSL

hsl(145, 43%, 29%)

HSB

hsb(145, 60%, 42%)

CMYK

cmyk(60%, 0%, 35%, 58%)

Oklch

oklch(47.2% 0.089 155.3)

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

#AFC24C

Grass Green · GreenYellow · Olive Green

HEX

#AFC24C

RGB

rgb(175, 194, 76)

HSL

hsl(70, 49%, 53%)

HSB

hsb(70, 61%, 76%)

CMYK

cmyk(10%, 0%, 61%, 24%)

Oklch

oklch(77.6% 0.144 117.6)

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

#E69C21

Ginger · GoldenRod · Warm Sun

HEX

#E69C21

RGB

rgb(230, 156, 33)

HSL

hsl(37, 80%, 52%)

HSB

hsb(37, 86%, 90%)

CMYK

cmyk(0%, 32%, 86%, 10%)

Oklch

oklch(74.8% 0.151 73.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#DB5458

Vermilion · Tomato · Passion Red

HEX

#DB5458

RGB

rgb(219, 84, 88)

HSL

hsl(358, 65%, 59%)

HSB

hsb(358, 62%, 86%)

CMYK

cmyk(0%, 62%, 60%, 14%)

Oklch

oklch(62.5% 0.169 21.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A484A

4B2C2A

Analogous

2A4B3D

2A484A

2A384B

Triadic

2A484A

4B2A49

494B2A

Split-Comp.

2A484A

4B2A38

4B3D2A

Tetradic

2A484A

3D2A4B

4B2C2A

384B2A

Contrast Matrix WCAG 2.1 Contrast

2A484A	2A6A45	AFC24C	E69C21	DB5458
—	1.5 Fail	5.0 AA	4.3 AA Large	2.6 Fail
1.5 Fail	—	3.3 AA Large	2.8 Fail	1.7 Fail
5.0 AA	3.3 AA Large	—	1.2 Fail	2.0 Fail
4.3 AA Large	2.8 Fail	1.2 Fail	—	1.7 Fail
2.6 Fail	1.7 Fail	2.0 Fail	1.7 Fail	—

White BG

9.9AAA

6.5AA

2.0Fail

2.3Fail

3.9AA Large

Black BG

2.1Fail

3.2AA Large

10.6AAA

9.1AAA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

37374A

46464E

B7B769

C6C53F

A19F57

Deuteranopia

353349

423D50

B6B56F

CAD046

A8B257

Tritanopia

2C4949

2D5557

B07F84

E2565B

D45656

Achromatopsia

3F3F3F

535353

AFAFAF

A4A4A4

7D7D7D

Shades & Tints Shades & Tints

#2A484A

Dark

Light

#2A6A45

Dark

Light

#AFC24C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a484a;
  --color-2: #2a6a45;
  --color-3: #afc24c;
  --color-4: #e69c21;
  --color-5: #db5458;
}

SCSS

$color-1: #2a484a;
$color-2: #2a6a45;
$color-3: #afc24c;
$color-4: #e69c21;
$color-5: #db5458;

TAILWIND

colors: {
  'brand-1': '#2a484a',
  'brand-2': '#2a6a45',
  'brand-3': '#afc24c',
  'brand-4': '#e69c21',
  'brand-5': '#db5458',
}

RGB Array

[42, 72, 74], [42, 106, 69], [175, 194, 76], [230, 156, 33], [219, 84, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A484A, #2A6A45, #AFC24C, #E69C21, #DB5458 is ideal for: corporate websites, product showcases, portfolios. 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: #2a484a; --color-2: #2a6a45; --color-3: #afc24c; --color-4: #e69c21; --color-5: #db5458. 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. 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