← Back to Editor

#7BA489 · #240C21 · #F95957 · #FC8F71 · #F1BB8E

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

#7BA489

Celadon · DarkSeaGreen · Olive Green

HEX
#7BA489
RGB
rgb(123, 164, 137)
HSL
hsl(140, 18%, 56%)
HSB
hsb(140, 25%, 64%)
CMYK
cmyk(25%, 0%, 16%, 36%)
Oklch
oklch(68.1% 0.060 155.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#240C21

Rose Purple · Black · Dark Purple

HEX
#240C21
RGB
rgb(36, 12, 33)
HSL
hsl(308, 50%, 9%)
HSB
hsb(308, 67%, 14%)
CMYK
cmyk(0%, 67%, 8%, 86%)
Oklch
oklch(20.2% 0.053 332.3)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#F95957

Peach Pink · Tomato · Coral Red

HEX
#F95957
RGB
rgb(249, 89, 87)
HSL
hsl(1, 93%, 66%)
HSB
hsb(1, 65%, 98%)
CMYK
cmyk(0%, 64%, 65%, 2%)
Oklch
oklch(67.7% 0.196 24.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FC8F71

Peach Pink · Salmon · Coral Red

HEX
#FC8F71
RGB
rgb(252, 143, 113)
HSL
hsl(13, 96%, 72%)
HSB
hsb(13, 55%, 99%)
CMYK
cmyk(0%, 43%, 55%, 1%)
Oklch
oklch(76.1% 0.139 36.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F1BB8E

Apricot · BurlyWood · Warm Sun

HEX
#F1BB8E
RGB
rgb(241, 187, 142)
HSL
hsl(27, 78%, 75%)
HSB
hsb(27, 41%, 95%)
CMYK
cmyk(0%, 22%, 41%, 5%)
Oklch
oklch(83.0% 0.086 61.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7BA489
A37B96

Analogous

81A37B
7BA489
7BA39C

Triadic

7BA489
887BA3
A3887B

Split-Comp.

7BA489
9C7BA3
A37B81

Tetradic

7BA489
7B81A3
A37B96
A39C7B

Contrast Matrix WCAG 2.1 Contrast

7BA489
240C21
F95957
FC8F71
F1BB8E
—
6.5
AA
1.1
Fail
1.2
Fail
1.6
Fail
6.5
AA
—
5.7
AA
8.1
AAA
10.6
AAA
1.1
Fail
5.7
AA
—
1.4
Fail
1.9
Fail
1.2
Fail
8.1
AAA
1.4
Fail
—
1.3
Fail
1.6
Fail
10.6
AAA
1.9
Fail
1.3
Fail
—
White BG
2.8Fail
18.3AAA
3.2AA Large
2.3Fail
1.7Fail
Black BG
7.5AAA
1.1Fail
6.6AA
9.3AAA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8D90
1A191C
B4B257
CDCC78
DAD999

Deuteranopia

8A8791
1B1D1B
BDC958
D3DB7A
DDE19C

Tritanopia

7D9596
231817
F15858
F77E7F
EEA1A3

Achromatopsia

959595
161616
898989
ACACAC
C6C6C6

Shades & Tints Shades & Tints

#7BA489

Dark
Light

#240C21

Dark
Light

#F95957

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ba489;
  --color-2: #240c21;
  --color-3: #f95957;
  --color-4: #fc8f71;
  --color-5: #f1bb8e;
}

SCSS

$color-1: #7ba489;
$color-2: #240c21;
$color-3: #f95957;
$color-4: #fc8f71;
$color-5: #f1bb8e;

TAILWIND

colors: {
  'brand-1': '#7ba489',
  'brand-2': '#240c21',
  'brand-3': '#f95957',
  'brand-4': '#fc8f71',
  'brand-5': '#f1bb8e',
}

RGB Array

[123, 164, 137], [36, 12, 33], [249, 89, 87], [252, 143, 113], [241, 187, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7BA489, #240C21, #F95957, #FC8F71, #F1BB8E 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: #7ba489; --color-2: #240c21; --color-3: #f95957; --color-4: #fc8f71; --color-5: #f1bb8e. 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