← Back to Editor

#102C42 · #164050 · #1B5C60 · #629E84 · #D3CC9E

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

#102C42

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#102C42
RGB
rgb(16, 44, 66)
HSL
hsl(206, 61%, 16%)
HSB
hsb(206, 76%, 26%)
CMYK
cmyk(76%, 33%, 0%, 74%)
Oklch
oklch(28.3% 0.053 245.0)

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

#164050

Lake Blue · DarkSlateGray · Peacock Green

HEX
#164050
RGB
rgb(22, 64, 80)
HSL
hsl(197, 57%, 20%)
HSB
hsb(197, 73%, 31%)
CMYK
cmyk(72%, 20%, 0%, 69%)
Oklch
oklch(35.0% 0.054 226.6)

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

#1B5C60

Lake Blue · DarkSlateGray · Peacock Green

HEX
#1B5C60
RGB
rgb(27, 92, 96)
HSL
hsl(183, 56%, 24%)
HSB
hsb(183, 72%, 38%)
CMYK
cmyk(72%, 4%, 0%, 62%)
Oklch
oklch(43.7% 0.064 201.0)

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

#629E84

Mineral Blue · CadetBlue · Olive Green

HEX
#629E84
RGB
rgb(98, 158, 132)
HSL
hsl(154, 24%, 50%)
HSB
hsb(154, 38%, 62%)
CMYK
cmyk(38%, 0%, 16%, 38%)
Oklch
oklch(65.1% 0.074 165.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#D3CC9E

Fresh Green · Tan · Sunflower

HEX
#D3CC9E
RGB
rgb(211, 204, 158)
HSL
hsl(52, 38%, 72%)
HSB
hsb(52, 25%, 83%)
CMYK
cmyk(0%, 3%, 25%, 17%)
Oklch
oklch(83.9% 0.061 100.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

102C42
422510

Analogous

10423E
102C42
101342

Triadic

102C42
42102C
2C4210

Split-Comp.

102C42
421013
423E10

Tetradic

102C42
3E1042
422510
134210

Contrast Matrix WCAG 2.1 Contrast

102C42
164050
1B5C60
629E84
D3CC9E
—
1.3
Fail
1.9
Fail
4.6
AA
8.8
AAA
1.3
Fail
—
1.5
Fail
3.6
AA Large
6.8
AA
1.9
Fail
1.5
Fail
—
2.5
Fail
4.7
AA
4.6
AA
3.6
AA Large
2.5
Fail
—
1.9
Fail
8.8
AAA
6.8
AA
4.7
AA
1.9
Fail
—
White BG
14.4AAA
11.2AAA
7.6AAA
3.1AA Large
1.6Fail
Black BG
1.5Fail
1.9Fail
2.7Fail
6.7AA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1C1C3D
28294C
37385F
7C7D8A
D0D0A9

Deuteranopia

1B183B
26234B
332F5F
79748C
D0D1AC

Tritanopia

113838
184948
1E5E5E
658F90
D3B2B4

Achromatopsia

262626
353535
494949
898989
C9C9C9

Shades & Tints Shades & Tints

#102C42

Dark
Light

#164050

Dark
Light

#1B5C60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #102c42;
  --color-2: #164050;
  --color-3: #1b5c60;
  --color-4: #629e84;
  --color-5: #d3cc9e;
}

SCSS

$color-1: #102c42;
$color-2: #164050;
$color-3: #1b5c60;
$color-4: #629e84;
$color-5: #d3cc9e;

TAILWIND

colors: {
  'brand-1': '#102c42',
  'brand-2': '#164050',
  'brand-3': '#1b5c60',
  'brand-4': '#629e84',
  'brand-5': '#d3cc9e',
}

RGB Array

[16, 44, 66], [22, 64, 80], [27, 92, 96], [98, 158, 132], [211, 204, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #102C42, #164050, #1B5C60, #629E84, #D3CC9E is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #102c42; --color-2: #164050; --color-3: #1b5c60; --color-4: #629e84; --color-5: #d3cc9e. 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 tech, SaaS, healthcare, eco industries. 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