← Back to Editor

#ABD1B0 · #5DC0BD · #58A897 · #80746F · #FF7C3B

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 Library

Color Details Color Details

#ABD1B0

Celadon · Silver · Apple Green

HEX
#ABD1B0
RGB
rgb(171, 209, 176)
HSL
hsl(128, 29%, 75%)
HSB
hsb(128, 18%, 82%)
CMYK
cmyk(18%, 0%, 16%, 18%)
Oklch
oklch(82.4% 0.061 148.7)

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

#5DC0BD

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#5DC0BD
RGB
rgb(93, 192, 189)
HSL
hsl(178, 44%, 56%)
HSB
hsb(178, 52%, 75%)
CMYK
cmyk(52%, 0%, 2%, 25%)
Oklch
oklch(74.8% 0.093 192.7)

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

#58A897

Mineral Blue · CadetBlue · Mint Ice

HEX
#58A897
RGB
rgb(88, 168, 151)
HSL
hsl(167, 31%, 50%)
HSB
hsb(167, 48%, 66%)
CMYK
cmyk(48%, 0%, 10%, 34%)
Oklch
oklch(67.6% 0.083 178.1)

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

#80746F

Ink Gray · Gray · Warm Gray

HEX
#80746F
RGB
rgb(128, 116, 111)
HSL
hsl(18, 7%, 47%)
HSB
hsb(18, 13%, 50%)
CMYK
cmyk(0%, 9%, 13%, 50%)
Oklch
oklch(56.8% 0.017 44.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#FF7C3B

Apricot · Coral · Warm Sun

HEX
#FF7C3B
RGB
rgb(255, 124, 59)
HSL
hsl(20, 100%, 62%)
HSB
hsb(20, 77%, 100%)
CMYK
cmyk(0%, 51%, 77%, 0%)
Oklch
oklch(72.9% 0.177 44.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABD1B0
D2ADCD

Analogous

BAD2AD
ABD1B0
ADD2C4

Triadic

ABD1B0
B2ADD2
D2B2AD

Split-Comp.

ABD1B0
C4ADD2
D2ADBA

Tetradic

ABD1B0
ADBAD2
D2ADCD
D2C4AD

Contrast Matrix WCAG 2.1 Contrast

ABD1B0
5DC0BD
58A897
80746F
FF7C3B
—
1.3
Fail
1.7
Fail
2.7
Fail
1.5
Fail
1.3
Fail
—
1.3
Fail
2.1
Fail
1.2
Fail
1.7
Fail
1.3
Fail
—
1.6
Fail
1.1
Fail
2.7
Fail
2.1
Fail
1.6
Fail
—
1.8
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.8
Fail
—
White BG
1.7Fail
2.2Fail
2.8Fail
4.5AA
2.6Fail
Black BG
12.5AAA
9.7AAA
7.5AAA
4.6AA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBCB8
8889BE
7B7B9B
7B7B70
C6C54B

Deuteranopia

B9B6BA
827BBE
76709C
7C7C70
CED84F

Tritanopia

ADBEC0
62BEBE
5C9E9F
7F7171
F8575A

Achromatopsia

C2C2C2
A2A2A2
8E8E8E
777777
9C9C9C

Shades & Tints Shades & Tints

#ABD1B0

Dark
Light

#5DC0BD

Dark
Light

#58A897

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abd1b0;
  --color-2: #5dc0bd;
  --color-3: #58a897;
  --color-4: #80746f;
  --color-5: #ff7c3b;
}

SCSS

$color-1: #abd1b0;
$color-2: #5dc0bd;
$color-3: #58a897;
$color-4: #80746f;
$color-5: #ff7c3b;

TAILWIND

colors: {
  'brand-1': '#abd1b0',
  'brand-2': '#5dc0bd',
  'brand-3': '#58a897',
  'brand-4': '#80746f',
  'brand-5': '#ff7c3b',
}

RGB Array

[171, 209, 176], [93, 192, 189], [88, 168, 151], [128, 116, 111], [255, 124, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABD1B0, #5DC0BD, #58A897, #80746F, #FF7C3B is ideal for: corporate websites, product showcases, portfolios. 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: #abd1b0; --color-2: #5dc0bd; --color-3: #58a897; --color-4: #80746f; --color-5: #ff7c3b. 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. 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