What is the hex code for Poppy?

The hex code for Poppy is #E35335.

What are the RGB values for Poppy?

The RGB values for Poppy are rgb(227, 83, 53).

Is Poppy accessible on white backgrounds?

Poppy has a contrast ratio of 3.78:1 on white, which does not pass WCAG AA (requires 4.5:1).

Poppy (#E35335) — Hex, RGB, HSL & WCAG Scores

Tints & Shades

100

200

300

400

500

600

700

800

900

Scale from white (50) through Poppy (500) to black (900), interpolated in Lab color space.

Color Values

HEX: #E35335
RGB: rgb(227, 83, 53)
HSL: hsl(10, 76%, 55%)
OKLCH: oklch(0.631 0.185 34)
CMYK: cmyk(0%, 63%, 77%, 11%)

Luminance:0.2277

CSS var:--color-poppy

Tailwind:bg-[#E35335]

Accessibility

Score: 39/100

On White (#FFF)

3.78:1

AA Large

On Black (#000)

5.55:1

On Light Gray (#F5F5F5)

3.47:1

AA Large

Best text color on this background:

black — 5.55:1

Open in Contrast Checker →

Design Applications

Background

background-color: #E35335

Text Color

color: #E35335

bg-[#E35335] text-[#000000]

Accent border card component

border-left: 4px solid #E35335

Color Harmonies

Complementary

Sky Teal

#62B4C4

Triadic

Hunter Green

#355E3B

Hyacinth

#9683EC

Split-Complementary

Eucalyptus

#44D7A8

Smalt

#003399

Analogous

Pale Violet Red

#DB7093

Candy Pink

#E4717A

Tawny

#CD5700

Platinum

#E5E4E2

Similar Colors

Vermilion

#E34234

Fiesta Orange

#DD4132

Jasper

#D05340

Flame

#E25822

Scarlet

#FF2400

Orioles Orange

#FB4F14

Color Meaning & Psychology

Red is the most emotionally intense color in the spectrum. It stimulates the nervous system, accelerates respiration, and increases heart rate. Red commands attention through associations with blood, fire, danger, and passion — making it the dominant choice for warnings, calls-to-action, and brand identities that must stand out instantly. In food culture, red stimulates appetite. In romance, it signals desire. In sport, studies show red-clad competitors win more often. However, overuse creates aggression. The most effective red designs use it sparingly as a focal accent. At medium lightness, it is the most versatile tone of this hue family — readable as text on light backgrounds, yet vibrant enough as a visual accent.

Industry Usage

Common contexts and industries where Poppy is applied in professional design.

Emergency alerts and warning systems
Food and beverage brands (appetite stimulation)
Sports teams and athletic wear
Calls-to-action and "Buy Now" buttons
Pharmaceutical packaging for urgent medications
Entertainment and gaming brands
Automotive brands emphasizing power and performance
Retail sale and clearance signage

Accessibility Considerations

Normal Text

Fails AA

4.5:1 minimum required

Large Text

Passes AA Large

3:1 minimum required

UI Components

Meets 1.4.11

3:1 for non-text UI

Poppy is a light color. Use black (#000000) text on top of it for maximum readability (5.55:1). Avoid white text on this background.

Test this color in the Contrast Checker →·WCAG Contrast Guide →

CSS & Code Examples

Background

background-color: #E35335;

Text

color: #E35335;

Border

border: 2px solid #E35335;

Box Shadow

box-shadow: 0 4px 20px #E3533540;

Gradient

background: linear-gradient(135deg, #E35335, #ff8561);

Tailwind-style

--color-poppy: #E35335;

Tailwind CSS Utilities

Use arbitrary value syntax in Tailwind CSS to apply Poppy without a custom config.

Background

bg-[#E35335]

Text

text-[#E35335]

Border

border-[#E35335]

Ring

ring-[#E35335]

Fill

fill-[#E35335]

From (gradient)

from-[#E35335]

Via (gradient)

via-[#E35335]

To (gradient)

to-[#E35335]

Design Tokens

Ready-to-use Poppy design token in CSS custom properties, SCSS, Tailwind v3/v4, and JSON formats.

CSS Custom Properties

:root {
  --color-poppy: #E35335;
  --color-poppy-rgb: 227, 83, 53;
  --color-poppy-hsl: 10, 76%, 55%;
}

SCSS Variables

$color-poppy: #E35335;
$color-poppy-rgb: 227, 83, 53;
$color-poppy-hsl: 10, 76%, 55%;

Tailwind v3 Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'poppy': '#E35335',
      },
    },
  },
};

Tailwind v4 (@theme)

/* tailwind.css */
@theme {
  --color-poppy: #E35335;
}

JSON Design Token (W3C format)

{
  "poppy": {
    "value": "#E35335",
    "type": "color",
    "description": "Poppy — #E35335"
  }
}

More red colors

View all →

Red

#FF0000

Dark Red

#8B0000

Crimson

#DC143C

Scarlet

#FF2400

Maroon

#800000

Ruby

#9B111E

Cardinal

#C41E3A

Carmine

#960018

Vermilion

#E34234

Coral

#FF7F50

Light Coral

#F08080

Tomato

#FF6347

What Does Poppy Mean? Color Psychology & Cultural Symbolism

Few colors carry as much cross-cultural psychological weight as the red family. Poppy channels this heritage—landing in the design spectrum as passion, a quality equally present in a "Buy Now" button and a luxury fashion house's logo.

In Western cultures red denotes importance (red carpets), danger (stop signs), love (Valentine's Day), and financial loss ("in the red")—a dual symbolism of celebration and warning that designers leverage depending on context.
Across China, India, and much of Southeast Asia, red is the color of luck, prosperity, and celebration. It dominates weddings, Lunar New Year, and auspicious occasions, carrying exactly the opposite of its Western "danger" connotation.
Poppy's mid-tone lightness (55%) shifts its psychological register: a balanced mid-tone that embodies energy, passion, urgency, and power at its most direct.
At 76% saturation, Poppy reads as moderately saturated—neither overwhelming nor passive, landing in the energy, passion, urgency, and power zone with measured confidence.

The rule with Poppy is intent—when it appears, it should carry meaning. Urgency, passion, importance. Never filler.

How to Use Poppy in Design: Applications, Pairings & Best Practices

Poppy rewards restraint in design. Used at full-surface scale it creates urgency that borders on stress; deployed as a targeted accent—a button, a badge, a border—it creates the focused emphasis that drives conversions.

UI components: primary action buttons, error and destructive states, delete confirmations—Poppy performs reliably in all these roles with its mid-tone tonal character.
Brand & identity: call-to-action buttons, promotional banners, food packaging—contexts where Poppy's moderately saturated quality creates the right register.
Typography: Poppy as text requires a dark background; its 55% lightness means it provides 3.8:1 contrast on white, not meeting WCAG AA.
Poppy creates strong legibility with black text overlays (5.5:1 contrast ratio), making it a reliable background or surface color in design systems
Proportional use: Poppy's moderately saturated saturation (76%) means small applications—accents, highlights, icons—deliver maximum impact without visual fatigue. Reserve large-scale use for intentional brand moments.

The rule with Poppy is intent—when it appears, it should carry meaning. Urgency, passion, importance. Never filler.

Poppy Accessibility: WCAG Contrast Ratios, Color Blindness & Inclusive Design

Poppy (#E35335) reaches 5.55:1 contrast with black text—meeting WCAG 2.1 AA minimum of 4.5:1 for normal text and 3:1 for large text. It clears standard production accessibility requirements. Relative luminance: 22.8%.

As text on white (#FFFFFF): 3.78:1 — AA (large text only)
As text on black (#000000): 5.55:1 — AA ✓
Best text color on Poppy background: Black (#000000) at 5.55:1
WCAG 2.1 luminance: 22.8% — mid-range luminance—it sits in the transition zone where both dark and light text approaches require testing against the 4.5:1 WCAG threshold
Poppy qualifies for normal body text and all larger sizes (AA).
Color blindness consideration: protanopia and deuteranopia (red-green color blindness, ~8% of males) may affect how red-family colors are distinguished from greens and browns. For critical UI states, supplement color alone with shape, label, or pattern cues.

For production use, test Poppy against your specific background colors rather than assuming #FFFFFF or #000000 performance translates. Surrounding colors alter perceived contrast.

Poppy in Industry: Branding, Design & Market Applications

Poppy's brand positioning falls squarely in the territory of energy, passion, urgency, and power. Industry data supports its strongest performance in food & beverage, retail, entertainment categories, where the moderately saturated saturation calibrates the message at a mid-tone, considered level.

Food & Beverage: Red stimulates appetite and accelerates purchase decisions. Fast food chains, hot sauce brands, and snack packaging use it deliberately because it increases caloric craving and speeds up decision-making at point of sale. (examples: Chipotle, Sweetgreen, Blue Bottle Coffee) Avoid in fine dining or health-food contexts where a slower, more mindful experience is the goal.
Retail & E-commerce: The "red sale tag" is a globally conditioned retail convention. Red signals scarcity and urgency, making it the universal shorthand for clearance events, limited-time offers, and price callouts. (examples: Target, H&M, ASOS) Overuse exhausts the urgency signal—reserve it for genuinely time-limited promotions.
Sports & Entertainment: Red communicates competition, athletic energy, and tribal passion. From team jerseys to arena signage, it energizes crowds and aligns with the visceral intensity sports brands want to project. (examples: Spotify, Netflix, Hulu) Works best paired with black or white for maximum contrast and visual impact.
Brand positioning: Poppy is best suited for brands projecting excitement, urgency, importance. Categories outside this positioning—financial dashboards (loss association)—tend to see weaker results.
Adjacent applications: Beyond primary industries, Poppy works effectively in error states, notification badges, sports branding—contexts where power serves a secondary but reinforcing role.

For marketers and brand strategists, Poppy is a commitment to energy, passion, urgency, and power. Match it with industries that make that promise and it will pay dividends consistently.

Accessibility & Design Guides

WCAG Contrast Ratio Guide

Understand contrast requirements for AA and AAA compliance

WCAG AA vs AAA

When to target AA vs AAA accessibility standards

Color Blindness Guide

Design for color vision deficiency with safe palettes

Accessible Design Systems

Build color systems that work for everyone

Frequently Asked Questions

What is the hex code for Poppy?: The hex code for Poppy is #E35335. Its RGB values are rgb(227, 83, 53) and its HSL values are hsl(10, 76%, 55%).
What does Poppy mean in design?: Red is the most emotionally intense color in the spectrum. It stimulates the nervous system, accelerates respiration, and increases heart rate. Red commands attention through associations with blood, fire, danger, and passion — making it the dominant choice for warnings, calls-to-action, and brand identities that must stand out instantly. In food culture, red stimulates appetite. In romance, it signals desire. In sport, studies show red-clad competitors win more often. However, overuse creates aggression. The most effective red designs use it sparingly as a focal accent. At medium lightness, it is the most versatile tone of this hue family — readable as text on light backgrounds, yet vibrant enough as a visual accent.
Is Poppy WCAG accessible?: Poppy (#E35335) passes WCAG AA-large on white with a 3.78:1 contrast ratio. Its overall accessibility score is 39/100.
What colors go well with Poppy?: Poppy pairs well with its complementary color Sky Teal (#62B4C4). Analogous colors like Pale Violet Red and Candy Pink also work harmoniously. Check the Color Harmonies section above for the full palette.
What is Poppy used for?: Poppy is commonly used for: Emergency alerts and warning systems; Food and beverage brands (appetite stimulation); Sports teams and athletic wear; Calls-to-action and "Buy Now" buttons; Pharmaceutical packaging for urgent medications.
What are the CSS and Tailwind values for Poppy?: In CSS, use `color: #E35335` or `background-color: #E35335`. The CSS custom property is `--color-poppy: #E35335`. In Tailwind CSS, use the arbitrary value class `bg-[#E35335]` for backgrounds or `text-[#E35335]` for text.