#303A45 + #1D2A38 + #9AA314 + #B8B023 + #D6CD24 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#303A45

Indigo · DarkSlateGray · Prussian Blue

HEX

#303A45

RGB

rgb(48, 58, 69)

HSL

hsl(211, 18%, 23%)

HSB

hsb(211, 30%, 27%)

CMYK

cmyk(30%, 16%, 0%, 73%)

Oklch

oklch(34.4% 0.024 251.0)

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

#1D2A38

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#1D2A38

RGB

rgb(29, 42, 56)

HSL

hsl(211, 32%, 17%)

HSB

hsb(211, 48%, 22%)

CMYK

cmyk(48%, 25%, 0%, 78%)

Oklch

oklch(28.0% 0.032 250.8)

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

#9AA314

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#9AA314

RGB

rgb(154, 163, 20)

HSL

hsl(64, 78%, 36%)

HSB

hsb(64, 88%, 64%)

CMYK

cmyk(6%, 0%, 88%, 36%)

Oklch

oklch(68.5% 0.149 113.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B8B023

Autumn Sage · GoldenRod · Honey Gold

HEX

#B8B023

RGB

rgb(184, 176, 35)

HSL

hsl(57, 68%, 43%)

HSB

hsb(57, 81%, 72%)

CMYK

cmyk(0%, 4%, 81%, 28%)

Oklch

oklch(74.1% 0.149 106.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D6CD24

Autumn Sage · GoldenRod · Honey Gold

HEX

#D6CD24

RGB

rgb(214, 205, 36)

HSL

hsl(57, 71%, 49%)

HSB

hsb(57, 83%, 84%)

CMYK

cmyk(0%, 4%, 83%, 16%)

Oklch

oklch(83.0% 0.170 106.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

303A45

453B30

Analogous

304545

303A45

303045

Triadic

303A45

45303A

3A4530

Split-Comp.

303A45

453030

454530

Tetradic

303A45

453045

453B30

304530

Contrast Matrix WCAG 2.1 Contrast

303A45	1D2A38	9AA314	B8B023	D6CD24
—	1.3 Fail	4.2 AA Large	5.1 AA	6.9 AA
1.3 Fail	—	5.3 AA	6.4 AA	8.8 AAA
4.2 AA Large	5.3 AA	—	1.2 Fail	1.7 Fail
5.1 AA	6.4 AA	1.2 Fail	—	1.4 Fail
6.9 AA	8.8 AAA	1.7 Fail	1.4 Fail	—

White BG

11.6AAA

14.6AAA

2.8Fail

2.3Fail

1.7Fail

Black BG

1.8Fail

1.4Fail

7.6AAA

9.3AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

343442

232335

9E9E37

B5B445

D2D24D

Deuteranopia

343342

222134

9D9D3F

B5B64D

D3D357

Tritanopia

304040

1E3231

9A5258

B86066

D66D74

Achromatopsia

383838

282828

909090

A2A2A2

BCBCBC

Shades & Tints Shades & Tints

#303A45

Dark

Light

#1D2A38

Dark

Light

#9AA314

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #303a45;
  --color-2: #1d2a38;
  --color-3: #9aa314;
  --color-4: #b8b023;
  --color-5: #d6cd24;
}

SCSS

$color-1: #303a45;
$color-2: #1d2a38;
$color-3: #9aa314;
$color-4: #b8b023;
$color-5: #d6cd24;

TAILWIND

colors: {
  'brand-1': '#303a45',
  'brand-2': '#1d2a38',
  'brand-3': '#9aa314',
  'brand-4': '#b8b023',
  'brand-5': '#d6cd24',
}

RGB Array

[48, 58, 69], [29, 42, 56], [154, 163, 20], [184, 176, 35], [214, 205, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #303A45, #1D2A38, #9AA314, #B8B023, #D6CD24 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: #303a45; --color-2: #1d2a38; --color-3: #9aa314; --color-4: #b8b023; --color-5: #d6cd24. 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