#1A3246 + #3B4E5F + #737768 + #C6CC2F + #EEE713 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1A3246

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX

#1A3246

RGB

rgb(26, 50, 70)

HSL

hsl(207, 46%, 19%)

HSB

hsb(207, 63%, 27%)

CMYK

cmyk(63%, 29%, 0%, 73%)

Oklch

oklch(30.8% 0.047 245.3)

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

#3B4E5F

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#3B4E5F

RGB

rgb(59, 78, 95)

HSL

hsl(208, 23%, 30%)

HSB

hsb(208, 38%, 37%)

CMYK

cmyk(38%, 18%, 0%, 63%)

Oklch

oklch(41.5% 0.037 245.9)

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

#737768

Ink Gray · DimGray · Warm Gray

HEX

#737768

RGB

rgb(115, 119, 104)

HSL

hsl(76, 7%, 44%)

HSB

hsb(76, 13%, 47%)

CMYK

cmyk(3%, 0%, 13%, 53%)

Oklch

oklch(56.1% 0.023 119.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#C6CC2F

Autumn Sage · GoldenRod · Honey Gold

HEX

#C6CC2F

RGB

rgb(198, 204, 47)

HSL

hsl(62, 63%, 49%)

HSB

hsb(62, 77%, 80%)

CMYK

cmyk(3%, 0%, 77%, 20%)

Oklch

oklch(81.5% 0.167 111.9)

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

#EEE713

Autumn Sage · Gold · Honey Gold

HEX

#EEE713

RGB

rgb(238, 231, 19)

HSL

hsl(58, 87%, 50%)

HSB

hsb(58, 92%, 93%)

CMYK

cmyk(0%, 3%, 92%, 7%)

Oklch

oklch(90.4% 0.192 107.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1A3246

472E1A

Analogous

1A4745

1A3246

1A1C47

Triadic

1A3246

471A33

33471A

Split-Comp.

1A3246

471A1C

47451A

Tetradic

1A3246

451A47

472E1A

1C471A

Contrast Matrix WCAG 2.1 Contrast

1A3246	3B4E5F	737768	C6CC2F	EEE713
—	1.5 Fail	2.9 Fail	7.6 AAA	10.1 AAA
1.5 Fail	—	1.9 Fail	4.9 AA	6.6 AA
2.9 Fail	1.9 Fail	—	2.6 Fail	3.5 AA Large
7.6 AAA	4.9 AA	2.6 Fail	—	1.3 Fail
10.1 AAA	6.6 AA	3.5 AA Large	1.3 Fail	—

White BG

13.2AAA

8.6AAA

4.6AA

1.7Fail

1.3Fail

Black BG

1.6Fail

2.4Fail

4.6AA

12.1AAA

16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242541

43435B

75756C

C9C955

EBEB46

Deuteranopia

232140

42415A

75746D

C8C85E

EBEC53

Tritanopia

1B3D3D

3C5857

736E6F

C6737A

EE6F78

Achromatopsia

2D2D2D

4A4A4A

747474

B8B8B8

D1D1D1

Shades & Tints Shades & Tints

#1A3246

Dark

Light

#3B4E5F

Dark

Light

#737768

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1a3246;
  --color-2: #3b4e5f;
  --color-3: #737768;
  --color-4: #c6cc2f;
  --color-5: #eee713;
}

SCSS

$color-1: #1a3246;
$color-2: #3b4e5f;
$color-3: #737768;
$color-4: #c6cc2f;
$color-5: #eee713;

TAILWIND

colors: {
  'brand-1': '#1a3246',
  'brand-2': '#3b4e5f',
  'brand-3': '#737768',
  'brand-4': '#c6cc2f',
  'brand-5': '#eee713',
}

RGB Array

[26, 50, 70], [59, 78, 95], [115, 119, 104], [198, 204, 47], [238, 231, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1A3246, #3B4E5F, #737768, #C6CC2F, #EEE713 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: #1a3246; --color-2: #3b4e5f; --color-3: #737768; --color-4: #c6cc2f; --color-5: #eee713. 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