← Back to Editor

#1B1728 · #344348 · #448076 · #7E9569 · #AFAB86

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#1B1728

Deep Indigo · Black · Deep Sea Blue

HEX
#1B1728
RGB
rgb(27, 23, 40)
HSL
hsl(254, 27%, 12%)
HSB
hsb(254, 43%, 16%)
CMYK
cmyk(33%, 42%, 0%, 84%)
Oklch
oklch(21.8% 0.033 294.3)

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

#344348

Slate Blue · DarkSlateGray · Peacock Green

HEX
#344348
RGB
rgb(52, 67, 72)
HSL
hsl(195, 16%, 24%)
HSB
hsb(195, 28%, 28%)
CMYK
cmyk(28%, 7%, 0%, 72%)
Oklch
oklch(37.2% 0.021 220.1)

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

#448076

Mineral Blue · SeaGreen · Mint Ice

HEX
#448076
RGB
rgb(68, 128, 118)
HSL
hsl(170, 31%, 38%)
HSB
hsb(170, 47%, 50%)
CMYK
cmyk(47%, 0%, 8%, 50%)
Oklch
oklch(55.6% 0.065 181.8)

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

#7E9569

Celadon · Gray · Olive Green

HEX
#7E9569
RGB
rgb(126, 149, 105)
HSL
hsl(91, 17%, 50%)
HSB
hsb(91, 30%, 58%)
CMYK
cmyk(15%, 0%, 30%, 42%)
Oklch
oklch(64.0% 0.068 130.6)

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

#AFAB86

Fresh Green · DarkGray · Sunflower

HEX
#AFAB86
RGB
rgb(175, 171, 134)
HSL
hsl(54, 20%, 61%)
HSB
hsb(54, 23%, 69%)
CMYK
cmyk(0%, 2%, 23%, 31%)
Oklch
oklch(73.5% 0.051 102.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1B1728
232716

Analogous

161B27
1B1728
221627

Triadic

1B1728
271A16
16271A

Split-Comp.

1B1728
272216
1B2716

Tetradic

1B1728
27161B
232716
162722

Contrast Matrix WCAG 2.1 Contrast

1B1728
344348
448076
7E9569
AFAB86
—
1.7
Fail
3.8
AA Large
5.3
AA
7.5
AAA
1.7
Fail
—
2.2
Fail
3.1
AA Large
4.4
AA Large
3.8
AA Large
2.2
Fail
—
1.4
Fail
2.0
Fail
5.3
AA
3.1
AA Large
1.4
Fail
—
1.4
Fail
7.5
AAA
4.4
AA Large
2.0
Fail
1.4
Fail
—
White BG
17.5AAA
10.3AAA
4.6AA
3.3AA Large
2.3Fail
Black BG
1.2Fail
2.0Fail
4.6AA
6.4AA
9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

191924
3A3B47
5E5F78
888874
ADAD8F

Deuteranopia

1A1A23
3A3947
5B5679
878576
AEAE91

Tritanopia

1B2120
354646
477A7B
7F7C7E
AF9698

Achromatopsia

1A1A1A
3F3F3F
6D6D6D
898989
A8A8A8

Shades & Tints Shades & Tints

#1B1728

Dark
Light

#344348

Dark
Light

#448076

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1b1728;
  --color-2: #344348;
  --color-3: #448076;
  --color-4: #7e9569;
  --color-5: #afab86;
}

SCSS

$color-1: #1b1728;
$color-2: #344348;
$color-3: #448076;
$color-4: #7e9569;
$color-5: #afab86;

TAILWIND

colors: {
  'brand-1': '#1b1728',
  'brand-2': '#344348',
  'brand-3': '#448076',
  'brand-4': '#7e9569',
  'brand-5': '#afab86',
}

RGB Array

[27, 23, 40], [52, 67, 72], [68, 128, 118], [126, 149, 105], [175, 171, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1B1728, #344348, #448076, #7E9569, #AFAB86 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #1b1728; --color-2: #344348; --color-3: #448076; --color-4: #7e9569; --color-5: #afab86. 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. 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 finance, legal, luxury 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