← Back to Editor

#89AE8F · #F6DDA4 · #FFB771 · #B5313F · #7C1332

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#89AE8F

Celadon · DarkSeaGreen · Apple Green

HEX
#89AE8F
RGB
rgb(137, 174, 143)
HSL
hsl(130, 19%, 61%)
HSB
hsb(130, 21%, 68%)
CMYK
cmyk(21%, 0%, 18%, 32%)
Oklch
oklch(71.5% 0.060 149.5)

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

#F6DDA4

Goose Yellow · Wheat · Lemon Cream

HEX
#F6DDA4
RGB
rgb(246, 221, 164)
HSL
hsl(42, 82%, 80%)
HSB
hsb(42, 33%, 96%)
CMYK
cmyk(0%, 10%, 33%, 4%)
Oklch
oklch(90.5% 0.078 87.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FFB771

Goose Yellow · LightSalmon · Warm Sun

HEX
#FFB771
RGB
rgb(255, 183, 113)
HSL
hsl(30, 100%, 72%)
HSB
hsb(30, 56%, 100%)
CMYK
cmyk(0%, 28%, 56%, 0%)
Oklch
oklch(83.3% 0.121 64.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#B5313F

Crimson · Brown · Passion Red

HEX
#B5313F
RGB
rgb(181, 49, 63)
HSL
hsl(354, 57%, 45%)
HSB
hsb(354, 73%, 71%)
CMYK
cmyk(0%, 73%, 65%, 29%)
Oklch
oklch(51.9% 0.168 19.6)

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

#7C1332

Dark Violet · Brown · Camellia

HEX
#7C1332
RGB
rgb(124, 19, 50)
HSL
hsl(342, 73%, 28%)
HSB
hsb(342, 85%, 49%)
CMYK
cmyk(0%, 85%, 60%, 51%)
Oklch
oklch(38.6% 0.138 10.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

89AE8F
AE89A8

Analogous

95AE89
89AE8F
89AEA2

Triadic

89AE8F
8F89AE
AE8F89

Split-Comp.

89AE8F
A289AE
AE8995

Tetradic

89AE8F
8995AE
AE89A8
AEA289

Contrast Matrix WCAG 2.1 Contrast

89AE8F
F6DDA4
FFB771
B5313F
7C1332
—
1.9
Fail
1.4
Fail
2.4
Fail
4.3
AA Large
1.9
Fail
—
1.3
Fail
4.5
AA
7.9
AAA
1.4
Fail
1.3
Fail
—
3.5
AA Large
6.1
AA
2.4
Fail
4.5
AA
3.5
AA Large
—
1.7
Fail
4.3
AA Large
7.9
AAA
6.1
AA
1.7
Fail
—
White BG
2.5Fail
1.3Fail
1.7Fail
6.0AA
10.5AAA
Black BG
8.5AAA
15.8AAA
12.3AAA
3.5AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

999997
EBEBB2
E0DF82
7C7B3C
4F4E2A

Deuteranopia

979498
EDEFB5
E4E986
848D3B
555D29

Tritanopia

8B9C9E
F5BDBF
FB8F92
AE3938
772523

Achromatopsia

9F9F9F
DEDEDE
C5C5C5
5A5A5A
363636

Shades & Tints Shades & Tints

#89AE8F

Dark
Light

#F6DDA4

Dark
Light

#FFB771

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #89ae8f;
  --color-2: #f6dda4;
  --color-3: #ffb771;
  --color-4: #b5313f;
  --color-5: #7c1332;
}

SCSS

$color-1: #89ae8f;
$color-2: #f6dda4;
$color-3: #ffb771;
$color-4: #b5313f;
$color-5: #7c1332;

TAILWIND

colors: {
  'brand-1': '#89ae8f',
  'brand-2': '#f6dda4',
  'brand-3': '#ffb771',
  'brand-4': '#b5313f',
  'brand-5': '#7c1332',
}

RGB Array

[137, 174, 143], [246, 221, 164], [255, 183, 113], [181, 49, 63], [124, 19, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #89AE8F, #F6DDA4, #FFB771, #B5313F, #7C1332 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #89ae8f; --color-2: #f6dda4; --color-3: #ffb771; --color-4: #b5313f; --color-5: #7c1332. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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