← Back to Editor

#A3BD21 · #6A7245 · #282C36 · #3F405F · #737594

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#A3BD21

Grass Green · GoldenRod · Olive Green

HEX
#A3BD21
RGB
rgb(163, 189, 33)
HSL
hsl(70, 70%, 44%)
HSB
hsb(70, 83%, 74%)
CMYK
cmyk(14%, 0%, 83%, 26%)
Oklch
oklch(75.3% 0.169 119.5)

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

#6A7245

Grass Green · DarkOliveGreen · Forest Green

HEX
#6A7245
RGB
rgb(106, 114, 69)
HSL
hsl(71, 25%, 36%)
HSB
hsb(71, 39%, 45%)
CMYK
cmyk(7%, 0%, 39%, 55%)
Oklch
oklch(53.4% 0.066 116.9)

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

#282C36

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#282C36
RGB
rgb(40, 44, 54)
HSL
hsl(223, 15%, 18%)
HSB
hsb(223, 26%, 21%)
CMYK
cmyk(26%, 19%, 0%, 79%)
Oklch
oklch(29.3% 0.019 268.0)

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

#3F405F

Indigo · DarkSlateGray · Prussian Blue

HEX
#3F405F
RGB
rgb(63, 64, 95)
HSL
hsl(238, 20%, 31%)
HSB
hsb(238, 34%, 37%)
CMYK
cmyk(34%, 33%, 0%, 63%)
Oklch
oklch(38.4% 0.053 282.2)

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

#737594

Azure · SlateGray · Navy Blue

HEX
#737594
RGB
rgb(115, 117, 148)
HSL
hsl(236, 13%, 52%)
HSB
hsb(236, 22%, 58%)
CMYK
cmyk(22%, 21%, 0%, 42%)
Oklch
oklch(57.2% 0.048 281.9)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3BD21
3C22BF

Analogous

BF8A22
A3BD21
56BF22

Triadic

A3BD21
22A5BF
BF22A5

Split-Comp.

A3BD21
2256BF
8A22BF

Tetradic

A3BD21
22BF8A
3C22BF
BF2256

Contrast Matrix WCAG 2.1 Contrast

A3BD21
6A7245
282C36
3F405F
737594
—
2.4
Fail
6.6
AA
4.7
AA
2.1
Fail
2.4
Fail
—
2.7
Fail
1.9
Fail
1.1
Fail
6.6
AA
2.7
Fail
—
1.4
Fail
3.1
AA Large
4.7
AA
1.9
Fail
1.4
Fail
—
2.2
Fail
2.1
Fail
1.1
Fail
3.1
AA Large
2.2
Fail
—
White BG
2.1Fail
5.1AA
14.0AAA
10.0AAA
4.5AA Large
Black BG
9.9AAA
4.1AA Large
1.5Fail
2.1Fail
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAE47
6D6E50
2A2A34
3F3F57
74748C

Deuteranopia

ADAB50
6D6C53
2A2933
3F3F56
74748B

Tritanopia

A4656B
6A585A
283231
3F5250
738785

Achromatopsia

A3A3A3
6A6A6A
2C2C2C
434343
787878

Shades & Tints Shades & Tints

#A3BD21

Dark
Light

#6A7245

Dark
Light

#282C36

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3bd21;
  --color-2: #6a7245;
  --color-3: #282c36;
  --color-4: #3f405f;
  --color-5: #737594;
}

SCSS

$color-1: #a3bd21;
$color-2: #6a7245;
$color-3: #282c36;
$color-4: #3f405f;
$color-5: #737594;

TAILWIND

colors: {
  'brand-1': '#a3bd21',
  'brand-2': '#6a7245',
  'brand-3': '#282c36',
  'brand-4': '#3f405f',
  'brand-5': '#737594',
}

RGB Array

[163, 189, 33], [106, 114, 69], [40, 44, 54], [63, 64, 95], [115, 117, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3BD21, #6A7245, #282C36, #3F405F, #737594 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a3bd21; --color-2: #6a7245; --color-3: #282c36; --color-4: #3f405f; --color-5: #737594. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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