#4B7C64 + #47605B + #234F5D + #0D2249 + #21325A · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4B7C64

Mineral Blue · SeaGreen · Forest Green

HEX

#4B7C64

RGB

rgb(75, 124, 100)

HSL

hsl(151, 25%, 39%)

HSB

hsb(151, 40%, 49%)

CMYK

cmyk(40%, 0%, 19%, 51%)

Oklch

oklch(54.4% 0.066 161.9)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#47605B

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#47605B

RGB

rgb(71, 96, 91)

HSL

hsl(168, 15%, 33%)

HSB

hsb(168, 26%, 38%)

CMYK

cmyk(26%, 0%, 5%, 62%)

Oklch

oklch(46.7% 0.031 181.2)

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

#234F5D

Slate Blue · DarkSlateGray · Peacock Green

HEX

#234F5D

RGB

rgb(35, 79, 93)

HSL

hsl(194, 45%, 25%)

HSB

hsb(194, 62%, 36%)

CMYK

cmyk(62%, 15%, 0%, 64%)

Oklch

oklch(40.3% 0.054 221.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#0D2249

Indigo · MidnightBlue · Deep Sea Blue

HEX

#0D2249

RGB

rgb(13, 34, 73)

HSL

hsl(219, 70%, 17%)

HSB

hsb(219, 82%, 29%)

CMYK

cmyk(82%, 53%, 0%, 71%)

Oklch

oklch(26.0% 0.078 261.5)

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

#21325A

Indigo · DarkSlateGray · Prussian Blue

HEX

#21325A

RGB

rgb(33, 50, 90)

HSL

hsl(222, 46%, 24%)

HSB

hsb(222, 63%, 35%)

CMYK

cmyk(63%, 44%, 0%, 65%)

Oklch

oklch(32.5% 0.075 265.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B7C64

7C4B63

Analogous

4B7C4B

4B7C64

4B7B7C

Triadic

4B7C64

644B7C

7C644B

Split-Comp.

4B7C64

7C4B7B

7C4B4B

Tetradic

4B7C64

4B4B7C

7C4B63

7B7C4B

Contrast Matrix WCAG 2.1 Contrast

4B7C64	47605B	234F5D	0D2249	21325A
—	1.4 Fail	1.9 Fail	3.3 AA Large	2.6 Fail
1.4 Fail	—	1.3 Fail	2.3 Fail	1.9 Fail
1.9 Fail	1.3 Fail	—	1.7 Fail	1.4 Fail
3.3 AA Large	2.3 Fail	1.7 Fail	—	1.2 Fail
2.6 Fail	1.9 Fail	1.4 Fail	1.2 Fail	—

White BG

4.8AA

6.8AA

8.9AAA

15.6AAA

12.6AAA

Black BG

4.4AA Large

3.1AA Large

2.3Fail

1.3Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

60616A

52525C

36365A

161640

282950

Deuteranopia

5D5A6B

504F5D

343059

15133D

27264E

Tritanopia

4D6E6F

485D5D

255756

0E3836

224947

Achromatopsia

6B6B6B

585858

434343

202020

313131

Shades & Tints Shades & Tints

#4B7C64

Dark

Light

#47605B

Dark

Light

#234F5D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b7c64;
  --color-2: #47605b;
  --color-3: #234f5d;
  --color-4: #0d2249;
  --color-5: #21325a;
}

SCSS

$color-1: #4b7c64;
$color-2: #47605b;
$color-3: #234f5d;
$color-4: #0d2249;
$color-5: #21325a;

TAILWIND

colors: {
  'brand-1': '#4b7c64',
  'brand-2': '#47605b',
  'brand-3': '#234f5d',
  'brand-4': '#0d2249',
  'brand-5': '#21325a',
}

RGB Array

[75, 124, 100], [71, 96, 91], [35, 79, 93], [13, 34, 73], [33, 50, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #4B7C64, #47605B, #234F5D, #0D2249, #21325A 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: #4b7c64; --color-2: #47605b; --color-3: #234f5d; --color-4: #0d2249; --color-5: #21325a. 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 sunset-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