#2D2F5A + #ADB06D + #DF3D0B + #A0A365 + #383A7E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2D2F5A

Indigo · DarkSlateGray · Prussian Blue

HEX

#2D2F5A

RGB

rgb(45, 47, 90)

HSL

hsl(237, 33%, 26%)

HSB

hsb(237, 50%, 35%)

CMYK

cmyk(50%, 48%, 0%, 65%)

Oklch

oklch(32.6% 0.075 279.3)

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

#ADB06D

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#ADB06D

RGB

rgb(173, 176, 109)

HSL

hsl(63, 30%, 56%)

HSB

hsb(63, 38%, 69%)

CMYK

cmyk(2%, 0%, 38%, 31%)

Oklch

oklch(73.9% 0.089 110.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#DF3D0B

Vermilion · OrangeRed · Passion Red

HEX

#DF3D0B

RGB

rgb(223, 61, 11)

HSL

hsl(14, 91%, 46%)

HSB

hsb(14, 95%, 87%)

CMYK

cmyk(0%, 73%, 95%, 13%)

Oklch

oklch(59.9% 0.205 35.0)

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

#A0A365

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A0A365

RGB

rgb(160, 163, 101)

HSL

hsl(63, 25%, 52%)

HSB

hsb(63, 38%, 64%)

CMYK

cmyk(2%, 0%, 38%, 36%)

Oklch

oklch(69.8% 0.083 110.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#383A7E

Indigo · DarkSlateBlue · Prussian Blue

HEX

#383A7E

RGB

rgb(56, 58, 126)

HSL

hsl(238, 38%, 36%)

HSB

hsb(238, 56%, 49%)

CMYK

cmyk(56%, 54%, 0%, 51%)

Oklch

oklch(38.5% 0.113 278.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D2F5A

58562C

Analogous

2C4458

2D2F5A

402C58

Triadic

2D2F5A

582C2F

2F582C

Split-Comp.

2D2F5A

58402C

44582C

Tetradic

2D2F5A

582C44

58562C

2C5840

Contrast Matrix WCAG 2.1 Contrast

2D2F5A	ADB06D	DF3D0B	A0A365	383A7E
—	5.5 AA	2.9 Fail	4.8 AA	1.2 Fail
5.5 AA	—	1.9 Fail	1.2 Fail	4.4 AA Large
2.9 Fail	1.9 Fail	—	1.6 Fail	2.3 Fail
4.8 AA	1.2 Fail	1.6 Fail	—	3.8 AA Large
1.2 Fail	4.4 AA Large	2.3 Fail	3.8 AA Large	—

White BG

12.6AAA

2.3Fail

4.4AA Large

2.7Fail

10.1AAA

Black BG

1.7Fail

9.2AAA

4.8AA

7.9AAA

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E50

AEAE7D

999717

A1A174

39396E

Deuteranopia

2E2E4D

AEAE81

A2AE1A

A1A178

39396A

Tritanopia

2D4746

AD8A8D

D72123

A08082

38615E

Achromatopsia

333333

A7A7A7

686868

9B9B9B

414141

Shades & Tints Shades & Tints

#2D2F5A

Dark

Light

#ADB06D

Dark

Light

#DF3D0B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d2f5a;
  --color-2: #adb06d;
  --color-3: #df3d0b;
  --color-4: #a0a365;
  --color-5: #383a7e;
}

SCSS

$color-1: #2d2f5a;
$color-2: #adb06d;
$color-3: #df3d0b;
$color-4: #a0a365;
$color-5: #383a7e;

TAILWIND

colors: {
  'brand-1': '#2d2f5a',
  'brand-2': '#adb06d',
  'brand-3': '#df3d0b',
  'brand-4': '#a0a365',
  'brand-5': '#383a7e',
}

RGB Array

[45, 47, 90], [173, 176, 109], [223, 61, 11], [160, 163, 101], [56, 58, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D2F5A, #ADB06D, #DF3D0B, #A0A365, #383A7E 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: #2d2f5a; --color-2: #adb06d; --color-3: #df3d0b; --color-4: #a0a365; --color-5: #383a7e. 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