Website Color Trends for 2024

bright color swooshes on black background with water droplets on top

Vibrant, bold, and color combinations with tons of contrast are what 2024 web design is all about! Design next year is all about getting attention and causing a little drama! (Electric blue, neon pink, vibrant yellows) Don’t fret if you need something a little softer though. There’s also soft earth tones, punctuated with bold colors like jet blacks, dark greens and vibrant oranges and reds. Here are some of our favorite website color trends for the upcoming year.

Black & White

Clean, simple and easy to read. Black and white punctuated with bright vibrant color touches is absolutely on trend. It pairs perfectly with the current trend of large bold text treatments. Dark backgrounds are ever increasing in popularity as they have been shown to reduce eye fatigue & save battery life.

We love the way the bright colors sit on the black! We feel it really represents the dramatic and fun energy of the TikTok brand. Remember that you don’t have to use the black background everywhere! Swap that out for a soft background color to accentuate a separate area, but keep the text bold and highly contrasted to keep the trend throughout.

Color palette  for the TikTok brand, HEX colors Black: #000000, White: #fffff, Teal blue: #74F0ED, Dark Grey: #3d3d3d, and Bright Pink #EA445A
TikTok Partners Homepage
Source: TikTok Partners
SASStock Dublin Homepage
Source: SAAStock Dublin
Golden Suisse Homepage
Source: Golden Suisse

Boldly Earthy

Environmental colors don’t have to be soft and sweet. Instead of light and airy colors, try creating serious drama with dark earth tones! Accentuate your messages with bright pops of yellow, green and orange. This palette also works quite well with the Pantone 2024 Color of the year Apricot Crush.

The right treatment of these colors can be extremely sophisticated and luxurious while still giving off an inspired-by-nature feel. Throw in more shades of bright green to get a more fresh spring-like feel. While adding more oranges and shades of brown will inspire an organic fall feel.

Bold Earthtones: Dark Green #2E4412, Golden Yellow:: #F6C500, Apricot Crush: #F78C56, Beige: #F9EBCD, White: #ffffff, Dark Brown: #432616
Zoo Beauval, dark blue/green background organic image overlayed with white and gold text and colorful images.
Source: Zoo Beauval
Flamingo Estate. Dark green header bar followed by dark and moody product shots with white text on top.
Source: Flamingo Estate
Humbly Healthy Website with an image of fall vegetables in the background covered by a dark green semi-transparent layer with White text on top.
Source: Humbly Healthy

80’s Craze

Pull out your florescent windbreaker, tease your hair and throw on another layer of hair spray – the 80’s are back baby! This decade wasn’t called the ‘Decade of Decadence‘ for no reason! This style is all about over-the-top boldness, confidence, crazy luxury and even gaudiness! In retail stores and film, we’re seeing more fashion and characters from the iconic 80’s ‘pop’ back up – which is a huge influence on web design trends. Don’t forget to add abstract patterns and irregular shapes to help pull the look together. But you don’t have to go full 80’s “mullet, shoulder pads & boombox”, you can use these retro colors and design touches to bring a little excess into the 20th century.

The main thing to be cautious of with this particular trend is how it will affect colorblind or visually impaired users. Remember to ensure that your text is always paired with background colors that give it enough contrast to be highly readable.

Bright 80's Sample colors: Black: #000000, White: #ffffff, Bright Pink #Ec016E, Purple: #ED72F8, Florescent Green: #74F131, Medium green: #19E963
3 Sided Cube Homepage uses Bright Pinks and greens in the background, white and black for text areas.
Source: 3 Sided Cube
Code Craftsmen Homepage uses a black background with a retro pixelized green image on the right and pixelized white and green text on the left
Source: Code Craftsmen
City Museum website uses bright colors matched with 80's style shapes to give it a retro feel.
Source: City Museum

Pastels are not Passé

While we’ve focused on mostly bold colors, pastels are still being used, but in more of a supporting role. As 2024 keeps accessibility in higher priority than ever before, pastels move to the background, while bold colors take precedence for the sake of readability.

Three pastel color combos that are trending are:

White & Blue

Blue colour palette: Black #000000, White: #ffffff, Blue 1: #331D66, Blue 2: #3c3FA3, Blue 3: #4E68F0, Blue 4: #8795FE
Hodlbot homepage
Source: Hodlbot

Beige & Dark Grey/Back

Beige Colour Palette: Black: #000000, White: #fffff, Beige: #E8D5C6
IPL Packaging website homepage
Source: IPL Packaging

Orange & Blue

Orange and Blue Color Palette: Dark Blue: #074978, Light Yellow/orange: #fff1d0, Medium Orange: #feb775 , Dark Orange: #ae371f, Brown: #6a5e44, Light Blue: #bbe0e8
Alto Website Homepage
Source: Alto

And Finally Complex Gradients

Gradients are back but in a slightly different way. These are gradients that are adding depth and movement to an otherwise boring static page. In the case of Marble the background gradient has texture and moves as though it is a real item blowing in the wind. For those who have problems with motion or attention issues, the speed of the animation or the motion itself could be an issue, but this is a very creative and unique gradient treatment nonetheless.

Complex Blue/Purple Gradient colors: Blue 1: #00156b, Blue 2: #0342c6, Blue 3: #9fc2de, Purple 1: #9b90d4, Purple 2: #643a99, Purple 3: #1c0c35

In the case of Stripe, they are also using an animated color gradient treatment that runs through quite a few smooth and bold color changes. The speed is much slower and it’s less likely to cause a distraction, but it is best to follow WCAG accessibility rules and have these animations stop for those with the reduced motion setting.

Complex Gradient colors: Magenta: #dc4c85, Purple: #b04ae2, Cyan: #91cefe,  Yellow: #fdbb58, Red: #fa2d46

Cosmos has created an amazing example of how you can use complex gradients to create depth without the distraction of motion. The stunning gradient design actually creates an illusion of movement without any actual motion.

Dark Complex Gradient Colors: Black: #000000,  Dark Blue: #526590,  Dark Purple: #a5f8ff,  Cyan: #af4298, Dark Pink: #622571, Orange: #e95e42
Cosmos website is a black background with gradients behind planet like circles.


As for all color trends, the developer and designer need to work closely together to ensure that no matter what treatment is used, UX and accessibility is retained. There is no point in creating an amazing website if your users have issues using it! If you’re struggling with any areas of development – from User Experience, to Accessibility, to planning or testing – contact My Brother Darryl for more information on how we can help support you.

Hero Photo by Pete Godfrey on Unsplash