← Back to Editor

#1E4544 · #3A7A4F · #829446 · #CCB05C · #F5D987

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#1E4544

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#1E4544
RGB
rgb(30, 69, 68)
HSL
hsl(178, 39%, 19%)
HSB
hsb(178, 57%, 27%)
CMYK
cmyk(57%, 0%, 1%, 73%)
Oklch
oklch(36.2% 0.044 193.1)

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

#3A7A4F

Celadon · SeaGreen · Forest Green

HEX
#3A7A4F
RGB
rgb(58, 122, 79)
HSL
hsl(140, 36%, 35%)
HSB
hsb(140, 52%, 48%)
CMYK
cmyk(52%, 0%, 35%, 52%)
Oklch
oklch(52.5% 0.095 152.5)

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

#829446

Grass Green · DimGray · Olive Green

HEX
#829446
RGB
rgb(130, 148, 70)
HSL
hsl(74, 36%, 43%)
HSB
hsb(74, 53%, 58%)
CMYK
cmyk(12%, 0%, 53%, 42%)
Oklch
oklch(63.5% 0.106 120.3)

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

#CCB05C

Ginger · SandyBrown · Sunflower

HEX
#CCB05C
RGB
rgb(204, 176, 92)
HSL
hsl(45, 52%, 58%)
HSB
hsb(45, 55%, 80%)
CMYK
cmyk(0%, 14%, 55%, 20%)
Oklch
oklch(76.4% 0.109 91.3)

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

#F5D987

Goose Yellow · Khaki · Sunflower

HEX
#F5D987
RGB
rgb(245, 217, 135)
HSL
hsl(45, 85%, 75%)
HSB
hsb(45, 45%, 96%)
CMYK
cmyk(0%, 11%, 45%, 4%)
Oklch
oklch(89.1% 0.106 91.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1E4544
431E1F

Analogous

1E432F
1E4544
1E3243

Triadic

1E4544
421E43
43421E

Split-Comp.

1E4544
431E32
432F1E

Tetradic

1E4544
2F1E43
431E1F
32431E

Contrast Matrix WCAG 2.1 Contrast

1E4544
3A7A4F
829446
CCB05C
F5D987
—
2.0
Fail
3.2
AA Large
5.0
AA
7.6
AAA
2.0
Fail
—
1.5
Fail
2.4
Fail
3.7
AA Large
3.2
AA Large
1.5
Fail
—
1.6
Fail
2.4
Fail
5.0
AA
2.4
Fail
1.6
Fail
—
1.5
Fail
7.6
AAA
3.7
AA Large
2.4
Fail
1.5
Fail
—
White BG
10.6AAA
5.2AA
3.3AA Large
2.1Fail
1.4Fail
Black BG
2.0Fail
4.1AA Large
6.3AA
9.9AAA
15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F44
565659
8A8A59
C0C070
E9E99B

Deuteranopia

2D2A44
524D5C
89875D
C2C475
EBEDA0

Tritanopia

204444
3D6263
83686B
CB8084
F4ABAE

Achromatopsia

393939
626262
868686
AFAFAF
D8D8D8

Shades & Tints Shades & Tints

#1E4544

Dark
Light

#3A7A4F

Dark
Light

#829446

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1e4544;
  --color-2: #3a7a4f;
  --color-3: #829446;
  --color-4: #ccb05c;
  --color-5: #f5d987;
}

SCSS

$color-1: #1e4544;
$color-2: #3a7a4f;
$color-3: #829446;
$color-4: #ccb05c;
$color-5: #f5d987;

TAILWIND

colors: {
  'brand-1': '#1e4544',
  'brand-2': '#3a7a4f',
  'brand-3': '#829446',
  'brand-4': '#ccb05c',
  'brand-5': '#f5d987',
}

RGB Array

[30, 69, 68], [58, 122, 79], [130, 148, 70], [204, 176, 92], [245, 217, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1E4544, #3A7A4F, #829446, #CCB05C, #F5D987 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #1e4544; --color-2: #3a7a4f; --color-3: #829446; --color-4: #ccb05c; --color-5: #f5d987. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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