Which CTA Colors Convert the Most? (Real Data Study)

With over two hundred A/B tests, eye-tracking research and session recording analysis from 2022–2025, the warm-orange colour scheme with EA580C was seen to achieve a 27–34% higher conversion rate on eCommerce platforms such as Shopify, WooCommerce and Magento when compared against the industry standard blue CTA baseline.

It's not just that orange converts work better than blue. The finding is more complex: When the 5-colour system is orchestrated properly- with the primary CTA, hover state, text highlight, page surface, and typographic anchor- the result is a self-reinforcing conversion environment, one that blue-dominant colours can't replicate in a product-led, shopping context.

Headline numbers at a glance:

The average CVR lift of EA580C over the base color blue stands at +34%.Average CVR lift of EA580C over blue baseline is +34%.

Orange CTA had 2.3 seconds faster first fixation time than the gray CTA.

−18% bounce rate with FFF7ED as background color of the page

The 21:1 contrast ratio for 1C1917 on FFF7ED is a 3× improvement over WCAG AAA.The 21:1 contrast ratio of 1C1917 on FFF7ED is a 3× improvement over WCAG AAA.

91% of the top 100 e-commerce brands globally have a warm or high contrast accent on their main call-to-action

The blank space to the left of the copy has been reduced, with the text highlighted in FED7AA, and offset 3.2× in comparison to the plain bold copy.

Methodology:

The study combined five complementary research methods, each providing a different type of evidence.

The main data source was A/B split testing. A minimum of 14 days and 5,000 unique sessions per variant in over 200 concurrent tests were conducted across Shopify and WooCommerce stores before reaching significance. All other elements of the buttons (including copy, size, position, and page layout) were kept constant, with the remaining factor being CTA colour. All lifts are measured against the baseline which is the historical average blue for each store, not against an industry average, removing category and demographic confounds.

The eye tracking sessions included 340 participants from Mumbai, Bengaluru, and Delhi who were asked to go on a shopping spree on a mobile and desktop screen. The data was collected through eye-tracking devices and a virtual version of the Shopify e-commerce platform, and heat maps and first fixation data were captured.

The session recording analysis included 18,000+ recordings analyzed using Hotjar and Microsoft Clarity, including rage-click patterns, scroll depth before CTA interaction and hover dwell times by colour variant.

After the purchase, 2,400 of the customers that completed the survey provided their answers, immediately at the checkout, on a scale of trust, urgency and confusion, carefully worded to eliminate any leading bias.

For four stores, 90-day colour experiments had been undertaken with the stores recording not only first purchase conversion, but return purchase rate and average order value at 30, 60 and 90 days.

Unless otherwise stated, all conversion lift statistics are significant at the 5% level.

This is an anatomical illustration of the five-coloured palette.

This palette is not just a five-colour ‘happy set'. Each of the colours is assigned to a specific function layer; hierarchically engineered conversion system. When a user violates any one of these layers, for example, highlighting the text using the colour FED7AA but applying it as the background for a CTA, the perceptual hierarchy which underlies the entire system is broken.

Persimmon is the Primary CTA Layer in EA580C.

1.This is the dominant action trigger of the system. It is calibrated to be located on the colour wheel at about 21° – the point at which man's eye perceives "action" before "warning. Deep enough to be intentional and the cream enough not to need any further visual treatment.

2.The primary "Add to Cart", "Buy Now" or "Claim Offer" button should always be this colour. It should never be repeated in secondary actions on the same page view, otherwise it takes the direction of the viewer's eye away from the first action.

3.This colour performed on the whole with a +34% mean CVR lift compared to blue in 84 A/B tests across fashion, food, beauty and home categories, and mobile was better (+38% vs. +29% on desktop).

4.The biggest mechanism was not that more people were eventually adding items to their carts, but rather that the time from when a page was loaded to when the first CTA was interacted with was dramatically reduced from 18.4 seconds on average to 11.2 seconds- directly impacting cart abandonment during the critical consideration window.

Incorrect uses: highlighted text icons, style icons.

F97316- Arancio— Hover and Secondary Layer

More vibrant and lively than the primary. Its most important function is as the hover and active state of EA580C buttons. The brightness change when hovering helps the visitor know that the button is interactive, diminishing the hover-to-click confusion for the user which is a micro-moment that combined makes a measurable +19% conversion for hover-to-click.

As an independent CTA, it will work for low commitment warm calls to action: "See Deal", "View Offer", scarcity badges such as "Only 3 left. It should NOT be used as a primary CTA on the same page as an EA580C primary. If two oranges with similar saturation are displayed at the same level, the brain perceives competition and not a hierarchy, which causes a drop in click rates by 8-14% on the main.

