When you choose your website template, you'll want to think beyond the layout and consider color. Different color combinations can evoke different feelings in your visitors. Plus, your website's colors will also play an important role in your branding.
Now that you know the importance of color, it’s time to create a colorful website theme to enhance your user experience. But where to start?
To help you get some inspiration and pick the right color themes for your website, we've collected 40+ different real-world examples. For each color theme, we'll share the exact color codes in that design, along with some thoughts on why that scheme works well.
The Best Color Website Themes
If you want even more inspiration, you can browse the full collection of website themes and templates for the Content Hub.
1. Blue, Orange, and White: Cloudflare
Cloudflare is a popular web performance and security company. The Cloudflare website uses white and dark blue for its main background colors, while accenting important elements and CTAs in bright orange.
What we like: The dark blue promotes a sense of calm, which is important as Cloudflare's customers deal with security issues, such as DDoS attacks. At the same time, the bright orange accents can draw attention to key elements, which Cloudflare uses to highlight its main CTA buttons.
Primary colors: Blue (#173682), Orange (#F6811F), White (#FFFFFF)
2. Green, Black, and Light Yellow: Bonnaroo
Bonnaroo is a popular music festival held in Manchester, Tennessee. To match the feel of the festival, the Bonnaroo website mixes earthy tones like green and light yellow. In addition to that earthy feel, Bonnaroo's website also incorporates a mix of brighter colors to add a feeling of psychedelia.
What we like: Overall, this site is a great example of how your website can use colors to reinforce your branding and create a certain "feeling" in visitors.
Primary colors: Green (#79C131), Black (#161616), Light Yellow (#EDE1AC)
3. Orange, Black, and White: HubSpot
HubSpot is the website you're reading right now, home of the free HubSpot CRM and lots of tools to help businesses improve their marketing, sales, service, and more.
The HubSpot website uses classic white and black schemes in many areas, but with the addition of orange to add some energy and make everything pop. Adding these types of colorful accents to an otherwise classic color scheme can be a great way to help your website stand out.
What we like: The site uses orange for CTAs to help them stand out against a white background, which can drive action and improve conversions. Additionally, a high-contrast option switches the orange CTAs to purple (#350DFF).
Primary colors: Orange (#FA5B35), Black (#2E475D), White (#FFFFFF)
4. Purple, Soft Gray, and White: Astra
Astra is a popular WordPress theme that uses an eye-catching purple and white color theme to help it stand out. Purple also has a feeling of royalty, which adds a premium feel to the theme's website.
What we like: Purple evokes a feeling of royalty, which is great when you want to add a premium feel to your website. The use of white and soft gray adds a feeling of space and airiness.
Primary colors: Purple (#5C2FDE), Soft Gray (#F7F6FC), White (#FFFFFF)
5. Color Gradients, Purple, and Teal: Stripe
Stripe has a unique color theme for its site in that it doesn't pick a single set of colors to use. Instead, Stripe uses an ever-changing series of color gradients across most of its site. If you're searching for colorful website themes, it doesn't get much more colorful than Stripe.
It does have some primary colors, such as purple and teal. But in general, you can expect different shades of colors as you move around the site.
Overall, Stripe is a great example of how you can get creative with website color themes, even if you're in a "boring" industry like payment processing.
What we like: Stripe offers a good example of how you can get creative with the colors you use on your site.
6. Black, Teal, and Red: TikTok
TikTok has a fairly unique website color theme, opting for a mix of black, teal, and red.
This color scheme starts with the logo, which uses all three colors. However, TikTok keeps this same theme across the site, using red for CTA buttons and teal for smaller interface details, such as blue checkmarks.
What we like: The website color theme matches the distinctive TikTok logo.
Primary colors: Black (#000000), Teal (#36D5EC), Red (#FA2C55)
7. Black and White: Uber
When it comes to website color themes, it doesn't get much more classic than black and white. One great example of this straightforward color theme is Uber, which uses this classic black-and-white look across both its website and apps.
Black and white color schemes are great for creating a feeling of luxury and timelessness, which is why many luxury brands rely on this color scheme.
While Uber might no longer lean into luxury to the same extent, it did start as the more premium "black car" service, so the feeling certainly fits.
What we like: High-contrast themes ensure people have no problem consuming information on your site.
Primary colors: White (#FFFFFF), Black (#000000)
8. Teal, Orange, and White: Rocket.net
Rocket.net is a popular managed WordPress host. It uses a color scheme similar to Cloudflare, which makes sense because Rocket.net integrates it into its network. But at the same time, it does things differently, opting for a lighter teal blue instead of Cloudflare's dark blue.
It also incorporates some light yellows and dark grays on different pages, which helps to break up the page.
What we like: By using so much white space, the teal and orange colors really grab users' attention.
Primary colors: Teal (#3AABCC), Orange (#FA8E18), White (#FFFFFF)
9. Light Yellow, Light Pink, and Magenta: Toggl
Toggl is a SaaS tool that offers productivity-focused tools for time tracking, project planning, and skills-based employee hiring. It uses a fairly unique color scheme of light yellow, light pink, and dark magenta.
Toggl also slightly changes the color palette based on the specific Toggl product: Toggl Track, Toggl Plan, and Toggl Hire.
What we like: Toggl uses slight color variations to differentiate between its three core products, which can be a great strategy if you need to differentiate different areas of your website.
Primary colors: Light Yellow (#FCDE91), Light Pink (#E57CD8), Magenta (#2C1338)
10. Dark Blue, Orange, and White: Gravity Forms
Gravity Forms is a WordPress form plugin that helps web admins create any form, including lead gen forms that automatically connect to tools like HubSpot.
The Gravity Forms website uses dark blue and white as its primary colors, while adding splashes of color with a bright orange highlight.
What we like: The orange accent adds excitement and draws attention to important CTAs.
Primary colors: Dark Blue (#123D6C), Orange (#F15A2A), White (#FFFFFF)
11. Red, White, and Dark Gray: Todoist
Todoist is a task management tool that helps individuals and businesses create to-do lists and get stuff done. It uses a classic scheme of bright red and white, with gray to add balance.
The design has plenty of white space to keep things balanced, but the red CTA buttons jump out and grab visitors' attention.
What we like: The red primary color promotes energy and passion, great for a to-do list app where productivity is the focus.
Primary colors: Red (#DE483A), White (#FFFFFF), Dark Gray (#1F1F1F)
12. Dark Blue, Dark Gray, and White: WordPress.org
WordPress.org is the home of the open-source WordPress software that powers so much of the web. You can use WordPress to create your base website and then add features with WordPress plugins, such as the official HubSpot WordPress plugin.
In its recent redesign, WordPress.org opted for a classic look based on dark grays and blues.
What we like: The dark blue promotes a feeling of trustworthiness. The dark gray shows maturity. Combining dark blue and dark gray matches WordPress's position in the market as a mature, trustworthy platform.
Primary colors: Dark Blue (#3858E9), Dark Gray (#1F2123), White (#FFFFFF)
13. Light Brown, Dark Gray, and Soft White: Manscaped
Known for its ubiquitous podcast ads, Manscaped sells a number of male grooming products. The Manscaped website relies on earthy tones, with light browns, dark grays, and soft whites (almost on the orange spectrum).
Taken together, the scheme creates a very natural, earthy feeling, which matches how Manscaped markets its products to men. If you want to create a wholesome feeling and connection with your customers, these types of earthy tones are a great idea.
What we like: The entire scheme creates a very "down-to-earth," natural feeling.
Primary colors: Light Brown (#C98E4A), Dark Gray (#1A1A1A), Soft White (#F6F3F0)
14. Red, White, and Black: The Hustle
The Hustle is a publication and newsletter that covers news and trends across the business and tech spaces.
It relies primarily on white and black colors, which makes it easy for readers to consume content. But at the same time, it brings in a splash of red for CTA buttons and other important elements, which adds some energy to the color scheme.
What we like: The black text on a white background captures the feel of a traditional newspaper, which works well for digital publications.
Primary colors: Red (#BF2434), White (#FFFFFF), Black (#192733)
15. Green, Black, and Yellow: Wray and Nephew
Wray and Nephew is a rum brand from Jamaica, so it makes sense that Wray and Nephew's website uses a green, yellow, and black scheme (the colors of the Jamaican flag).
Overall, this is a good example of how you can use your website color theme to connect with your audience on a deeper level.
What we like: The color theme connects with the audience by matching the Jamaican flag. Additionally, the minimal use of yellow highlights makes the yellow content really stand out.
Primary colors: Green (#128242), Black (#1C1C1B), Yellow (#F3D012)
16. Red, Pale Yellow, and White: Keeps
Keeps is a service that offers hair loss treatment for men over the internet. Like the Manscaped example above, Keeps uses earthy tones such as soft yellows and whites. This is a trend that you'll see across a lot of sites that exclusively target men.
At the same time, Keeps uses eye-catching red for its CTA buttons and other accents, which adds some energy to what is otherwise a very soft, earthy design.
What we like: The soft yellows and whites do a good job of creating a wholesome, earthy feeling.
Primary colors: Red (#E22631), Pale Yellow (#FAFAF6), Soft white (#FAFAF6)
17. Shades of Blue, Black, and White: Sleep Foundation
As the name suggests, Sleep Foundation is a website focused on helping people sleep better. It uses various shades of blue across the site, though it avoids any overly bright or energetic shades.
These dark blues provide a feeling of calm and trustworthiness, which is a perfect fit for a website about sleep. If you want to create a relaxed feeling in your visitors, using this dark blue website color scheme is a great idea.
What we like: Blues also evoke trustworthiness, which is important for websites about YMYL topics (your money or your life).
Primary colors: Dark Blue (#263357), Lighter Blue (#5369DE), White (#F6F7FD), Black (#000000)
18. Pastel Pink and Raspberry Pink: Elementor
Elementor is a popular visual drag-and-drop builder tool for WordPress. It has a fairly unique website color theme, opting for a mix of light pink and dark raspberry pink, with dark pink almost moving into purple or burgundy red.
Pink tones are traditionally associated with creativity, which perfectly matches the creative user Elementor wants to engage.
What we like: This color scheme is pretty rare, so Elementor is able to instantly stand out from the crowd.
Primary colors: Dark Pink (#920F3B), Light Pink (#FEC5F3)
19. Dark Blue, Cyan, and Dark Gray: Putler
Putler is a multichannel eCommerce tool that helps eCommerce stores consolidate their data in one spot. It mixes dark blues and cyans across its site to create a calming, trust-building feel.
What we like: The cyan CTA buttons stand out against the dark blue button.
Primary colors: Medium-Dark Blue (#215CA7), Cyan (#2294A2), Dark Blue (#111827)
20. Purple, White, Black, and Teal: Kinsta
Kinsta is a popular managed WordPress hosting provider that offers a premium service for web admins who want top-notch performance and reliability.
Kinsta uses a fairly classic black-and-white scheme for much of its core content, but with purple as a primary accent color and teal as a secondary accent color. For example, most of the CTA buttons and announcements use a purple background. The backend interface also makes heavy use of purple.
Incorporating purple can be a great option for websites that offer a more premium product or service, as purple evokes a feeling of royalty.
Pro tip: Incorporating purple can be a great option for websites that offer a more premium product or service, as purple evokes a feeling of royalty.
Primary colors: Purple (#5333ED), White (#FFFFFF), Black (#0E0A1B), Teal (#32D4D9)
21. Orange, Gray, Black, and White: TINYpulse
TINYpulse is employee engagement software that helps employers survey their employees. Its primary website color theme is orange, black, and white, but it also adds dark shades of gray to balance out the orange.
What we like: Gray adds a feeling of maturity and helps differentiate the theme from other orange, black, and white website color themes.
Primary colors: Orange (#F25620), Gray (#6D6E71), Black (#0F1111), White (#FFFFFF)
22. Green, Yellow, Blue, Black, and White: Avada
Avada is a popular multipurpose theme that comes with its own built-in visual builder, which helps users create pretty much any type of website. It uses a black-and-white theme as its base but then adds color to help differentiate use cases: yellow for beginners, green for marketers, and blue for web professionals.
Overall, Avada's color scheme is a good example of how you can use colors to help segment your website into different parts.
What we like: The Avada website uses brighter colors to help differentiate various use cases.
Primary colors: Green (#65BD7D), Yellow (#FBE979), Blue (#7ED6F0), Black (#282828), White (#FFFFFF)
23. Purple, Green, and Orange: Semrush
Semrush is an online marketing analytics and keyword research tool that's popular with SEO and digital marketing professionals. Semrush uses a very bright, colorful scheme with lots of purple, green, and orange colors.
Semrush's bright color scheme helps it stand out from the crowd in an industry that can be overly technical and analytical.
What we like: Using a colorful website theme helps Semrush stand out when compared to its competitors.
Primary colors: Purple (#421983), Green (#45E0A8), Orange (#FA622D)
24. Yellow Gradients, Purple, and White: Boost
Boost is an immune-boosting supplement based on elderberries. It uses a bright yellow gradient color scheme, with white text on the yellow background. As users scroll down, it also brings in bright purple, which helps match the elderberry theme.
What we like: Using a yellow gradient instead of solid yellow makes the design warmer and more interesting.
Primary colors: Yellow Start Gradient (#FAB800), Yellow End Gradient (#FA770D), Purple (#7D47FF), White (#FFFFFF)
25. Shades of Cyan, Soft Yellow, Others: Olipop
Olipop is a prebiotic soda that's rapidly grown in popularity. Unlike traditional sodas, Olipop emphasizes health and quality ingredients.
To reinforce this feeling, Olipop incorporates many pastel colors, including cyan (between blue and green), soft yellows, and other colors across the site. Using these types of earthy tones and cyans is great if you want to promote a feeling of healthiness and clean living.
What we like: Cyan evokes a feeling of nature and healthiness.
Primary colors: Cyan Blue (#14433C), Pastel Blue (#C0F8EF), Soft Yellow (#FDF7E7)
26. Blue, Red, and White: Casper
Casper is a popular online mattress company that ships mattresses straight to consumers' doors. It uses shades of blue as the primary colors, with bright red for CTA buttons and other important accents.
As with the Sleep Foundation example above, you'll notice that most sleep-focused sites utilize blue website color schemes because it creates a calming feel.
What we like: By using blue, Casper helps create a calming feel that matches its focus on sleep.
Primary colors: Blue (#526699), Red (#CB372A), White (#FFFFFF)
27. Yellow Gradient, Blue, Black: Banky
Banky is an Ireland-based payment tool that helps users more easily make payments via the banking system. It uses a bright yellow background with royal blue and black text.
What we like: The yellow background adds a feeling of positivity, which matches Banky's goal to improve a "boring" bank payments system. Blue accents add a feeling of trustworthiness and help CTA buttons stand out against the yellow background.
Primary colors: Yellow (#FACE32), Blue (#3663FF), Black (#121722)
28. Shades of Blue + Bright Accents: Venmo
Venmo is a popular payment app/service acquired by PayPal. Venmo uses blue primary colors across its site, with various bright accents, including greens, pinks, and purples.
Because Venmo is a payment app, trust is important. Choosing a primarily blue color scheme is, therefore, a great idea because it evokes a feeling of trust. At the same time, the bright accents incorporate energy, which fits with Venmo's goals to disrupt the payment industry.
What we like: Bright accents add energy and a youthful feeling to the design.
Primary colors: Bright Blue (#378DFF), Light Cyan-Blue (#F2F9FF)
29. Blue and Black: Deside Recrutement
DesideRecrutement is a recruitment agency located in Provence, France. It uses royal blue as its primary color, along with a classic black-and-white scheme.
The heavy reliance on blue helps add a feeling of trustworthiness, which is important since employment requires trust for both employers and employees.
What we like: The site uses blue to accent text content as well, which helps emphasize important information.
Primary colors: Royal Blue (#2B4CD5), Black (#1D1E1C), White (#FFFFFF)
30. Green and Purple: b2 Design
B2 Design is a Dutch digital agency that uses an eye-catching mix of purple and green for its portfolio website. The website also incorporates lots of white space, which helps those rich colors stand out.
What we like: Purple evokes feelings of royalty, creating a premium feel for an agency website. The white background really puts the focus on the bright greens and purples.
Primary colors: Green (#4ACD81), Purple (#4E26C1), Black (#211B32)
31. Separate Colors for Each Page: Mighty
Mighty, a digital design and website agency, is a curveball because it doesn't have a single-color theme. Instead, it opts for a different color theme for each of its six pages, including blue, green, red, and yellow.
While this approach might be overwhelming for a large site or blog, it's a great example of how smaller sites can experiment with website color themes that are outside of the box.
What we like: Using different colors for each page is a unique approach, which fits well with it being the portfolio of a creative agency.
32. Shades of Green and White: Middle Child Philadelphia
Middle Child is a casual dining establishment in Philadelphia with two different locations. It uses a simple website color theme with two shades of green and white.
The effect is eye-catching and a good reminder that you can create a great-looking site even with a small color palette.
What we like: The site uses different shades of green to highlight its two different locations, which is a great example of using color in both an aesthetic and practical way.
Primary colors: Bright Green (#16B74F), Dark Green (#0E432F), White (#FFFFFF)
33. Blue, Yellow, and White: FinMasters
FinMasters is a publication that helps readers understand important financial concepts and improve their financial knowledge. It uses dark blue as a primary color, with other shades of blue mixed in. In addition to the blue, it uses bright yellow for accents and CTA buttons.
What we like: Dark blue adds a feeling of trust, which is important for a financial education site. The yellow accents and CTA buttons grab visitors' attention.
Primary colors: Dark Blue (#06133D), Lighter Blue (#4267CF), Yellow (#FAD901), White (#FFFFFF)
34. Pink Red and Bright Yellow: San Diego Design Week
San Diego Design Week is a week-long event that celebrates "design in all its forms." It has a very bright, energetic color scheme, with heavy use of bright pink-red and yellow colors that really drive home the event's goals.
What we like: The bright pink-red hero background evokes feelings of energy and creativity. The bright yellow adds a feeling of celebration and positivity.
Primary colors: Pink Red (#E94568), Bright Yellow (#F9F15A)
35. Pastel Colors, Black, and White: Purplethumb
Purplethumb is a design subscription service that offers unlimited design requests for one flat monthly fee. The Purplethumb website uses a classic black-and-white color scheme for its base but then brings in many pastel colors to add interest and energy.
What we like: An off-white background radiates warmth and comfort.
Primary colors: Various Pastel Colors, Black (#000000), White (#FFFBF7)
36. Shades of Pink, White, Cyan Blue: La Croix Sparkling Water
La Croix is a sparkling water brand that's rapidly become a cultural phenomenon. It uses various shades of pink across its site, along with a dark cyan blue for most of its text content.
The heavy use of pink creates a feeling of creativity and exuberance, which fits the type of branding La Croix wants to reinforce. As you saw with the Elementor example above, using pink in your website color theme is great when you want to connect with a more creative audience.
On some other pages, La Croix also brings in teals and other bright colors.
What we like: Incorporating other bright color accents further adds to the feeling of energy.
Primary colors: Light Pink (#F9D1E3), Dark Pink (#B92454), White (#FFFFFF)
37. Orange Gradients and Shades of Blue: Bunny.net
Bunny.net is a content delivery network (CDN) service that helps web admins speed up their websites. It uses various shades of blue across the site and many orange accents (with many of the CTA buttons using an orange gradient).
Together, the blues and oranges evoke feelings of trustworthiness and speed, which is exactly what Bunny.net wants people to feel.
What we like: Orange adds a feeling of energy, which is why you see it used by a lot of web performance tools.
Primary colors: Orange Gradient Start (#FA6F58), Orange Gradient End (#FAA84A), Blue (#183D6D)
38. Green and Blue Gradients, White, Black: Limeade
Limeade offers employee well-being programs for large enterprises. As you'd expect from a health-focused site, Limeade uses a green website color theme, with different green gradients used across the site, some even shifting into the blue range.
What we like: Green promotes feelings of health and wellness, so it's a natural website color theme for any type of health-focused website.
Primary colors: Main Green (#0F9111), Green and Blue Gradients, White (#FFFFFF), Black (#000000)
39. Pink, White, and Black: Awwwards Conference
The Awwwards Conference is a digital conference for the design community. It uses a classic white-and-black scheme but with lots of pink accents to add creativity to the design.
What we like: The pink accents evoke a feeling of creativity, which fits well with a digital design conference.
Primary colors: Pink (#FC93AD), White (#FEFDFB), Black (#1F1F1F)
40. Red, Black, and White: Spline
Spline is a Canadian engineering firm. Normally, engineering can be a pretty "boring industry," but the Spline website uses its colorful website theme to flip that feeling with a bright red full-screen hero section.
Beyond the bright red, Spline otherwise keeps things fairly classic with a black-and-white scheme.
What we like: The bright red background adds energy to what is otherwise a "boring" industry.
Primary colors: Red (#D91C32), Black (#0A0A0A), White (#FFFFFF)
Create Your Own Website Color Theme
That wraps up our collection of 40+ real website color themes that you can use as inspiration for your own designs. You could use the exact color theme from a website that you like. Or, you could mix and match different ideas to create something all your own.
![Copyright Notice Examples: How to Write One for Your Website [+Template]](https://knowledge.hubspot.com/hubfs/copyright-notice-1-20241010-1359425.webp)
