← Back to Editor

#18162B · #C98F8F · #BBB1A7 · #D3D3D4 · #C2E9E9

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#18162B

Deep Indigo · Black · Deep Sea Blue

HEX
#18162B
RGB
rgb(24, 22, 43)
HSL
hsl(246, 32%, 13%)
HSB
hsb(246, 49%, 17%)
CMYK
cmyk(44%, 49%, 0%, 83%)
Oklch
oklch(21.4% 0.041 286.8)

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

#C98F8F

Peach Pink · Tan · Coral Red

HEX
#C98F8F
RGB
rgb(201, 143, 143)
HSL
hsl(0, 35%, 67%)
HSB
hsb(0, 29%, 79%)
CMYK
cmyk(0%, 29%, 29%, 21%)
Oklch
oklch(70.7% 0.071 19.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#BBB1A7

Ginger · DarkGray · Warm Sun

HEX
#BBB1A7
RGB
rgb(187, 177, 167)
HSL
hsl(30, 13%, 69%)
HSB
hsb(30, 11%, 73%)
CMYK
cmyk(0%, 5%, 11%, 27%)
Oklch
oklch(76.6% 0.018 67.6)

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

#D3D3D4

Silver Gray · LightGray · Pearl Gray

HEX
#D3D3D4
RGB
rgb(211, 211, 212)
HSL
hsl(240, 1%, 83%)
HSB
hsb(240, 0%, 83%)
CMYK
cmyk(0%, 0%, 0%, 17%)
Oklch
oklch(86.7% 0.001 286.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#C2E9E9

Sky Blue · LightBlue · Glacier Blue

HEX
#C2E9E9
RGB
rgb(194, 233, 233)
HSL
hsl(180, 47%, 84%)
HSB
hsb(180, 17%, 91%)
CMYK
cmyk(17%, 0%, 0%, 9%)
Oklch
oklch(90.6% 0.041 196.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

18162B
2A2C17

Analogous

171F2C
18162B
23172C

Triadic

18162B
2C1917
172C19

Split-Comp.

18162B
2C2317
1F2C17

Tetradic

18162B
2C171F
2A2C17
172C23

Contrast Matrix WCAG 2.1 Contrast

18162B
C98F8F
BBB1A7
D3D3D4
C2E9E9
—
6.6
AA
8.4
AAA
11.8
AAA
13.6
AAA
6.6
AA
—
1.3
Fail
1.8
Fail
2.1
Fail
8.4
AAA
1.3
Fail
—
1.4
Fail
1.6
Fail
11.8
AAA
1.8
Fail
1.4
Fail
—
1.1
Fail
13.6
AAA
2.1
Fail
1.6
Fail
1.1
Fail
—
White BG
17.7AAA
2.7Fail
2.1Fail
1.5Fail
1.3Fail
Black BG
1.2Fail
7.8AAA
10.0AAA
14.0AAA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171726
B0AF8F
B7B7A9
D3D3D4
D3D3E9

Deuteranopia

171725
B3B88F
B7B8AA
D3D3D4
D1CEE9

Tritanopia

182221
C68F8F
BBABAC
D3D4D4
C4E9E9

Achromatopsia

191919
A0A0A0
B3B3B3
D3D3D3
DDDDDD

Shades & Tints Shades & Tints

#18162B

Dark
Light

#C98F8F

Dark
Light

#BBB1A7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #18162b;
  --color-2: #c98f8f;
  --color-3: #bbb1a7;
  --color-4: #d3d3d4;
  --color-5: #c2e9e9;
}

SCSS

$color-1: #18162b;
$color-2: #c98f8f;
$color-3: #bbb1a7;
$color-4: #d3d3d4;
$color-5: #c2e9e9;

TAILWIND

colors: {
  'brand-1': '#18162b',
  'brand-2': '#c98f8f',
  'brand-3': '#bbb1a7',
  'brand-4': '#d3d3d4',
  'brand-5': '#c2e9e9',
}

RGB Array

[24, 22, 43], [201, 143, 143], [187, 177, 167], [211, 211, 212], [194, 233, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #18162B, #C98F8F, #BBB1A7, #D3D3D4, #C2E9E9 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: #18162b; --color-2: #c98f8f; --color-3: #bbb1a7; --color-4: #d3d3d4; --color-5: #c2e9e9. 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