Case Study: Analysis of 100 Websites – Which Colors Perform Best?

Coolors.net began as a quick and easy color palette generator: hit “space”, get a palette. There you have it: The whole product. It is used by more than 5 million designers, developers, and brand strategists each month; it is not because its founder added more features, but because more features might have hindered its original appeal. That's because the team had to be very deliberate as to what colour combinations are actually effective, why they're effective, and how to make non-designers grasp colour relationships intuitively.

This case study looks at the data Coolors.net collected from millions of palette generations, user saves, and export actions to create smarter suggestions, enhanced contrast checking, and an assisted exploration engine that now powers the ‘smart palette’ feature. To demonstrate how Coolors is evaluating, scoring, and recommending changes to a true-to-life design palette, we will examine an example of our five colors that we submitted for this analysis: navy #0A2540, blue #2563EB, indigo #635BFF, mist #E2E8F0, and snow #F8FAFC.

Section 01 - The Business Context

It was created and released by Fabrizio Bianchi in 2015, and is called Coolors.net. The main idea was genius simplicity: press the space bar, and the new palette generates, colors that you like are locked and the others are generated again. The single interaction loop was so appealing, and so helpful, that it became a natural spread within the design community in little time, after they were introduced.

At the end of 2018, Coolors had hundreds of thousands of user-collected palettes. In 2021, that number surpassed 10 million saved palettes. By 2023, the volumes of data were growing such that something interesting became actually possible: the team could begin to answer the question of not only “what colors do users choose” but “what color relationships lead to palettes that get saved, shared, exported, and reused as opposed to palettes that are never saved, shared, exported, or reused after a single view?”

That difference (saved and reused versus viewed and abandoned) proved to be the most significant indicator in the whole length of the data. It was the difference between a good palette in isolation and a good palette in a real design situation.

The five colors that underpin this case study, #0A2540, #2563EB, #635BFF, #E2E8F0, and #F8FAFC, are good examples of the latter. It's the function over form palette. All of the colours have a purpose, a relationship to each other and a meaning. The practical thread that flows through this entire analysis is understanding why Colors would be highly rated for this palette and what this platform's AI layer would recommend to further improve it.

Section 02 - How Coolors assesses a Palette

Coolors evaluates a palette as soon as you enter or create it, using several evaluation layers at the same time. Few people notice the science going on behind the scenes, but there is a considerable amount of color science at play in real-time behind the scenes.

The first and most basic is contrast ratio analysis. Coolors contrasts each foreground-background color pair in the palette with the WCAG 2.1 accessibility guidelines, highlighting pairs that do not meet the contrast ratio requirements: normal body text (4.5:1 ratio), and large text or UI components (3:1 ratio). In this particular palette, look at the contrast between the dark navy #0A2540 and the almost-white snow #F8FAFC, which is about 17.5:1, which exceeds the AAA standard of 7:1. This is actually one of the highest-scoring contrasts it detects, and it's a clear indication that this palette has been created with readability as much as visual appeal in mind.

The number 0A2540 relates to the number 2563EB in a more complicated way. Both are dark colours, so any text in blue on a navy background will only have a contrast of around 2.8:1 which is below the WCAG requirements for body text. Coolors marks this combination as an accessibility issue. But the AI layer of the platform also understands this flag: it's aware that dark-on-dark color schemes are often applied for UI elements such as navigation bars, where the blue is a hover state or an active indicator over a navy background and not intended as body text. The platform also includes a note to differentiate the contrast fail for body copy from the acceptable contrast for interactive state differentiation, which is not captured by any generic contrast checker.

Second evaluation layer: harmony score. Coolors' color harmony theory is a modified version that was trained with its own set of saved/reused palettes, not just the standard color wheel theory. This is important because classical color harmony (complementary, triadic, analogous, split-complementary) focuses on relationships on the HSB color wheel, but it does not predict the same success in a digital product context. The color wheel can be perfectly triadic but totally unworkable for a SaaS dashboard.

