#1C476A + #335A61 + #598166 + #387053 + #8B8053 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1C476A

Lake Blue · DarkSlateGray · Prussian Blue

HEX

#1C476A

RGB

rgb(28, 71, 106)

HSL

hsl(207, 58%, 26%)

HSB

hsb(207, 74%, 42%)

CMYK

cmyk(74%, 33%, 0%, 58%)

Oklch

oklch(38.6% 0.076 246.2)

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

#335A61

Slate Blue · DarkSlateGray · Mint Ice

HEX

#335A61

RGB

rgb(51, 90, 97)

HSL

hsl(189, 31%, 29%)

HSB

hsb(189, 47%, 38%)

CMYK

cmyk(47%, 7%, 0%, 62%)

Oklch

oklch(44.2% 0.046 210.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#598166

Celadon · DimGray · Olive Green

HEX

#598166

RGB

rgb(89, 129, 102)

HSL

hsl(140, 18%, 43%)

HSB

hsb(140, 31%, 51%)

CMYK

cmyk(31%, 0%, 21%, 49%)

Oklch

oklch(56.6% 0.061 154.5)

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

#387053

Celadon · SeaGreen · Forest Green

HEX

#387053

RGB

rgb(56, 112, 83)

HSL

hsl(149, 33%, 33%)

HSB

hsb(149, 50%, 44%)

CMYK

cmyk(50%, 0%, 26%, 56%)

Oklch

oklch(49.8% 0.076 159.3)

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

#8B8053

Ochre · Gray · Honey Gold

HEX

#8B8053

RGB

rgb(139, 128, 83)

HSL

hsl(48, 25%, 44%)

HSB

hsb(48, 40%, 55%)

CMYK

cmyk(0%, 8%, 40%, 45%)

Oklch

oklch(59.9% 0.064 96.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1C476A

693E1C

Analogous

1C6965

1C476A

1C2069

Triadic

1C476A

691C46

46691C

Split-Comp.

1C476A

691C20

69651C

Tetradic

1C476A

651C69

693E1C

20691C

Contrast Matrix WCAG 2.1 Contrast

1C476A	335A61	598166	387053	8B8053
—	1.3 Fail	2.2 Fail	1.7 Fail	2.5 Fail
1.3 Fail	—	1.7 Fail	1.3 Fail	1.9 Fail
2.2 Fail	1.7 Fail	—	1.3 Fail	1.1 Fail
1.7 Fail	1.3 Fail	1.3 Fail	—	1.5 Fail
2.5 Fail	1.9 Fail	1.1 Fail	1.5 Fail	—

White BG

9.7AAA

7.6AAA

4.4AA Large

5.8AA

4.0AA Large

Black BG

2.2Fail

2.8Fail

4.8AA

3.6AA Large

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F62

44445F

6A6B6D

50515A

86865E

Deuteranopia

2C295F

423F5F

68656E

4D495C

878861

Tritanopia

1E5B59

355E5E

5B7273

3B6061

8A6668

Achromatopsia

3E3E3E

4F4F4F

727272

5C5C5C

7E7E7E

Shades & Tints Shades & Tints

#1C476A

Dark

Light

#335A61

Dark

Light

#598166

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1c476a;
  --color-2: #335a61;
  --color-3: #598166;
  --color-4: #387053;
  --color-5: #8b8053;
}

SCSS

$color-1: #1c476a;
$color-2: #335a61;
$color-3: #598166;
$color-4: #387053;
$color-5: #8b8053;

TAILWIND

colors: {
  'brand-1': '#1c476a',
  'brand-2': '#335a61',
  'brand-3': '#598166',
  'brand-4': '#387053',
  'brand-5': '#8b8053',
}

RGB Array

[28, 71, 106], [51, 90, 97], [89, 129, 102], [56, 112, 83], [139, 128, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1C476A, #335A61, #598166, #387053, #8B8053 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: #1c476a; --color-2: #335a61; --color-3: #598166; --color-4: #387053; --color-5: #8b8053. 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