← Back to Editor

#163627 · #4C698C · #A5C2AF · #D3EA5A · #D65CCB

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

#163627

Mineral Blue · DarkSlateGray · Dark Green

HEX
#163627
RGB
rgb(22, 54, 39)
HSL
hsl(152, 42%, 15%)
HSB
hsb(152, 59%, 21%)
CMYK
cmyk(59%, 0%, 28%, 79%)
Oklch
oklch(30.3% 0.047 161.4)

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

#4C698C

Indigo · SlateGray · Navy Blue

HEX
#4C698C
RGB
rgb(76, 105, 140)
HSL
hsl(213, 30%, 42%)
HSB
hsb(213, 46%, 55%)
CMYK
cmyk(46%, 25%, 0%, 45%)
Oklch
oklch(51.3% 0.066 253.6)

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

#A5C2AF

Celadon · DarkGray · Apple Green

HEX
#A5C2AF
RGB
rgb(165, 194, 175)
HSL
hsl(141, 19%, 70%)
HSB
hsb(141, 15%, 76%)
CMYK
cmyk(15%, 0%, 10%, 24%)
Oklch
oklch(78.7% 0.041 156.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D3EA5A

Willow Green · Khaki · Apple Green

HEX
#D3EA5A
RGB
rgb(211, 234, 90)
HSL
hsl(70, 77%, 64%)
HSB
hsb(70, 62%, 92%)
CMYK
cmyk(10%, 0%, 62%, 8%)
Oklch
oklch(89.3% 0.169 117.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D65CCB

Rose Purple · Orchid · Violet

HEX
#D65CCB
RGB
rgb(214, 92, 203)
HSL
hsl(305, 60%, 60%)
HSB
hsb(305, 57%, 84%)
CMYK
cmyk(0%, 57%, 5%, 16%)
Oklch
oklch(66.6% 0.200 331.2)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

163627
361625

Analogous

163617
163627
163536

Triadic

163627
271636
362716

Split-Comp.

163627
361635
361716

Tetradic

163627
171636
361625
353616

Contrast Matrix WCAG 2.1 Contrast

163627
4C698C
A5C2AF
D3EA5A
D65CCB
—
2.3
Fail
6.9
AA
9.9
AAA
3.9
AA Large
2.3
Fail
—
3.0
Fail
4.2
AA Large
1.7
Fail
6.9
AA
3.0
Fail
—
1.4
Fail
1.7
Fail
9.9
AAA
4.2
AA Large
1.4
Fail
—
2.5
Fail
3.9
AA Large
1.7
Fail
1.7
Fail
2.5
Fail
—
White BG
13.2AAA
5.7AA
1.9Fail
1.3Fail
3.4AA Large
Black BG
1.6Fail
3.7AA Large
10.9AAA
15.7AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

24242B
595984
B2B2B4
DDDD7D
A1A0B0

Deuteranopia

22202C
575582
B0AEB5
DCDA85
A8B1AA

Tritanopia

182D2E
4D7D7B
A6B7B8
D4989E
D09B96

Achromatopsia

2B2B2B
646464
B7B7B7
D3D3D3
8D8D8D

Shades & Tints Shades & Tints

#163627

Dark
Light

#4C698C

Dark
Light

#A5C2AF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #163627;
  --color-2: #4c698c;
  --color-3: #a5c2af;
  --color-4: #d3ea5a;
  --color-5: #d65ccb;
}

SCSS

$color-1: #163627;
$color-2: #4c698c;
$color-3: #a5c2af;
$color-4: #d3ea5a;
$color-5: #d65ccb;

TAILWIND

colors: {
  'brand-1': '#163627',
  'brand-2': '#4c698c',
  'brand-3': '#a5c2af',
  'brand-4': '#d3ea5a',
  'brand-5': '#d65ccb',
}

RGB Array

[22, 54, 39], [76, 105, 140], [165, 194, 175], [211, 234, 90], [214, 92, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #163627, #4C698C, #A5C2AF, #D3EA5A, #D65CCB is ideal for: 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: #163627; --color-2: #4c698c; --color-3: #a5c2af; --color-4: #d3ea5a; --color-5: #d65ccb. 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. 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