← Back to Editor

#1A181C · #302536 · #503E59 · #D4C657 · #EFF0D8

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#1A181C

Dark Plum · Black · Jet Black

HEX
#1A181C
RGB
rgb(26, 24, 28)
HSL
hsl(270, 8%, 10%)
HSB
hsb(270, 14%, 11%)
CMYK
cmyk(7%, 14%, 0%, 89%)
Oklch
oklch(21.3% 0.008 308.0)

Traditional「Dark Plum」· Paint「Jet Black」· Creative Midnight Shadow

#302536

Dark Plum · DarkSlateGray · Dark Purple

HEX
#302536
RGB
rgb(48, 37, 54)
HSL
hsl(279, 19%, 18%)
HSB
hsb(279, 31%, 21%)
CMYK
cmyk(11%, 31%, 0%, 79%)
Oklch
oklch(28.5% 0.034 313.4)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#503E59

Dark Plum · DarkSlateGray · Eggplant

HEX
#503E59
RGB
rgb(80, 62, 89)
HSL
hsl(280, 18%, 30%)
HSB
hsb(280, 30%, 35%)
CMYK
cmyk(10%, 30%, 0%, 65%)
Oklch
oklch(39.4% 0.050 314.2)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#D4C657

Autumn Sage · SandyBrown · Sunflower

HEX
#D4C657
RGB
rgb(212, 198, 87)
HSL
hsl(53, 59%, 59%)
HSB
hsb(53, 59%, 83%)
CMYK
cmyk(0%, 7%, 59%, 17%)
Oklch
oklch(81.7% 0.132 102.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#EFF0D8

Fresh Green · Beige · Lemon Cream

HEX
#EFF0D8
RGB
rgb(239, 240, 216)
HSL
hsl(62, 44%, 89%)
HSB
hsb(62, 10%, 94%)
CMYK
cmyk(0%, 0%, 10%, 6%)
Oklch
oklch(94.8% 0.032 108.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1A181C
1A1C17

Analogous

17171C
1A181C
1C171C

Triadic

1A181C
1C1A17
171C1A

Split-Comp.

1A181C
1C1C17
171C17

Tetradic

1A181C
1C1717
1A1C17
171C1C

Contrast Matrix WCAG 2.1 Contrast

1A181C
302536
503E59
D4C657
EFF0D8
—
1.2
Fail
1.8
Fail
10.1
AAA
15.2
AAA
1.2
Fail
—
1.5
Fail
8.3
AAA
12.6
AAA
1.8
Fail
1.5
Fail
—
5.5
AA
8.3
AAA
10.1
AAA
8.3
AAA
5.5
AA
—
1.5
Fail
15.2
AAA
12.6
AAA
8.3
AAA
1.5
Fail
—
White BG
17.6AAA
14.5AAA
9.7AAA
1.7Fail
1.2Fail
Black BG
1.2Fail
1.4Fail
2.2Fail
12.0AAA
18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

19191B
2B2B32
484852
CECE72
EFEFDE

Deuteranopia

19191B
2C2D31
494B51
CFD078
EFEFDF

Tritanopia

1A1A1A
2F2F2E
4F4D4C
D3878C
EFE2E3

Achromatopsia

191919
2A2A2A
464646
BEBEBE
EDEDED

Shades & Tints Shades & Tints

#1A181C

Dark
Light

#302536

Dark
Light

#503E59

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1a181c;
  --color-2: #302536;
  --color-3: #503e59;
  --color-4: #d4c657;
  --color-5: #eff0d8;
}

SCSS

$color-1: #1a181c;
$color-2: #302536;
$color-3: #503e59;
$color-4: #d4c657;
$color-5: #eff0d8;

TAILWIND

colors: {
  'brand-1': '#1a181c',
  'brand-2': '#302536',
  'brand-3': '#503e59',
  'brand-4': '#d4c657',
  'brand-5': '#eff0d8',
}

RGB Array

[26, 24, 28], [48, 37, 54], [80, 62, 89], [212, 198, 87], [239, 240, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1A181C, #302536, #503E59, #D4C657, #EFF0D8 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #1a181c; --color-2: #302536; --color-3: #503e59; --color-4: #d4c657; --color-5: #eff0d8. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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