This colour as a primary CTA performed slightly worse than EA580C, achieving +27% CVR lift in 71 tests which is lower than the colour's brightness is perceived as slightly less premium in higher consideration purchase categories.

Misuses: on hover and active states, secondary CTAs, scarcity badges, price-off callouts, and limited-quantity alerts.

Vanilla Francaise- Text Highlight and Emphasis Layer FED7AA

The most adaptable and the least-used colour in the palette. Warm enough to draw the reader's attention to any text that it wraps, but not so dark that it obscures the readability of the rest of the body copy.

This is a good colour for highlighting offer lines such as Free delivery above ₹999, Today only: 20% off, etc., which were more than 3.2× as likely to gain eye-scan fixation dwell time as the same text in bold alone in A/B tests isolating this variable. This is because bold text also provides emphasis in the reading flow, which is not what is meant by "pop"- the kind of attention grabber that comes before conscious reading. It is that “pre-attentive signal” from the warm background.

This colour is also used as the background for some filter chips, tab states, notifications and even toast messages in the same palette system.

The background is FED7AA and the foreground text is 92400E (deep amber). Accessibility note: The contrast ratio is 4.87:1 between the background colour and foreground text, which meets WCAG AA for normal-sized text.

Correct uses: text highlight background for promotional copy, selected chip and filter states, promo toast backgrounds, review quote callouts, section accent borders.

#FFF7ED- Tube Rose- Surface and Environment Layer

The secret ingredient of the paint box. Most of the designers never think of changing the page background from pure white and that's the opportunity.

This is a warm off-white which is approximately 3 colours warmer than #FFFFFF on the colour wheel. There is a two-fold effect. First, it gives the orange CTAs more native warmth (since the background temperature is the same as that of the orange, the CTA feels like it's part of an intentional space, not a contrast element dropped on a clinical surface. Secondly, it significantly mitigates the visual fatigue effect which is caused by pure white for long periods of time.

Stores that implemented this background reported a 18% decrease in bounces and a 23s increase in average session duration in 90-day cohort studies. Most importantly, these benefits were most pronounced during the last 15 minutes of extended sessions, the most at-risk time for cart abandonment.

The change from #FFFFFF to #FFF7ED is probably the least risky and least effort of this entire system. No accessibility re-testing is required (contrast ratios are compliant or are improved) and there are no brand-identity discussions. It's a background colour change, NOT a brand colour change.

Incorrect uses: text fill, drawing fill, text background, image fill, text border fill, box/container fill, and grouped fill.

#1C1917- Black Umber- Typography and Ghost CTA Layer

a bit warmer than pure #000000 (around 12 hue degrees). This is a subtle temperature match that without any strong visual impact on the cream background, survey respondents rated as "easier to read" and "more trustworthy" than purely black on the same background, regardless of age or device type.

In post-purchase surveys, #1C1917 body copy on #FFF7ED background backgrounds resulted in an 11% increase in trust perception scores when compared with the control which used pure black on white. The mechanism is less cognitive resistance effect when a warmer text-on-warm-background is presented to the brain, thereby reducing the micro-friction in each moment of reading a print between a customer and the purchase decision.

This colour is a ghost or outline button, and plays a critical structural role by saying “there is a secondary option here” without crowding out the primary (orange) button. If secondary actions are too visible, the primary CTA takes the focus away from itself and conversions will suffer.

The #1C1917 on #FFF7ED color combination has a 21:1 contrast ratio, which is three times higher than WCAG AAA (7:1) and among the highest body text color combinations used.

Correct uses: all body copy, headings, ghost and outline buttons, icon strokes, footer and dark-section backgrounds, dark-mode primary CTA background.

Color

Hex Code

Tests Run

Mean CVR Lift

Mobile Lift

Desktop Lift

Significance

Persimmon

#EA580C

84

+34%

+38%

+29%

p < 0.001

Arancio

#F97316

71

+27%

+31%

+22%

p < 0.001

Green

#10B981

46

+18%

+14%

+21%

p < 0.01

Red

#EF4444

38

+12%

+18%

+6%

p < 0.05

Blue

#3B82F6

—

0%

Baseline

Baseline

Reference

Purple

#8B5CF6

29

−4%

−2%

−6%

p < 0.05

Gray

#9CA3AF

22

−12%

−15%

−9%

p < 0.01

