← Back to Editor

#ABE199 · #B8C844 · #C78945 · #CC6F5F · #F35D68

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 App

Color Details Color Details

#ABE199

Emerald · LightGreen · Apple Green

HEX
#ABE199
RGB
rgb(171, 225, 153)
HSL
hsl(105, 55%, 74%)
HSB
hsb(105, 32%, 88%)
CMYK
cmyk(24%, 0%, 32%, 12%)
Oklch
oklch(85.5% 0.112 138.1)

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

#B8C844

Autumn Sage · GreenYellow · Sunflower

HEX
#B8C844
RGB
rgb(184, 200, 68)
HSL
hsl(67, 55%, 53%)
HSB
hsb(67, 66%, 78%)
CMYK
cmyk(8%, 0%, 66%, 22%)
Oklch
oklch(79.6% 0.154 115.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C78945

Ginger · GoldenRod · Warm Sun

HEX
#C78945
RGB
rgb(199, 137, 69)
HSL
hsl(31, 54%, 53%)
HSB
hsb(31, 65%, 78%)
CMYK
cmyk(0%, 31%, 65%, 22%)
Oklch
oklch(67.9% 0.113 66.3)

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

#CC6F5F

Crimson · LightCoral · Passion Red

HEX
#CC6F5F
RGB
rgb(204, 111, 95)
HSL
hsl(9, 52%, 59%)
HSB
hsb(9, 53%, 80%)
CMYK
cmyk(0%, 46%, 53%, 20%)
Oklch
oklch(64.4% 0.121 30.9)

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

#F35D68

Peach Pink · Tomato · Coral Red

HEX
#F35D68
RGB
rgb(243, 93, 104)
HSL
hsl(356, 86%, 66%)
HSB
hsb(356, 62%, 95%)
CMYK
cmyk(0%, 62%, 57%, 5%)
Oklch
oklch(67.6% 0.184 19.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABE199
CF98E1

Analogous

CFE198
ABE199
98E1AA

Triadic

ABE199
98AAE1
E198AA

Split-Comp.

ABE199
AA98E1
E198CF

Tetradic

ABE199
98CFE1
CF98E1
E1AA98

Contrast Matrix WCAG 2.1 Contrast

ABE199
B8C844
C78945
CC6F5F
F35D68
—
1.2
Fail
2.0
Fail
2.3
Fail
2.1
Fail
1.2
Fail
—
1.6
Fail
1.9
Fail
1.7
Fail
2.0
Fail
1.6
Fail
—
1.2
Fail
1.1
Fail
2.3
Fail
1.9
Fail
1.2
Fail
—
1.1
Fail
2.1
Fail
1.7
Fail
1.1
Fail
1.1
Fail
—
White BG
1.5Fail
1.8Fail
3.0Fail
3.5AA Large
3.2AA Large
Black BG
14.0AAA
11.4AAA
7.1AAA
6.0AA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C3AA
BFBF64
ACAC55
A4A363
B2B165

Deuteranopia

BFBBAF
BEBD6C
B0B459
A9B064
BBC665

Tritanopia

AEB8BB
B97D83
C46265
C76667
EC6363

Achromatopsia

C9C9C9
B4B4B4
949494
898989
8B8B8B

Shades & Tints Shades & Tints

#ABE199

Dark
Light

#B8C844

Dark
Light

#C78945

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abe199;
  --color-2: #b8c844;
  --color-3: #c78945;
  --color-4: #cc6f5f;
  --color-5: #f35d68;
}

SCSS

$color-1: #abe199;
$color-2: #b8c844;
$color-3: #c78945;
$color-4: #cc6f5f;
$color-5: #f35d68;

TAILWIND

colors: {
  'brand-1': '#abe199',
  'brand-2': '#b8c844',
  'brand-3': '#c78945',
  'brand-4': '#cc6f5f',
  'brand-5': '#f35d68',
}

RGB Array

[171, 225, 153], [184, 200, 68], [199, 137, 69], [204, 111, 95], [243, 93, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABE199, #B8C844, #C78945, #CC6F5F, #F35D68 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #abe199; --color-2: #b8c844; --color-3: #c78945; --color-4: #cc6f5f; --color-5: #f35d68. 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 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