← Back to Editor

#2B7E78 · #BACABC · #AEB09C · #5C3106 · #02161A

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

#2B7E78

Mineral Blue · SeaGreen · Mint Ice

HEX
#2B7E78
RGB
rgb(43, 126, 120)
HSL
hsl(176, 49%, 33%)
HSB
hsb(176, 66%, 49%)
CMYK
cmyk(66%, 0%, 5%, 51%)
Oklch
oklch(54.2% 0.079 188.3)

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

#BACABC

Celadon · Silver · Apple Green

HEX
#BACABC
RGB
rgb(186, 202, 188)
HSL
hsl(128, 13%, 76%)
HSB
hsb(128, 8%, 79%)
CMYK
cmyk(8%, 0%, 7%, 21%)
Oklch
oklch(82.3% 0.026 149.0)

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

#AEB09C

Fresh Green · DarkGray · Sunflower

HEX
#AEB09C
RGB
rgb(174, 176, 156)
HSL
hsl(66, 11%, 65%)
HSB
hsb(66, 11%, 69%)
CMYK
cmyk(1%, 0%, 11%, 31%)
Oklch
oklch(75.0% 0.028 111.7)

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

#5C3106

Ochre · Maroon · Cinnamon

HEX
#5C3106
RGB
rgb(92, 49, 6)
HSL
hsl(30, 88%, 19%)
HSB
hsb(30, 93%, 36%)
CMYK
cmyk(0%, 47%, 93%, 64%)
Oklch
oklch(36.1% 0.081 58.7)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#02161A

Lake Blue · Black · Peacock Green

HEX
#02161A
RGB
rgb(2, 22, 26)
HSL
hsl(190, 86%, 5%)
HSB
hsb(190, 92%, 10%)
CMYK
cmyk(92%, 15%, 0%, 90%)
Oklch
oklch(18.5% 0.029 211.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B7E78
7D2B30

Analogous

2B7D4F
2B7E78
2B5A7D

Triadic

2B7E78
782B7D
7D782B

Split-Comp.

2B7E78
7D2B5A
7D4F2B

Tetradic

2B7E78
4F2B7D
7D2B30
5A7D2B

Contrast Matrix WCAG 2.1 Contrast

2B7E78
BACABC
AEB09C
5C3106
02161A
—
2.8
Fail
2.2
Fail
2.3
Fail
3.8
AA Large
2.8
Fail
—
1.3
Fail
6.5
AA
10.8
AAA
2.2
Fail
1.3
Fail
—
5.0
AA
8.4
AAA
2.3
Fail
6.5
AA
5.0
AA
—
1.7
Fail
3.8
AA Large
10.8
AAA
8.4
AAA
1.7
Fail
—
White BG
4.8AA
1.7Fail
2.2Fail
11.1AAA
18.5AAA
Black BG
4.4AA Large
12.3AAA
9.5AAA
1.9Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F5079
C1C1BF
AFAFA1
494910
0B0B19

Deuteranopia

4A447A
C0BFC0
AFAFA2
4C4F13
0A0819

Tritanopia

2F7B7B
BBC2C3
AEA5A6
5A191A
031818

Achromatopsia

646464
C4C4C4
ADADAD
393939
101010

Shades & Tints Shades & Tints

#2B7E78

Dark
Light

#BACABC

Dark
Light

#AEB09C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b7e78;
  --color-2: #bacabc;
  --color-3: #aeb09c;
  --color-4: #5c3106;
  --color-5: #02161a;
}

SCSS

$color-1: #2b7e78;
$color-2: #bacabc;
$color-3: #aeb09c;
$color-4: #5c3106;
$color-5: #02161a;

TAILWIND

colors: {
  'brand-1': '#2b7e78',
  'brand-2': '#bacabc',
  'brand-3': '#aeb09c',
  'brand-4': '#5c3106',
  'brand-5': '#02161a',
}

RGB Array

[43, 126, 120], [186, 202, 188], [174, 176, 156], [92, 49, 6], [2, 22, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B7E78, #BACABC, #AEB09C, #5C3106, #02161A 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: #2b7e78; --color-2: #bacabc; --color-3: #aeb09c; --color-4: #5c3106; --color-5: #02161a. 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