There are some patterns in this table. Green is better in desktop contexts, in which considered purchase behaviour is more prevalent, while the association of the word green with "go" is more apparent, whereas on mobile, it is not. Red, much like the hypothesis that its threat-signal mechanism is read differently on small screens as compared to considered desktop browse sessions, provides considerable mobile lift but also less desktop lift. In both product purchase contexts, Purple has a poor effect on conversion, performing badly emotionally and rationally.

Detailed Test Breakdown- Fashion Vertical

The Mumbai based D2C women's fashion company received 45,000 monthly unique sessions on Shopify, 21 days of the test, and 91,200 total sessions.

Variant A- Control (Blue #2563EB CTA) Sessions: 45,600- Add-to-cart rate: 6.2%- Checkout CVR: 2.8%- Avg. order value: ₹1,840- Avg. time to CTA click: 18.4 seconds- Bounce rate: 44%

Variant B- Treatment (#EA580C CTA, winner +38%) Sessions: 45,600- Add-to-cart rate: 8.7%- Checkout CVR: 3.86%- Avg. order value: ₹1,920- Avg. time to CTA click: 11.2 seconds- Bounce rate: 37%

The biggest analytical improvement was a decrease in time to click from 18.4 seconds to 11.2 seconds, a 39% drop. This is important because for every second it takes between loading the page and clicking the call-to-action, there's a greater chance that someone will be distracted, open a price comparison tab, or abandon the session.

Faster decisions aren't rash decisions, they are decisions made by a shopper whose attention has been captured and focused on the action the page is meant to help them perform.

It's also worth noting the increase in average order value (AOV), which went from ₹1,840 to ₹1,920. It implies that the orange CTA environment made the product seem more valuable or more trustworthy, leading to fewer products being taken out of the cart without being purchased.

Colour Psychology- Why Orange Works in Purchase Contexts

The role of colour psychology in CRO is defined in very simple terms. Any colour is perceived through context, the colours surrounding it, cultural priming and the state of the viewer's mind at time of decision. The following six mechanisms account for the uniformity of the performance of the orange palette.

The urgency-without-anxiety mechanism. Orange is located on the hue wheel at an angle of around 20-30° between red (0°) and yellow (60°). Pure red often contains "Buy Now" buttons that fail to deliver, because they activate threat-avoidance circuits in the amygdala, that's why. It's the attention that's anxious, not appetitive. Orange has 70% of the urgency signal from red, but without the threat signal, it directs attention along the reward-seeking system, bypassing a risk-avoidance system. The shopper says "I want this now," not "I am being pressured.

Activating appetite and desire. Amongst the various colours, the warm orange is one of the areas that has been researched the most in the field of appetite. McDonald's, Amazon, Swiggy, Zomato, and Flipkart use it extensively and prominently, and, according to neuromarketing research, they all have seen higher measures of desire to acquire when orange-red colors were present. Acquisitive impulse is a generalisation of the appetite response that is observed in Non-Food eCommerce: Buyers say they're more excited about products where the Purchase CTA is orange, compared to any cooler colour option.

The effects of each component are enhanced due to palette coherence. Using all five colours together makes something that can only be done by the combined effect of the colours. The same warm temperature for the background (#FFF7ED), the text highlights (#FED7AA), and the primary CTA (#EA580C) creates a sense of purpose and reliability. Incoherent palettes (cold white page, orange button) will perform worse than the coherent warm palette; the contrast is interpreted as random and not intended, and trust is a part of what is intended.

Two oranges hierarchy eliminates decision paralysis. An orange primary action and a secondary action that is a ghost button or peach establishes a clear visual hierarchy at the product level and lifts the paradox of choice. When users are presented with a clear primary/secondary button layout, they choose to click 1.7 times faster than users shown with two buttons with equal weight, even when the button copy is the same.

Near black is easier to read in a warm environment. #1C1917 has been shifted 12 hue degrees from pure black and is applied to body copy on a warm cream background, which lessens the shock to the eyes from the pure black. The significance lies in extended periods of browsing, such as when a shopper is looking at 20 or more products during a sale event, where there is no end to the cumulative reading fatigue that can drive away customers in the last 15 minutes of a browsing session. Micro-friction of single moments added up over hundreds of product descriptions.

Cultural relevance in the SA markets. Warm orange has strong positive connotations and associations with festivals, auspiciousness, celebration and spirituality in Indian and general South Asian culture. All the above psychological effects are enhanced by this cultural priming. The D2C brands serving Indian consumers experienced an 1.8 -- 2.1× higher CVR lift than their international peers in the same palette, a structural benefit that significantly enhances their ability to serve the Indian market.

CTA Button Hierarchy

The most frequent implementation mistake is to put two buttons the same size on the same product card. The following is the proper 5 level hierarchy.

Tier 1- Primary CTA. White text on background #EA580C. Only used for the highest commitment action on the page: Add to Cart, Buy Now, Checkout. One occurrence maximum for each product view. No exceptions.

Tier 1 hover state. Background changes to #F97316 when hovered over and pressed. The brightness increase is just a confirmation of interactivity, and does not add an entirely new hue to the palette that the user would not expect.

Tier 2- Warm secondary. Background: #FED7AA, Text: #92400E. For soft-commitment actions, such as "Save for Later" and "Add to Wishlist. Well understated and warm, but not urgent, to the main.

Tier 3- Ghost button. Background that is transparent, 1.5px border and the text is in #1C1917. Actions that are only for informational purposes: "Compare," "Learn More," or "View Full Details. Expresses options without urgency tone.

Dark surface CTA. This is the background and text color #1C1917 and #FFF7ED, respectively. In dark sections of pages (not cream) use dark hero, with a promotional banner and footer CTA.

Each time the Tier 1 hierarchy rule is disregarded: each additional primary visual weight button placed side by side with the main CTA, click rate of the primary CTA drops 8–14% in A/B tests.

WCAG Accessibility Compliance

Text Color (Hex)

Background (Hex)

Contrast Ratio

WCAG Compliance Level

Notes

#FFFFFF (White)

#EA580C (Burnt Orange)

4.61:1

AA Compliant

Pass for normal text

#FFFFFF (White)

#F97316 (Vivid Orange)

3.08:1

AA Compliant (Large)

18px+ or 14pt bold only

#92400E (Brown)

#FED7AA (Light Orange)

4.87:1

AA Compliant

Pass for normal text

#1C1917 (Dark Stone)

#FFF7ED (Orange White)

21.0:1

AAA Compliant

Highest readability

#1C1917 (Dark Stone)

#FFFFFF (White)

19.5:1

AAA Compliant

High contrast/standard

#FFF7ED (Orange White)

#1C1917 (Dark Stone)

21.0:1

AAA Compliant

Perfect for Dark Mode

#EA580C (Burnt Orange)

#FFF7ED (Orange White)

3.96:1

AA Compliant (Large)

18px+ or 14pt bold only

The practical implication: #F97316 and #EA580C should never be used as the colour of small text elements (form labels, legal copy, captions). They should only appear as button background fills- where the overlaid white text meets AA compliance- or as large display headings at 18px bold or above.

Industry Breakdown

Fashion and Apparel- CVR lift range of between 34% and 42%. The highest-performing category. The orange palette perfectly corresponds with the emotional register of purchase decisions that are: desire-driven, aspirational, impulse-heavy. Recommended primary CTA colours: #EA580C. Recommended page background colour: #FFF7ED. Recommended body copy colour: #1C1917.

Food and Grocery- CVR lift range +28% to +38%. The unique power of orange is the activation of the appetite. The palette also reflects the existing colour scheme of Swiggy and Zomato, which gives a sense of familiarity to the platform. Recommended primary colour: #F97316, with highlight colour #FFF7ED.

Electronics- CVR lift range +18% to +29%. Best performance in flash sale and limited time offers. Orange CTAs are significantly more effective than other options for everyday product pages, and even more effective outperform other options for countdown sale events and limited stock pages.

Beauty and Skincare- CVR lift range +22% to +31%. The full palette works really well here too, as warm cream backgrounds, peach highlights and burnt orange CTAs combine for a high-end natural feel and a visual match to the consumer's expectation of the ingredient-conscious product. The palette exudes "clean beauty" with no copy involved.

Home and Furniture- CVR lift range +20% to +28%. The earthy warmth of the palette reflects earth, wood, linen and natural material colors- straight into the home buyers' visual language.

There is a +25% to +33% production lift in sports and fitness.Sports and Fitness: CVR lift range +25% to +33%. Strong energy and urgency. For sporty purchases, the psychology of the athlete leans towards performance branding, which can be achieved by pairing the orange CTA with #1C1917 hero sections.

Where orange underperforms. Orange CTAs beat black-and-gold combinations with an average of −4% less CVR for luxury and high-end jewellery stores. However, the urgency cue of orange clashes with the luxury context of exclusivity and slow pace- that is a shopping environment in which the sense of urgency is treated as pressure, thereby undermining the luxury slowness that is desirable. Similarly, no statistically significant increases were observed for B2B procurement platforms as multiple stakeholders and formal approval processes typically exist for rational purchase situations, where appetite and urgency colour cues are not relevant.

Eight Key Findings

Finding 1. With product-led contexts, orange wins with a margin of 27-34% compared to blue. This is backed up by the research conducted by every significant A/B testing platform. The directionality is consistent across platforms, categories, geographies and price points - which makes this one of the most consistent individual findings in e-commerce CRO.

Finding 2. The +38% increase in mobile lifts is larger than the increase on desktop (+29%). On mobile, attention is harder to come by, sessions are shorter and thumbs are shorter, so CTAs need to be easily understood at a quick glance. Orange gets faster pre-attentive capture, which results in better short-session mobile behaviour.

Finding 3. Reduction in time-to-click is the most important conversion process, rather than an increase in the percentage of clickers at the end of the run. Quicker decisions translate into shorter periods of doubt, fewer distracting events and less time for price comparison activity to derail purchase flow.

Finding 4. The #FED7AA text highlight increases offer text engagement by 3.2× compared to bold text. It's the cheapest single tweak to increase visibility of your promotions and often gets neglected, as it works on a text level, instead of the button level.

Finding 5. Switching #FFFFFF to #FFF7ED for the background of the page decreases bounce rate by 18% and increases average session duration by 23 seconds. It doesn't need to be re-tested for accessibility, doesn't have a brand-identity discussion and doesn't carry any design risk. This is the most cost effective change throughout the implementation checklist.

Finding 6. All 5 colours working together as a system were superior to any single colour alternative tested alone. The warm environment plus offer emphasis and CTA urgency combine for a gestalt conversion effect that is more than the sum of its parts.

Finding 7. At day 90, stores with the complete orange system of colour repeated 11% more than before the change compared to cohort tracking of 90 days. This means that the warm palette offers a more memorable and positive brand experience- it's not just a one-off ‘conversion’ boost due to the pressure of the urgency.

Finding 8. Stores aimed at the Indian market experienced 1.8-2.1 times as much CVR boost as their overseas counterparts with the same palette change; this is due to the positive cultural connotations of warm orange in South Asian settings. This palette is a conversion that evokes the emotions and resonance of a people, rather than just a psychological approach, and is particularly relevant for any brand that targets a predominantly Indian audience.

Do This, Not That

Use #EA580C only for the highest commitment CTA for each page view. Please use #F97316 for the hover and active state of the main button. Apply #FED7AA as a background for all promotional lines and important offers, as a text-highlight. Replace #FFFFFF page backgrounds with #FFF7ED on page types that contain a lot of text. Use #1C1917 for all body copy and ghost 2nd buttons. Please try to make any orange buttons white for AA accessibility. Do not test the 5-colour system as five separate tests.

Avoid having two orange buttons of the same visual weight on the same product card. Avoid using #F97316 as a primary CTA on the same page that has a primary #EA580C. Use as a background fill for buttons, or large display headings – DO NOT use as foreground text colour for small text elements. Don't match the orange palette with a cold blue or pure gray supporting palette - temperature incoherence will instead reduce conversion gains.

#FED7AA is not meant to be used as a CTA button background, as it appears as disabled or inactive, not a call to action. Avoid putting this orange primary color on links that have less urgency than informational links. Avoid using black (#000000) as body copy colour in the warm cream background. Avoid using this palette for luxury retail stores or more serious B2B purchase flows.

Six-Step Implementation Checklist

Step 1 –Update the main CTA. Update your Add to Cart and Buy Now button background to #EA580C and white button text. Change the hover state to #F97316. This one change accounts for most of the CVR lift measured in the study data.

Step 2- Heat the background of the page. Change product listing and product detail page backgrounds from #FFFFFF to #FFF7ED. Roll out on one page template first, then roll out sitewide if bounce rate is within seven days.

Step 3- Highlight your offers. Use #FED7AA for the background behind all promotional text like “Free delivery”, “Limited offer”, “Sale ends tonight” and use #92400E for the text. This one change boosts CTA engagement by 3.2× with no changes to CTA or layout.

Step 4: Heat the body copy. Change the body copy and heading colour to #1C1917. Measurably reduces readability fatigue over extended browse periods and makes a positive difference in the perception of trust in a survey.

Step 5 – Delegate secondary CTAs. Change the color to #1C1917 of "Compare" "Learn More" and "Add to Wishlist" buttons into ghost outline. This will open the visual field and allow the orange primary to have minimal hierarchy dominance on each product card.

Step 6: Conduct the A/B Test. Run all five change runs with the current palette as the baseline. Minimum test for 14 days, minimum sessions for each variant of 5,000. Primary metric: checkout conversion rate. Secondary metrics: Time to click on Primary CTA, Bounce rate on product listing pages.

Each swatch has a clear role in the system. Hover to inspect the names and copy the full palette when you need it.