← Back to Editor

#102930 · #19373F · #274851 · #485A5A · #7E746A

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 ThemeCorporate

Color Details Color Details

#102930

Slate Blue · DarkSlateGray · Peacock Green

HEX
#102930
RGB
rgb(16, 41, 48)
HSL
hsl(193, 50%, 13%)
HSB
hsb(193, 67%, 19%)
CMYK
cmyk(67%, 15%, 0%, 81%)
Oklch
oklch(26.4% 0.033 218.5)

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

#19373F

Slate Blue · DarkSlateGray · Peacock Green

HEX
#19373F
RGB
rgb(25, 55, 63)
HSL
hsl(193, 43%, 17%)
HSB
hsb(193, 60%, 25%)
CMYK
cmyk(60%, 13%, 0%, 75%)
Oklch
oklch(31.7% 0.038 217.3)

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

#274851

Slate Blue · DarkSlateGray · Peacock Green

HEX
#274851
RGB
rgb(39, 72, 81)
HSL
hsl(193, 35%, 24%)
HSB
hsb(193, 52%, 32%)
CMYK
cmyk(52%, 11%, 0%, 68%)
Oklch
oklch(38.0% 0.042 217.3)

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

#485A5A

Slate Blue · DarkSlateGray · Mint Ice

HEX
#485A5A
RGB
rgb(72, 90, 90)
HSL
hsl(180, 11%, 32%)
HSB
hsb(180, 20%, 35%)
CMYK
cmyk(20%, 0%, 0%, 65%)
Oklch
oklch(45.3% 0.022 196.4)

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

#7E746A

Ochre · DimGray · Warm Gray

HEX
#7E746A
RGB
rgb(126, 116, 106)
HSL
hsl(30, 9%, 45%)
HSB
hsb(30, 16%, 49%)
CMYK
cmyk(0%, 8%, 16%, 51%)
Oklch
oklch(56.5% 0.020 67.4)

Traditional「Ochre」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

102930
321811

Analogous

113228
102930
111A32

Triadic

102930
32112B
2B3211

Split-Comp.

102930
32111A
322811

Tetradic

102930
281132
321811
1A3211

Contrast Matrix WCAG 2.1 Contrast

102930
19373F
274851
485A5A
7E746A
—
1.2
Fail
1.5
Fail
2.1
Fail
3.3
AA Large
1.2
Fail
—
1.3
Fail
1.7
Fail
2.8
Fail
1.5
Fail
1.3
Fail
—
1.4
Fail
2.2
Fail
2.1
Fail
1.7
Fail
1.4
Fail
—
1.6
Fail
3.3
AA Large
2.8
Fail
2.2
Fail
1.6
Fail
—
White BG
15.2AAA
12.7AAA
9.8AAA
7.3AAA
4.6AA
Black BG
1.4Fail
1.7Fail
2.1Fail
2.9Fail
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1B2E
26263D
35364F
50505A
7A7A6C

Deuteranopia

19182E
24223D
33314E
4F4D5A
7A7B6D

Tritanopia

112D2D
1B3C3B
294D4D
495A5A
7D6E6F

Achromatopsia

222222
2F2F2F
3F3F3F
555555
767676

Shades & Tints Shades & Tints

#102930

Dark
Light

#19373F

Dark
Light

#274851

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #102930;
  --color-2: #19373f;
  --color-3: #274851;
  --color-4: #485a5a;
  --color-5: #7e746a;
}

SCSS

$color-1: #102930;
$color-2: #19373f;
$color-3: #274851;
$color-4: #485a5a;
$color-5: #7e746a;

TAILWIND

colors: {
  'brand-1': '#102930',
  'brand-2': '#19373f',
  'brand-3': '#274851',
  'brand-4': '#485a5a',
  'brand-5': '#7e746a',
}

RGB Array

[16, 41, 48], [25, 55, 63], [39, 72, 81], [72, 90, 90], [126, 116, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #102930, #19373F, #274851, #485A5A, #7E746A is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. 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: #102930; --color-2: #19373f; --color-3: #274851; --color-4: #485a5a; --color-5: #7e746a. 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 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