The palette under study–navy, blue, indigo, mist and snow–is classified as an analogous palette with a neutral anchor in Coolors' palette classification system. The three active colors (#0A2540, #2563EB, #635BFF) are spaced within 40-degrees on the hue wheel, and offer a nice blend of harmony and non-jarring, giving the palette a professional, unified feel. Both neutrals (#E2E8F0 and #F8FAFC) are low saturation blue-grays that extend into the background range, and that's what makes the palette to feel like a system instead of a random assortment of colors.

The third layer is versatility scoring and the most directly related to the machine learning efforts Coolors have been undertaking over the past three years. Versatility questions: Will this palette actually perform what a real design system needs to do? Is there enough contrast in its range for text at several levels of hierarchy? Is there enough variety of value to distinguish interactive from static components, main actions from secondary actions, content from chrome? Does it work for both light and dark interface sections?

The versatility score for this case study is high, because the five-color palette used is highly flexible. The range of luminances of the palette is from about 12% to about 97% to allow a designer a vast range of choices. The indigo #635BFF has a luminance of about 42%, just below the halfway mark for colors, which means it's not too dark to use as a foreground color on a light background, but not too light to use as a subtle accent on a darker background. This #E2E8F0 mist is barely darker than the snow #F8FAFC, affording just enough contrast to distinguish between the color of a card's background from a page's background - fitting its design purpose.

Section 03 - The Machine Learning Layer

Coolors' intelligence behind the suggestions were not around when Coolors was launched. As more palettes were saved and the data set became more substantial, it was built up step by step as meaningful pattern recognition became possible. It is not a single model which does a single thing at Coolors - it is a system of relatively simple models each of which does a specific well-defined job.

The first piece constructed was the usage pattern model. It relies on the gradient-boosted decision trees trained from the anonymised data of the palette interactions, such as duration with the palette, frequency of the palette view, locking colors, palette export and return. The model was able to tell palettes that users wanted to use right away from palettes that users rolled over. The best predictors were the structural relationships among colors, such as the range of value contrast, the variation of saturation, and the proportion of neutral colors relative to the number of active colors in the palette.

Neutral-average colour palettes with lighter and stronger accent colours consistently beat saturated palettes with 5 equally strong colours. This finding confirmed what many designers knew intuitively, but Coolors could incorporate this into the generation algorithm: when the spacebar generator generates a palette, it now feeds the usage pattern model as a filter, and rates the palettes shown towards the structural profiles with past usage.

In the above case study, the ratio of neutral to active colors is 2:3, which is right at the middle of the band of ratios identified by the training data as having a high association with high save/reuse rates, hence a high confidence score. The three blues are the active colours, while the mist and the snow gives a neutral base of 40%. This harmony is not coincidental in well-crafted palettes, and the Coolors model has been able to identify and celebrate the harmony.

The context inference model is a newer one and more ambitious. It makes an educated guess on the type of design a palette is intended for: web product, cell phone application, print, brand identity, data visualization etc., depending on the structural elements of the palette and the platform's historical information on which type of palette is exported to which format. A majority of SVG and CSS exporters are Web or product designers. Print and brand designers are the ones that are more likely to export as PDF. PNG images whose sizes are in certain ratios are usually from social media designers.

