5 Tips for Using Bright Color That's Great, Not Garish

Bright color can help draw users into your website and can even be used as a tool to help increase online sales, by commanding attention or creating an emotional connection. But you have to use it carefully so you don't offend users. Too much color — or too many colors in a single design — can create an almost dizzying effect that can confuse website visitors and cause them to turn away. Effective use of color can have quite the opposite effect, even with bright, bold palettes.
Here are five ways to use bright color to maximize your website design.

1. Try a High-Color Illustration


An illustration featuring bright colors can set the tone and mood for an entire design. It is a fun and unique way to showcase an event or the style of a blog or online shop.

To make the most of a high-color illustration, stick to a color palette as you would with any other project and pick one color as a dominant hue. This dominant color area provides the perfect place to anchor text or other elements.

Afro Baile uses bright color to powerful effect. The dominant yellow background makes the headline, navigation elements and branding pop.

Try out different color palettes on your own site with custom theme colors.

2. Go Monotone


If you are worried about using too much color, opt for a palette that only has one color. Most monotone color palettes also use light (white) or dark text and accents to help put more emphasis on the color of choice. While some designers like a monotone color scheme with just one color, you can mix it up with lighter and darker variations of the same color in the design for more depth and visual interest.

Masterpiece Makers uses a bright coral to attract visitors. The overall layout is flat in nature and uses simple imagery and typography with bright color to establish a classic, yet modern feel.

3. Pick from the Material Palette


Material Design, the aesthetic created and adopted by Google for websites and Android devices, is one of the go-to design trends of the year. And while a full Material outline might not be for you, the color palette is a great source of design inspiration.

When thinking about colors that are high-drama and engaging, try to keep options in the palette to a minimum. Often two colors will be enough to create a look that is bright and fun, but not garish.

Unique Art Hawaii mixes a lemonade yellow with a teal-green to move the eye towards the branding and call to action in the center of the design. While the colors might not come to mind right away as a choice for a website palette, they work together seamlessly and create interest and establish a light, bright mood.

Want to try a Material Design-inspired color? Start with the swatches from Material UI Colors. You can enter the hex codes referenced on this page and use them as custom color choices when choosing different theme colors.

4. Try a Color Overlay


A color overlay refers to a colored box that sits over a photo or video that changes the coloring of the image. Color overlays create additional contrast between the background and foreground elements such as text. They are also perfect for incorporating brand colors into the design in an impactful way.

But a color overlay does not have to be boring. While many designs use a dark-tinted overlay, consider a pop of color instead for even more visual emphasis.

Tucker Antell uses a blue overlay and yellow accents to create a visually striking homepage. The color combination is modern bold and sets the right theme for the musician's website design. You create a cover overly by customizing the background of any section on your site.

5. Go with a Gradient


While many designs shied away from gradients for a while, they are back. (Gradients are also a top design trend of 2017.)

A two-color gradient – where colors fade into each other – can be used alone in the background or on top of an image as an overlay. Gradients can also work inside buttons or for typography as art features. Color choices for gradients can range from bright to white (or dark) or move from one bright color to the next.

Cori Jacobs uses gradients to add emphasis to the slider on her homepage. Graduated colors help pull the eye across the screen from left to right as the color changes and makes text elements more visual and readable because they separate from the background design. Now you can create gradient backgrounds directly in the Editor to inject some additional design flavor into your content.


When it comes to color, bright, bold options are on trend. While gradients and bright color faded out of popularity for a little while, they have emerged more popular than ever. Now is the time to try something new, start with a color that will add a lot of personality to your website design.