← Back to Editor

#1E818E · #546C77 · #BA8F80 · #E68B6E · #F8956C

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

#1E818E

Lake Blue · Teal · Mint Ice

HEX
#1E818E
RGB
rgb(30, 129, 142)
HSL
hsl(187, 65%, 34%)
HSB
hsb(187, 79%, 56%)
CMYK
cmyk(79%, 9%, 0%, 44%)
Oklch
oklch(55.5% 0.088 208.3)

TraditionalLake Blue」· PaintMint Ice」· Creative Blush Sunrise

#546C77

Slate Blue · DimGray · Mint Ice

HEX
#546C77
RGB
rgb(84, 108, 119)
HSL
hsl(199, 17%, 40%)
HSB
hsb(199, 29%, 47%)
CMYK
cmyk(29%, 9%, 0%, 53%)
Oklch
oklch(51.6% 0.033 227.6)

TraditionalSlate Blue」· PaintMint Ice」· Creative Blush Sunrise

#BA8F80

Apricot · Tan · Warm Sun

HEX
#BA8F80
RGB
rgb(186, 143, 128)
HSL
hsl(16, 30%, 62%)
HSB
hsb(16, 31%, 73%)
CMYK
cmyk(0%, 23%, 31%, 27%)
Oklch
oklch(68.7% 0.057 40.1)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#E68B6E

Peach Pink · DarkSalmon · Coral Red

HEX
#E68B6E
RGB
rgb(230, 139, 110)
HSL
hsl(14, 71%, 67%)
HSB
hsb(14, 52%, 90%)
CMYK
cmyk(0%, 40%, 52%, 10%)
Oklch
oklch(72.6% 0.119 38.4)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#F8956C

Apricot · LightSalmon · Warm Sun

HEX
#F8956C
RGB
rgb(248, 149, 108)
HSL
hsl(18, 91%, 70%)
HSB
hsb(18, 56%, 97%)
CMYK
cmyk(0%, 40%, 56%, 3%)
Oklch
oklch(76.5% 0.132 42.9)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1E818E
8F2B1E

Analogous

1E8F64
1E818E
1E4A8F

Triadic

1E818E
8F1E82
828F1E

Split-Comp.

1E818E
8F1E4A
8F641E

Tetradic

1E818E
641E8F
8F2B1E
4A8F1E

Contrast Matrix WCAG 2.1 Contrast

1E818E
546C77
BA8F80
E68B6E
F8956C
1.2
Fail
1.6
Fail
1.8
Fail
2.1
Fail
1.2
Fail
1.9
Fail
2.2
Fail
2.5
Fail
1.6
Fail
1.9
Fail
1.1
Fail
1.3
Fail
1.8
Fail
2.2
Fail
1.1
Fail
1.1
Fail
2.1
Fail
2.5
Fail
1.3
Fail
1.1
Fail
White BG
4.6AA
5.5AA
2.9Fail
2.5Fail
2.2Fail
Black BG
4.6AA
3.8AA Large
7.3AAA
8.3AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

494A8B
5E5F74
A7A784
BFBE75
CDCC76

Deuteranopia

433C8A
5D5B74
AAAD85
C4CB77
D3DA78

Tritanopia

238888
557272
B88687
E17B7C
F37E7F

Achromatopsia

656565
666666
9A9A9A
A3A3A3
AEAEAE

Shades & Tints Shades & Tints

#1E818E

Dark
Light

#546C77

Dark
Light

#BA8F80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1e818e;
  --color-2: #546c77;
  --color-3: #ba8f80;
  --color-4: #e68b6e;
  --color-5: #f8956c;
}

SCSS

$color-1: #1e818e;
$color-2: #546c77;
$color-3: #ba8f80;
$color-4: #e68b6e;
$color-5: #f8956c;

TAILWIND

colors: {
  'brand-1': '#1e818e',
  'brand-2': '#546c77',
  'brand-3': '#ba8f80',
  'brand-4': '#e68b6e',
  'brand-5': '#f8956c',
}

RGB Array

[30, 129, 142], [84, 108, 119], [186, 143, 128], [230, 139, 110], [248, 149, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1E818E, #546C77, #BA8F80, #E68B6E, #F8956C 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: #1e818e; --color-2: #546c77; --color-3: #ba8f80; --color-4: #e68b6e; --color-5: #f8956c. 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