← Back to Editor

#161A23 · #2A445F · #477887 · #C3D9C4 · #F4F8C6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#161A23

Indigo · Black · Deep Sea Blue

HEX
#161A23
RGB
rgb(22, 26, 35)
HSL
hsl(222, 23%, 11%)
HSB
hsb(222, 37%, 14%)
CMYK
cmyk(37%, 26%, 0%, 86%)
Oklch
oklch(21.8% 0.019 266.1)

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

#2A445F

Indigo · DarkSlateGray · Prussian Blue

HEX
#2A445F
RGB
rgb(42, 68, 95)
HSL
hsl(211, 39%, 27%)
HSB
hsb(211, 56%, 37%)
CMYK
cmyk(56%, 28%, 0%, 63%)
Oklch
oklch(37.8% 0.056 250.4)

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

#477887

Slate Blue · SlateGray · Mint Ice

HEX
#477887
RGB
rgb(71, 120, 135)
HSL
hsl(194, 31%, 40%)
HSB
hsb(194, 47%, 53%)
CMYK
cmyk(47%, 11%, 0%, 47%)
Oklch
oklch(54.4% 0.058 219.5)

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

#C3D9C4

Celadon · LightGray · Mint Green

HEX
#C3D9C4
RGB
rgb(195, 217, 196)
HSL
hsl(123, 22%, 81%)
HSB
hsb(123, 10%, 85%)
CMYK
cmyk(10%, 0%, 10%, 15%)
Oklch
oklch(86.3% 0.037 146.5)

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

#F4F8C6

Fresh Green · Beige · Lemon Cream

HEX
#F4F8C6
RGB
rgb(244, 248, 198)
HSL
hsl(65, 78%, 87%)
HSB
hsb(65, 20%, 97%)
CMYK
cmyk(2%, 0%, 20%, 3%)
Oklch
oklch(96.4% 0.065 111.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

161A23
231F16

Analogous

162023
161A23
181623

Triadic

161A23
231619
192316

Split-Comp.

161A23
231816
202316

Tetradic

161A23
231620
231F16
162318

Contrast Matrix WCAG 2.1 Contrast

161A23
2A445F
477887
C3D9C4
F4F8C6
—
1.7
Fail
3.6
AA Large
11.6
AAA
15.8
AAA
1.7
Fail
—
2.1
Fail
6.7
AA
9.1
AAA
3.6
AA Large
2.1
Fail
—
3.3
AA Large
4.4
AA Large
11.6
AAA
6.7
AA
3.3
AA Large
—
1.4
Fail
15.8
AAA
9.1
AAA
4.4
AA Large
1.4
Fail
—
White BG
17.4AAA
10.0AAA
4.9AA
1.5Fail
1.1Fail
Black BG
1.2Fail
2.1Fail
4.3AA Large
14.0AAA
19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

181821
353558
5C5D83
CDCDC9
F6F6D2

Deuteranopia

181720
343257
595683
CBCACA
F6F5D5

Tritanopia

161F1F
2B5352
498180
C4CDCE
F4DCDE

Achromatopsia

1A1A1A
3F3F3F
6B6B6B
D0D0D0
F1F1F1

Shades & Tints Shades & Tints

#161A23

Dark
Light

#2A445F

Dark
Light

#477887

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #161a23;
  --color-2: #2a445f;
  --color-3: #477887;
  --color-4: #c3d9c4;
  --color-5: #f4f8c6;
}

SCSS

$color-1: #161a23;
$color-2: #2a445f;
$color-3: #477887;
$color-4: #c3d9c4;
$color-5: #f4f8c6;

TAILWIND

colors: {
  'brand-1': '#161a23',
  'brand-2': '#2a445f',
  'brand-3': '#477887',
  'brand-4': '#c3d9c4',
  'brand-5': '#f4f8c6',
}

RGB Array

[22, 26, 35], [42, 68, 95], [71, 120, 135], [195, 217, 196], [244, 248, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #161A23, #2A445F, #477887, #C3D9C4, #F4F8C6 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: #161a23; --color-2: #2a445f; --color-3: #477887; --color-4: #c3d9c4; --color-5: #f4f8c6. 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