← Back to Editor

#B3546A · #EA7A4A · #FFAB55 · #8AB184 · #7F93AB

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

#B3546A

Crimson · Sienna · Passion Red

HEX
#B3546A
RGB
rgb(179, 84, 106)
HSL
hsl(346, 38%, 52%)
HSB
hsb(346, 53%, 70%)
CMYK
cmyk(0%, 53%, 41%, 30%)
Oklch
oklch(57.0% 0.125 7.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#EA7A4A

Tangerine · Coral · Warm Sun

HEX
#EA7A4A
RGB
rgb(234, 122, 74)
HSL
hsl(18, 79%, 60%)
HSB
hsb(18, 68%, 92%)
CMYK
cmyk(0%, 48%, 68%, 8%)
Oklch
oklch(69.8% 0.152 42.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FFAB55

Ginger · SandyBrown · Warm Sun

HEX
#FFAB55
RGB
rgb(255, 171, 85)
HSL
hsl(30, 100%, 67%)
HSB
hsb(30, 67%, 100%)
CMYK
cmyk(0%, 33%, 67%, 0%)
Oklch
oklch(80.8% 0.141 63.9)

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

#8AB184

Celadon · DarkSeaGreen · Apple Green

HEX
#8AB184
RGB
rgb(138, 177, 132)
HSL
hsl(112, 22%, 61%)
HSB
hsb(112, 25%, 69%)
CMYK
cmyk(22%, 0%, 25%, 31%)
Oklch
oklch(72.0% 0.077 141.3)

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

#7F93AB

Azure · LightSlateGray · Navy Blue

HEX
#7F93AB
RGB
rgb(127, 147, 171)
HSL
hsl(213, 21%, 58%)
HSB
hsb(213, 26%, 67%)
CMYK
cmyk(26%, 14%, 0%, 33%)
Oklch
oklch(65.6% 0.043 253.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3546A
56B39D

Analogous

B3569A
B3546A
B36F56

Triadic

B3546A
6CB356
566CB3

Split-Comp.

B3546A
56B36F
569AB3

Tetradic

B3546A
9AB356
56B39D
6F56B3

Contrast Matrix WCAG 2.1 Contrast

B3546A
EA7A4A
FFAB55
8AB184
7F93AB
—
1.7
Fail
2.6
Fail
2.0
Fail
1.5
Fail
1.7
Fail
—
1.5
Fail
1.2
Fail
1.1
Fail
2.6
Fail
1.5
Fail
—
1.3
Fail
1.7
Fail
2.0
Fail
1.2
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
1.1
Fail
1.7
Fail
1.3
Fail
—
White BG
4.8AA
2.8Fail
1.9Fail
2.4Fail
3.2AA Large
Black BG
4.4AA Large
7.4AAA
11.2AAA
8.7AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8965
BAB856
DBDA6A
9B9B8F
8888A5

Deuteranopia

8F9763
C0C858
E0E66F
999692
8785A4

Tritanopia

AE6060
E45F61
FB7A7E
8C9799
80A1A0

Achromatopsia

737373
969696
BABABA
A0A0A0
909090

Shades & Tints Shades & Tints

#B3546A

Dark
Light

#EA7A4A

Dark
Light

#FFAB55

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3546a;
  --color-2: #ea7a4a;
  --color-3: #ffab55;
  --color-4: #8ab184;
  --color-5: #7f93ab;
}

SCSS

$color-1: #b3546a;
$color-2: #ea7a4a;
$color-3: #ffab55;
$color-4: #8ab184;
$color-5: #7f93ab;

TAILWIND

colors: {
  'brand-1': '#b3546a',
  'brand-2': '#ea7a4a',
  'brand-3': '#ffab55',
  'brand-4': '#8ab184',
  'brand-5': '#7f93ab',
}

RGB Array

[179, 84, 106], [234, 122, 74], [255, 171, 85], [138, 177, 132], [127, 147, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3546A, #EA7A4A, #FFAB55, #8AB184, #7F93AB 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: #b3546a; --color-2: #ea7a4a; --color-3: #ffab55; --color-4: #8ab184; --color-5: #7f93ab. 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