#1D1C38 + #1E2E4A + #A36B58 + #C4771F + #F59326 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1D1C38

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX

#1D1C38

RGB

rgb(29, 28, 56)

HSL

hsl(242, 33%, 16%)

HSB

hsb(242, 50%, 22%)

CMYK

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

Oklch

oklch(24.3% 0.053 283.4)

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

#1E2E4A

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#1E2E4A

RGB

rgb(30, 46, 74)

HSL

hsl(218, 42%, 20%)

HSB

hsb(218, 59%, 29%)

CMYK

cmyk(59%, 38%, 0%, 71%)

Oklch

oklch(30.2% 0.055 261.0)

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

#A36B58

Tangerine · Sienna · Amber Brown

HEX

#A36B58

RGB

rgb(163, 107, 88)

HSL

hsl(15, 30%, 49%)

HSB

hsb(15, 46%, 64%)

CMYK

cmyk(0%, 34%, 46%, 36%)

Oklch

oklch(58.3% 0.078 39.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#C4771F

Ochre · Chocolate · Amber Brown

HEX

#C4771F

RGB

rgb(196, 119, 31)

HSL

hsl(32, 73%, 45%)

HSB

hsb(32, 84%, 77%)

CMYK

cmyk(0%, 39%, 84%, 23%)

Oklch

oklch(63.9% 0.135 63.2)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#F59326

Ginger · GoldenRod · Warm Sun

HEX

#F59326

RGB

rgb(245, 147, 38)

HSL

hsl(32, 91%, 55%)

HSB

hsb(32, 84%, 96%)

CMYK

cmyk(0%, 40%, 84%, 4%)

Oklch

oklch(75.0% 0.162 61.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1D1C38

35361B

Analogous

1B2836

1D1C38

2A1B36

Triadic

1D1C38

361C1B

1B361C

Split-Comp.

1D1C38

362A1B

28361B

Tetradic

1D1C38

361B28

35361B

1B362A

Contrast Matrix WCAG 2.1 Contrast

1D1C38	1E2E4A	A36B58	C4771F	F59326
—	1.2 Fail	3.8 AA Large	4.7 AA	7.1 AAA
1.2 Fail	—	3.1 AA Large	3.9 AA Large	5.9 AA
3.8 AA Large	3.1 AA Large	—	1.3 Fail	1.9 Fail
4.7 AA	3.9 AA Large	1.3 Fail	—	1.5 Fail
7.1 AAA	5.9 AA	1.9 Fail	1.5 Fail	—

White BG

16.5AAA

13.6AAA

4.4AA Large

3.5AA Large

2.3Fail

Black BG

1.3Fail

1.5Fail

4.8AA

6.0AA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1D1D31

252543

8B8A5D

A3A234

CBCA40

Deuteranopia

1D1D30

242342

8E925E

A7AD39

D0D847

Tritanopia

1D2C2B

1F3E3D

A06061

C04549

F0555A

Achromatopsia

1F1F1F

2C2C2C

7A7A7A

848484

A4A4A4

Shades & Tints Shades & Tints

#1D1C38

Dark

Light

#1E2E4A

Dark

Light

#A36B58

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1d1c38;
  --color-2: #1e2e4a;
  --color-3: #a36b58;
  --color-4: #c4771f;
  --color-5: #f59326;
}

SCSS

$color-1: #1d1c38;
$color-2: #1e2e4a;
$color-3: #a36b58;
$color-4: #c4771f;
$color-5: #f59326;

TAILWIND

colors: {
  'brand-1': '#1d1c38',
  'brand-2': '#1e2e4a',
  'brand-3': '#a36b58',
  'brand-4': '#c4771f',
  'brand-5': '#f59326',
}

RGB Array

[29, 28, 56], [30, 46, 74], [163, 107, 88], [196, 119, 31], [245, 147, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #1D1C38, #1E2E4A, #A36B58, #C4771F, #F59326 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: #1d1c38; --color-2: #1e2e4a; --color-3: #a36b58; --color-4: #c4771f; --color-5: #f59326. 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