← Back to Editor

#072D3B · #186667 · #21946D · #88B587 · #BDD3B5

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

#072D3B

Lake Blue · DarkSlateGray · Peacock Green

HEX
#072D3B
RGB
rgb(7, 45, 59)
HSL
hsl(196, 79%, 13%)
HSB
hsb(196, 88%, 23%)
CMYK
cmyk(88%, 24%, 0%, 77%)
Oklch
oklch(27.9% 0.048 227.5)

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

#186667

Lake Blue · DarkSlateGray · Peacock Green

HEX
#186667
RGB
rgb(24, 102, 103)
HSL
hsl(181, 62%, 25%)
HSB
hsb(181, 77%, 40%)
CMYK
cmyk(77%, 1%, 0%, 60%)
Oklch
oklch(46.6% 0.072 196.3)

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

#21946D

Mineral Blue · SeaGreen · Mint Ice

HEX
#21946D
RGB
rgb(33, 148, 109)
HSL
hsl(160, 64%, 35%)
HSB
hsb(160, 78%, 58%)
CMYK
cmyk(78%, 0%, 26%, 42%)
Oklch
oklch(59.5% 0.116 164.8)

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

#88B587

Celadon · DarkSeaGreen · Apple Green

HEX
#88B587
RGB
rgb(136, 181, 135)
HSL
hsl(119, 24%, 62%)
HSB
hsb(119, 25%, 71%)
CMYK
cmyk(25%, 0%, 25%, 29%)
Oklch
oklch(72.8% 0.081 144.2)

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

#BDD3B5

Celadon · Silver · Apple Green

HEX
#BDD3B5
RGB
rgb(189, 211, 181)
HSL
hsl(104, 25%, 77%)
HSB
hsb(104, 14%, 83%)
CMYK
cmyk(10%, 0%, 14%, 17%)
Oklch
oklch(84.2% 0.047 137.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

072D3B
3B1507

Analogous

073B2F
072D3B
07133B

Triadic

072D3B
3B072D
2D3B07

Split-Comp.

072D3B
3B0713
3B2F07

Tetradic

072D3B
2F073B
3B1507
133B07

Contrast Matrix WCAG 2.1 Contrast

072D3B
186667
21946D
88B587
BDD3B5
—
2.2
Fail
3.8
AA Large
6.2
AA
9.1
AAA
2.2
Fail
—
1.8
Fail
2.9
Fail
4.2
AA Large
3.8
AA Large
1.8
Fail
—
1.6
Fail
2.4
Fail
6.2
AA
2.9
Fail
1.6
Fail
—
1.5
Fail
9.1
AAA
4.2
AA Large
2.4
Fail
1.5
Fail
—
White BG
14.5AAA
6.7AA
3.8AA Large
2.3Fail
1.6Fail
Black BG
1.4Fail
3.1AA Large
5.5AA
9.0AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171838
3A3A67
535476
9B9C92
C7C7BC

Deuteranopia

151237
352F67
4C4479
999695
C5C4BE

Tritanopia

093534
1C6767
277E80
8A9B9D
BEC2C3

Achromatopsia

232323
4F4F4F
6D6D6D
A2A2A2
C9C9C9

Shades & Tints Shades & Tints

#072D3B

Dark
Light

#186667

Dark
Light

#21946D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #072d3b;
  --color-2: #186667;
  --color-3: #21946d;
  --color-4: #88b587;
  --color-5: #bdd3b5;
}

SCSS

$color-1: #072d3b;
$color-2: #186667;
$color-3: #21946d;
$color-4: #88b587;
$color-5: #bdd3b5;

TAILWIND

colors: {
  'brand-1': '#072d3b',
  'brand-2': '#186667',
  'brand-3': '#21946d',
  'brand-4': '#88b587',
  'brand-5': '#bdd3b5',
}

RGB Array

[7, 45, 59], [24, 102, 103], [33, 148, 109], [136, 181, 135], [189, 211, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #072D3B, #186667, #21946D, #88B587, #BDD3B5 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: #072d3b; --color-2: #186667; --color-3: #21946d; --color-4: #88b587; --color-5: #bdd3b5. 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