← Back to Editor

#16142C · #30323E · #826F61 · #32B3A1 · #B1A188

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

#16142C

Deep Indigo · Black · Deep Sea Blue

HEX
#16142C
RGB
rgb(22, 20, 44)
HSL
hsl(245, 38%, 13%)
HSB
hsb(245, 55%, 17%)
CMYK
cmyk(50%, 55%, 0%, 83%)
Oklch
oklch(20.8% 0.047 285.4)

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

#30323E

Indigo · DarkSlateGray · Prussian Blue

HEX
#30323E
RGB
rgb(48, 50, 62)
HSL
hsl(231, 13%, 22%)
HSB
hsb(231, 23%, 24%)
CMYK
cmyk(23%, 19%, 0%, 76%)
Oklch
oklch(32.0% 0.022 277.7)

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

#826F61

Tangerine · DimGray · Amber Brown

HEX
#826F61
RGB
rgb(130, 111, 97)
HSL
hsl(25, 15%, 45%)
HSB
hsb(25, 25%, 51%)
CMYK
cmyk(0%, 15%, 25%, 49%)
Oklch
oklch(55.6% 0.032 58.4)

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

#32B3A1

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#32B3A1
RGB
rgb(50, 179, 161)
HSL
hsl(172, 56%, 45%)
HSB
hsb(172, 72%, 70%)
CMYK
cmyk(72%, 0%, 10%, 30%)
Oklch
oklch(69.4% 0.112 181.4)

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

#B1A188

Ginger · DarkGray · Warm Sun

HEX
#B1A188
RGB
rgb(177, 161, 136)
HSL
hsl(37, 21%, 61%)
HSB
hsb(37, 23%, 69%)
CMYK
cmyk(0%, 9%, 23%, 31%)
Oklch
oklch(71.6% 0.040 79.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

16142C
2C2E15

Analogous

151F2E
16142C
23152E

Triadic

16142C
2E1715
152E17

Split-Comp.

16142C
2E2315
1F2E15

Tetradic

16142C
2E151F
2C2E15
152E23

Contrast Matrix WCAG 2.1 Contrast

16142C
30323E
826F61
32B3A1
B1A188
—
1.4
Fail
3.8
AA Large
6.9
AA
7.1
AAA
1.4
Fail
—
2.7
Fail
4.9
AA
5.0
AA
3.8
AA Large
2.7
Fail
—
1.8
Fail
1.9
Fail
6.9
AA
4.9
AA
1.8
Fail
—
1.0
Fail
7.1
AAA
5.0
AA
1.9
Fail
1.0
Fail
—
White BG
17.9AAA
12.7AAA
4.8AA
2.6Fail
2.5Fail
Black BG
1.2Fail
1.7Fail
4.4AA Large
8.1AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

151526
31313B
7A7A64
6A6BA5
AAAA8E

Deuteranopia

151525
31313A
7B7C65
6259A6
ABAC90

Tritanopia

162221
303938
816768
38A9AA
B09394

Achromatopsia

171717
333333
737373
8A8A8A
A3A3A3

Shades & Tints Shades & Tints

#16142C

Dark
Light

#30323E

Dark
Light

#826F61

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #16142c;
  --color-2: #30323e;
  --color-3: #826f61;
  --color-4: #32b3a1;
  --color-5: #b1a188;
}

SCSS

$color-1: #16142c;
$color-2: #30323e;
$color-3: #826f61;
$color-4: #32b3a1;
$color-5: #b1a188;

TAILWIND

colors: {
  'brand-1': '#16142c',
  'brand-2': '#30323e',
  'brand-3': '#826f61',
  'brand-4': '#32b3a1',
  'brand-5': '#b1a188',
}

RGB Array

[22, 20, 44], [48, 50, 62], [130, 111, 97], [50, 179, 161], [177, 161, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #16142C, #30323E, #826F61, #32B3A1, #B1A188 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: #16142c; --color-2: #30323e; --color-3: #826f61; --color-4: #32b3a1; --color-5: #b1a188. 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