Jelly Bean

HEX: #DA614E | Modern Palette

On White
3.62:1
FAIL
On Black
5.80:1
PASS

Color Specifications

HEX
#DA614E
RGB
218, 97, 78
HSL
8°, 64% ,85%
CMYK
0, 55.5, 64.22, 14.51

About Jelly Bean

Jelly Bean (#DA614E) is a color with RGB(218, 97, 78) and HSL(8.14°, 64.22%, 85.49%). In design, it fits Warm styles and is suitable for Text, Button, Background. Its complementary color is #4EC7DA, which creates strong contrast. Its triadic palette includes #4EDA61 and #614EDA. The name comes from Jelly Bean (English).

  • HEX: #DA614E
  • RGB: 218, 97, 78
  • HSL: 8.14°, 64.22%, 85.49%
  • Style: Warm
  • Use case: Text, Button, Background
  • Complementary color: #4EC7DA
  • Triadic colors: #4EDA61, #614EDA
  • The name comes from Jelly Bean (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #DA614E from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Warm
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #929247
Protanopia #77774F
Tritanopia #DB5F5F
Achromatopsia #868686

Frequently Asked Questions

Jelly Bean (#DA614E) is a color with RGB(218, 97, 78) and HSL(8.14°, 64.22%, 85.49%).

#DA614E pairs strongly with #4EC7DA as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#DA614E is suitable for Text, Button, Background and works well with Warm styles.

The name Jelly Bean is linked to Jelly Bean from English, meaning A small, bean-shaped confection with a jelly interior and a firm sugar shell..

Name, History & Etymology

Origin Word Jelly Bean
Meaning A small, bean-shaped confection with a jelly interior and a firm sugar shell.
Language English
First Recorded Use Late 19th Century

History

The exact origin of the jelly bean is somewhat debated, but it is generally believed to have evolved from Turkish delight and similar jelly candies, combined with the sugar-panning technique used for Jordan almonds. William Schrafft, a Boston candy maker, is sometimes credited with inventing the jelly bean in 1861, encouraging people to send them to soldiers during the American Civil War. However, the first known advertisement for jelly beans appeared in the American publication 'The Chicago Daily News' in 1886. They gained significant popularity in the early 20th century, particularly around Easter.

First Recorded Use

1860s-1880s (exact date debated, but references appear in the 1880s)

Cultural Associations

Jelly beans are strongly associated with Easter in many Western cultures, often included in Easter baskets. They are also a popular candy for general consumption and have been famously associated with U.S. President Ronald Reagan, who kept jars of them on his desk and served them at meetings. The wide variety of flavors, including 'gourmet' and 'gross' flavors, has contributed to their enduring appeal and novelty.

Similar Named Colors
Dark Coral #CD5B45 ΔE 3.37
Cedar Chest #C95A49 ΔE 4.04
Carmine Pink #EB4C42 ΔE 4.34
Terra Cotta #E2725B ΔE 4.51

Code Snippets

/* Background */
.element {
    background-color: #DA614E;
}

/* Text */
.element {
    color: #DA614E;
}

/* Border */
.element {
    border: 1px solid #DA614E;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #DA614E,
        #C2EBF2
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #DA614E,
        #C2EBF2
    );
}

// SCSS variable
$jelly-bean: #DA614E;

// With RGB channels (useful for rgba() usage)
$jelly-bean-r: 218;
$jelly-bean-g: 97;
$jelly-bean-b: 78;

// Usage
.element {
    background-color: $jelly-bean;
    color: rgba($jelly-bean-r, $jelly-bean-g, $jelly-bean-b, 0.8);
}