Using Color on your Website
The right colors and coordination can help you create a visually appealing site that encourages people to stay and engage with your content.
Color can significantly impact the user experience by:
- influencing first impressions
- conveying brand identity
- evoking emotions
- guiding navigation
- affecting how users interact with the site
- influencing their decisions and conversion rates
Brand Recognition
Another important role of colors in a web design context is brand recognition. Â鶹AV websites all use a designated template and have certain colors built into the design. Use of these primary and secondary colors keep with LU branding and should be used as often as possible. Consistency is key!
LU's primary colors are red and white with secondary colors that include black and gold. Your site's colors should work well and compliment red.
Highlight Important Page Content
Using contrast in your color scheme can help you highlight particular areas of your website, such as a particular event, navigation, degree requirements, a process or CTA (call to action). These color contrasts help your site appear more organized and help users differentiate between parts of the page all while making the page easier to read.
Color and Accessibility
Choose colors that offer strong contrast between the text and the background to ensure readability. For example, dark text on a light background or vice versa works well. Use tools like Color Safe to ensure your website’s color palette is accessible and adheres to (WCAG).
What are Hex Codes?
Hex codes are ways of representing colors in a format that can be understood by computers.
The term “hex” comes from the word “hexadecimal,” which is a numeral system with a base of 16. You can think of them like RGB color codes. They represent the amount of Red, Green, and Blue (or RGB) values.
The red on LU websites use the following hex code:
#b00c14 RGB: 176 (red), 12 (green), 20 (blue)
How can I Generator Hex Codes?
Thankfully there are online hex code color generators you can use for free! It's easy and fun.
We recommend the site: but feel free to google hex code generators and choose one for yourself.
LU Button Colors
The following button colors are available in all LU templates.
Red - Hex (#b00c14) Teal - Hex (#00838F) Gray - Hex (#555555) Black - Hex (#000000) Gold - Hex (#ddb47f) Blue - Hex (#115B8D)Using Complimentary Colors
Getting Creative
There will be times you wish to get creative and add additional colors through images or background colors. We'll help you determine the best colors for your site. Choose from our recommended colors below or pull your favorites directly from an image you're using on your page.
Using colors from an image is a great way to choose colors that elevate the overall look and feel of your page leaving the visitor with a positive impression. The featured image shows colors that were pulled and could be used elsewhere on the page.
The following online resources can generate complimentary colors from an image or you may use the dropper tool in Adobe Photoshop to locate the colors you'd like to use.
Recommended Colors
The following colors work well with the LU red (seen below) used on all websites. Feel free to contact a Web Comm team member if you should need assistance with choosing color for your web pages.
Accessibility is always a priority when choosing colors. Be sure to use the text color featured with each sample below. The CMS template allows you to choose "dark" or "light" text. Visit to check your contrast.
PURPLES/BLUES
TEALS / GREEN
GRAYS / BLACKS
GOLDS / BROWNS
8 tools to help pick your website’s color palette
As you work to align your color scheme, there are a number of design tools you can use to better evaluate particular website color palettes and see which one works for you. We listed some of the most popular options to help you get started.
