← Back to Editor

#173148 · #2F6766 · #81B29F · #B9DDAF · #F8F3CD

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

#173148

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#173148
RGB
rgb(23, 49, 72)
HSL
hsl(208, 52%, 19%)
HSB
hsb(208, 68%, 28%)
CMYK
cmyk(68%, 32%, 0%, 72%)
Oklch
oklch(30.4% 0.053 247.2)

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

#2F6766

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#2F6766
RGB
rgb(47, 103, 102)
HSL
hsl(179, 37%, 29%)
HSB
hsb(179, 54%, 40%)
CMYK
cmyk(54%, 0%, 1%, 60%)
Oklch
oklch(47.6% 0.059 193.8)

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

#81B29F

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#81B29F
RGB
rgb(129, 178, 159)
HSL
hsl(157, 24%, 60%)
HSB
hsb(157, 28%, 70%)
CMYK
cmyk(28%, 0%, 11%, 30%)
Oklch
oklch(72.3% 0.059 168.7)

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

#B9DDAF

Celadon · Silver · Apple Green

HEX
#B9DDAF
RGB
rgb(185, 221, 175)
HSL
hsl(107, 40%, 78%)
HSB
hsb(107, 21%, 87%)
CMYK
cmyk(16%, 0%, 21%, 13%)
Oklch
oklch(85.9% 0.073 138.9)

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

#F8F3CD

Fresh Green · Beige · Lemon Cream

HEX
#F8F3CD
RGB
rgb(248, 243, 205)
HSL
hsl(53, 75%, 89%)
HSB
hsb(53, 17%, 97%)
CMYK
cmyk(0%, 2%, 17%, 3%)
Oklch
oklch(95.8% 0.050 101.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

173148
4A2F17

Analogous

174A48
173148
17194A

Triadic

173148
4A1732
324A17

Split-Comp.

173148
4A1719
4A4817

Tetradic

173148
48174A
4A2F17
194A17

Contrast Matrix WCAG 2.1 Contrast

173148
2F6766
81B29F
B9DDAF
F8F3CD
—
2.1
Fail
5.6
AA
8.9
AAA
11.9
AAA
2.1
Fail
—
2.7
Fail
4.3
AA Large
5.7
AA
5.6
AA
2.7
Fail
—
1.6
Fail
2.1
Fail
8.9
AAA
4.3
AA Large
1.6
Fail
—
1.3
Fail
11.9
AAA
5.7
AA
2.1
Fail
1.3
Fail
—
White BG
13.4AAA
6.5AA
2.4Fail
1.5Fail
1.1Fail
Black BG
1.6Fail
3.3AA Large
8.8AAA
14.0AAA
18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222242
474866
9697A4
C9C9BA
F6F6D6

Deuteranopia

211F41
444066
9390A5
C7C4BD
F6F7D8

Tritanopia

183E3D
326666
83A7A8
BBC3C5
F8DDDF

Achromatopsia

2C2C2C
565656
A1A1A1
CDCDCD
F0F0F0

Shades & Tints Shades & Tints

#173148

Dark
Light

#2F6766

Dark
Light

#81B29F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #173148;
  --color-2: #2f6766;
  --color-3: #81b29f;
  --color-4: #b9ddaf;
  --color-5: #f8f3cd;
}

SCSS

$color-1: #173148;
$color-2: #2f6766;
$color-3: #81b29f;
$color-4: #b9ddaf;
$color-5: #f8f3cd;

TAILWIND

colors: {
  'brand-1': '#173148',
  'brand-2': '#2f6766',
  'brand-3': '#81b29f',
  'brand-4': '#b9ddaf',
  'brand-5': '#f8f3cd',
}

RGB Array

[23, 49, 72], [47, 103, 102], [129, 178, 159], [185, 221, 175], [248, 243, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #173148, #2F6766, #81B29F, #B9DDAF, #F8F3CD 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: #173148; --color-2: #2f6766; --color-3: #81b29f; --color-4: #b9ddaf; --color-5: #f8f3cd. 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