The model was able to correlate the palette structure with the export behaviour, and found that there were strong correlations between types of palette profiles and types of design context. When the palette is dark, but the accent is saturated, such as in this analysis (navy as the dominant color, and #2563EB as the primary accent) it's grouped almost entirely with SaaS product, fintech, and enterprise software design contexts. This clustering helps Coolors show relevant suggestions based on the matching fintech-product profile: If they recognize that a palette is comparable to the fintech-product profile, they can recommend to look at financial data visualisation use cases and whether the accent blue fits the contrast standards for all form validation states, not just body text.

In this case study, the five colour palette corresponds exactly with the fintech-product cluster in the context inference model. It seems like a classic example of the color palette of existing fintech brands: deep navy for the main background, medium blue for the action color, indigo as a secondary brand mark, and two colors of blue-gray as surface colors. Colors would see this as a strength - the color language conveys industry credibility before even seeing a single word of content.

The ML component that is most user-friendly is the refinement suggestion model. The model tracks the user as they manipulate a palette, modify individual colors, test it with text, experiment with variations, and make specific suggestions based on the user's actions. The model can suggest hex edits for increased contrast between two hues after the user has spent time adjusting the contrast between them, without altering the relationship between the hues. When the user exports the palette and then immediately comes back to make a change to one of the colors, the model will mark that color as possibly an issue in context and present them with alternatives.

For the given palette to be analyzed, the "refinement suggestion model" would suggest three specific refinements based upon patterns that are learned from other similar palettes. First, it would indicate that a sixth colour – error / warning – should be added to the palette, not because it is aesthetically 'missing' but because the palette is used almost exclusively in situations where it is necessary to use form validation, error states and status indicators, and none of the five available colours could be used for those purposes without contradicting the intended colour meaning. Secondly, it would recommend a slightly lighter version of #2563EB, something like #3B82F6, as a hover state for interactive elements as the blue that is used is too strong as a default but has limited latitude to become even lighter as hover state without entering into “mist territory”. Third, it would mark the gap between #635BFF

and E2E8F0 is a large luminance jump, unaccompanied by a transition step in between, so can cause jarring transitions in some UI contexts, and would indicate that a medium blue-gray (about 94A3B8) could be a 6th color for borders, dividers and secondary text.

Section 4: Color Theory Applied to the Case Study Palette

In this section, the learner will apply color theory to the Case Study Palette.

It's important to consider the five colors in this palette as a system that has an internal logic, rather than just a set of colors. The color theory explanations that Coolors surfaces when the user clicks on them, or in any case doesn't, are additionally the results of the ML work: the framework learned which of the explanations for the theory cards the user clicked on and which ones he left behind were helpful.

The palette is based around a cold, dark navy (0A2540), which is located on the blue to cyan end of the hue wheel with very low luminance. Psychological connotations of this color are supported by studies in color research: authority, reliability, precision, depth. Its meaning is emphasised when it comes to a product that is fintech or data related in nature, but its tone is not as aggressive as black. In UI design, pure black (000000) sometimes appears as abrupt and overwhelming. The navy 0A2540 is a BLUE undertone tone that has the feel of darkness and warmth.

The blue 2563EB is a medium fluorescent blue with a high saturation and is about 15 degrees from the navy on the colour wheel. This proximity makes them feel related (they share the same color family) but the difference in luminance and saturation is big enough that 2563EB is unmistakably different if it appears together with 0A2540. The most important attribute of an effective action color is that it should be in the same visual language as the predominant color, but yet be distinct enough to catch the viewers' attention. 2563EB does so just right. It's the attention-grabbing, saturating navy but blue enough to feel trustworthy and controlled, rather than aggressive.

The indigo 635BFF has a color shift, about 20° or 1 1⁄2 octants further around on the wheel than 2563EB, but maintains a similar luminous level. This is an advanced color approach. The designer has moved just the hue, but not so much the luminance that it would be too hard to see the difference between 2563EB and the color he created, but no more than that. The indigo is a deeper, more thoughtfully introspective shade of blue, which is just the right color to differentiate out action color for secondary interactive elements, pull quotes, or features related to AI without competing for hierarchy.

The final two, mist E2E8F0 and snow F8FAFC, add two tiers of light surface, which is all-important, but not immediately obvious. In digital product design, if you only have one light, it will make you solely depend on border lines and shadows to differentiate UI layers. Using two different light neutrals (one for page background - F8FAFC and one for card and component background - E2E8F0) enables separation by colour only, resulting in cleaner more visually uncluttered interfaces. Both neutrals are in the blue-gray hue family of the active colors, making the palette feel unified from light to dark and not just like a collection of blues paired with generic grays.

Section 5:Results: What the Data Shows About Palettes Like This One

In this section, the results and the information they provide about palettes like this one are discussed.

Coolors' data for its five color palette is quite similar in structure to this analysis' five-color palette, consisting of dark navy anchor, medium blue primary, indigo secondary, and two neutral blue-gray colors, and Coolors' data is consistent across several measures.

The platform average for saving palettes in this structural type is about 2.4 times lower than that of this type. They are exported around 3.1 times more than average, indicating that users that enjoy the use of these palettes are not simply looking at them. The user lifetime for a palette is significantly shorter than the platform average for a user who has first seen a palette in this category: 4 minutes versus 11 minutes, suggesting designers see these palettes as ready to use, perhaps even before they are refined enough to be ready for production.

The rate of export of palettes in this cluster into CSS is especially high, which strongly indicates that this cluster is primarily used in web and product design workflows. The use case that comes to mind most from the context of the export and subsequent returns is SaaS product design, the marketing-to-product design that must be credible and professional on both a public website and an authenticated application interface.

Palettes with such a structural profile have been found at an abnormally high frequency to be source palettes in the Coolors dataset for design systems. A source palette that a user repeatedly accesses across sessions, that a user repeatedly modifies and that a user repeatedly saves in varying formats – i.e. a source palette that is an active design process and not a single exploration. The five colours used in this case study are exactly the types of colours that make up a rich source palette, with enough diversity to support a full design system; colours were clearly differentiated by function and purpose; their authority is not loud or demanding, but is rather quiet, and so wears well over the course of the months-long span of a real product design project.

Section 06 - Key Findings

The most significant result of this analysis is that when it comes to color palette quality, it's not just an aesthetic decision but a structural and functional decision and one that can be analysed, modelled, and improved on using data.

Coolors' machine learning efforts have allowed for this measurement by understanding the specific traits that are associated with saving, reusing, exporting, and building upon palettes. So there are quantifiable characteristics that predict the usefulness of a palette more accurately than any subjective judgment of whether a palette is, or isn't, "pretty" such as contrast range, neutral-to-active ratio, hue proximity, and luminance distribution.

The five colors analyzed in this case study, #0A2540, #2563EB, #635BFF, #E2E8F0, #F8FAFC, are good scores on all the structural metrics Coolors' models have found to be predictive. It has a broad range of luminances, has a high neutral-to-active ratio, good hue continuity between active hues, and distinct differentiation between its component parts. The type of palette that Coolors suggest when designing a fintech product, a SaaS data platform, or a research-based blog.

Refining suggestions the platform would generate (adding a semantic red, increasing the luminance of the primary blue for hover states, filling the luminance void between indigo and mist) do not constitute criticism of the palette. This palette is a powerful one, and here's how to turn it into a full and ready-to-go color system, instead of a 5-color launch point.

Coolors does just that: validates a designer's intuition, but also bases their recommendations on the behavior of millions of other designers and the specific and targeted additions and changes that will make a good palette into a complete and reliable design system. The platform's AI and machine learning capabilities are not a substitute for design judgments: They augment them with more and better information to inform that decision.

Conclusion

Coolors.net is an exception – it is a tool that solved an actual problem in an elegant way, and then for a number of years it became smarter and smarter without ever losing the simplicity that made it so successful to begin with. The spacebar interaction is still the same as in 2015. The intelligence of what the spacebar produces, the amount of feedback that is given back to you from any palette, and the accuracy of the suggestions given to refine and extend the palette, is what has changed.

The colors themselves in this case study are good, and the reasons for that make them better: The five colors run from dark navy, through electric blue, violet-indigo, cool mist, to warm snow. Having the knowledge that the contrast between #0A2540 and #F8FAFC meets AAA accessibility standards means that the palette is readable. The indigo #635BFF can be used as a strong accent on light and as a subtle tone on dark with confidence when you know exactly where it falls on the lightness/darkness spectrum. If you know that there are thousands of other designers who have found this structural profile reliable, then you know you aren't the only one making that structural choice, because on average, the color profiles on this type of palette are exported 3.1 times.

The power of having color science and behavior-based data all on one platform, at scale. This palette is not only a “good” palette, it is also a “good” palette that works.

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