Colors

Beyond our logo, color is the most recognizable aspect of our brand. Our color palette helps audiences identify us at a glance. The way we use color sets the mood for each piece and reflects our heritage and surroundings. Our communications draw on three color palettes to unite them.

Note: Many of these colors should look familiar because most of them, including the primary orange and blue, have not changed. Several colors in the secondary and accent palettes have changed, so even if they look similar to those you’ve used in the past, use this guide to ensure that you are using the correct colors.

COLOR RATIOS

OUR COLORS

GRADIENTS

SECONDARY PALETTE

NEUTRAL PALETTE

USING COLOR

COLOR NUMBERS

DIGITAL PALETTE

COLOR RATIOS

Our color palette is bold and distinctive. It relies primarily on our heritage colors of orange and blue – and generous white space. Secondary colors are used for deeper content levels in layouts and for breaking up headlines. We create a modern look that elevates our momentum by leaning on our heritage colors and plenty of open space.

Note: Always use the color values listed in this section when using color builds. They have been adjusted for the best screen and print reproduction and may not match Pantone Color Bridge breakdowns.

 

Color Chart. Primary colors of Orange and blue, plus white. Supporting colors of blue gradient, orange gradient, black, dark grey, medium grey, light cool grey, light warm grey, red, yellow, green, dark blue, and purple.

OUR COLORS

At our core, we are orange and blue. As part of our brand’s visual language, we express that in all its forms by expanding the flexibility of these two colors.

With that in mind, this palette unifies the brand’s colors, reflecting our institution’s philosophy and mission.

Note: Always use the color values listed in this section when using color builds. They have been adjusted for the best screen and print reproduction and may not match Pantone Color Bridge breakdowns.

 

Core Orange: PMS 172; CMYK 0/70/100/0; RGB 250/70/22, HEX #FA4616. Core Blue: PMS 287; CMYK 100/60/0/20; RGB 0/33/165; HEX #0021A5

GRADIENTS

Two color gradients are available for use. They pair our Core Blue with Dark Blue and our Core Orange with Alachua.

Note: Premade gradient swatches are available for download at our online brand center. Go to Downloads, and under Brand Toolkit, choose Color Swatches. To build your own, please follow the guidelines pictured below.

Gradient blue is built at a 90-degree angle running from core blue at the top to dark blue at the bottom. Gradient orange is built at a 45-degree angle from core orange at the top right corner to Alachua (yellow) at the bottom left corner.

SECONDARY PALETTE

Orange and blue should drive most marketing, campus, and alumni materials, but sometimes other colors are needed. For those circumstances, we have developed this secondary palette.

These colors are best suited for internal communications, but they may also be used in long-form communications where more colors are needed for variety, infographics, and icons. Large fields of these colors should be avoided. Be sure that our primary orange and blue are always the most prominent colors.

Under no circumstances should any of these colors become the predominant color for a school, center, institute, or department.

Secondary Palette Colors. Bottlebrush (red): PMS 1795, CMYK 0/96/82/1, RGB 211/39/55, HEX #D32737. Alachua (yellow): PMS 130, CMYK 0/32/100/0, RGB 242/169/0, HEX #F2A900. Gator (green): PMS 7731, CMYK 78/3/84/22, RGB 34/136/76, HEX #22884C. Dark Blue: PMS 655, CMYK 100/73/0/61, RGB 0/38/87, HEX #002657. Perennial (purple): PMS 7651, CMYK 46/98/1/35, RGB 106/42/96, HEX #6A2A60.

NEUTRAL PALETTE

Neutral tones can add depth, warmth, sophistication, and richness to our communications. Note, however, that white should be used more frequently and prominently than these neutrals.

Also, note that we use black only for long passages of body copy. Never use it in any other way.

Note: White is an indispensable color. Rather than viewing it as a blank area, see it as a break. Please don’t rush to fill it: it can focus attention on what is there rather than drawing attention to what isn’t. Always balance color, typography, and graphic elements with open space.

Neutral Palette. Black: CMYK 0/0/0/100, RGB 0/0/0, HEX #000000 PMS Cool Grey 11: CMYK 44/34/22/77, RGB 52/55/65, HEX #343741 PMS Cool Grey 3: CMYK 8/5/7/16, RGB 199/201/200, HEX #C7C9C8 PMS Warm Grey 1: CMYK 10/10/11/0, RGB 216/212/215, HEX #D8D4D7 White: CMYK 0/0/0/0, RGB 255/255/255, HEX #FFFFFF

USING COLOR

Using color is an easy way to evoke energy and emotion within our communications. Use these guides as a reference for using color to convey a particular mood and for applying our palette with restraint and consistency.

Color Mood Chart. Orange and blue are centered. There is a matrix of styles. Vertical line goes from formal (top) to casual (bottom). Horizontal line goes from subtle (left) to bold (right). Black, grey, and light grey are in the subtle to formal quadrant. Dark blue and purple are in the bold to formal quadrant. Dark grey is in the subtle to casual quadrant. Green, red, and yellow are in the bold to casual quadrant.

COLOR SPECTRUM

This illustrates the color applications of four desired outcomes. These particular color combinations are not dictates; instead, these spectrums demonstrate the proportional adjustments to be made throughout a designed piece.

Color Spectrum Moods. Formal/Bold. 50% of the spectrum is made of Orange, Blue, and White in equal parts. 25% of the spectrum is made of the orange gradient and the blue gradient in equal parts. 25% of the spectrum is made of gold and red in equal parts. Casual/Bold. 60% of the spectrum is made of Orange, Blue, and White in equal parts. 20% of the spectrum is made of the orange gradient and the blue gradient in equal parts. 20% of the spectrum is made of gold, red, light grey, and green in equal parts. Casual/ Subtle. 30% of the spectrum is made of orange and blue in equal parts. 40% of the spectrum is white. 15% of the spectrum is orange gradient and blue gradient in equal parts. 15% of the spectrum is made of purple, black, light grey and dark grey in equal parts. Formal/ Subtle. 30% of the spectrum is made of orange and blue in equal parts. 40% of the spectrum is made of white. 10% of the spectrum is made of blue gradient and black in equal parts. 20% of the spectrum is made of light grey and dark grey in equal parts.

COLOR NUMBERS

COLOR COLOR NAME PMS CMYK RGB HEX
COLOR CORE ORANGE PMS 172 0 | 70 | 100 | 0 250 | 70 | 22 #FA4616
COLOR CORE BLUE PMS 287 100 | 60 | 0 | 20 0 | 33 | 165 #0021A5
COLOR BOTTLEBRUSH PMS 1795 0 | 96 | 82 | 1 211 | 39 | 55 #D32737
COLOR ALACHUA PMS 130 0 | 32 | 100 |0 242 | 169 | 0 #F2A900
COLOR GATOR PMS 7731 78 | 3 | 84 | 22 34 | 136 | 72 #22884C
COLOR DARK BLUE PMS 655 100 | 73 | 0 | 61 0 | 38 | 87 #002657
COLOR PERENNIAL PMS 7651 46 | 98 | 1 | 35 106 | 42 | 96 #6A2A60
COLOR BLACK PMS BLACK 0 | 0 | 0 | 100 0 | 0 | 0 #000000
COLOR COOL GREY 11 COOL GRAY 11 44 | 34 | 22 | 77 52 | 55 | 65 #343741
COLOR COOL GREY 3 COOL GRAY 3 8 | 5 | 7 | 16 199 | 201 | 200 #C7C9C8
COLOR WARM GREY 1 WARM GREY 1 10 | 10 | 11 | 0 216| 212 | 215 #D8D4D7
COLOR WHITE WHITE 0 | 0 | 0 | 0 255 | 255 | 255 #FFFFFF

DIGITAL PALETTE

Like printed colors, screen-based colors should be consistent across multiple pages and sites, and a limited color palette is well-suited for digital applications.

All communications should follow the brand’s core color palette. The hexadecimal values of our core palette have been optimized for accessibility on light and dark backgrounds, which can be found above.

To learn more about using the UF Brand Colors with dark mode, download the following presentation: Designing for Dark Mode.
For additional information, contact us using the form at the bottom of this page.

Color Consistency:
Hexadecimal values are derived from the Pantone Color Bridge system to ensure that colors are consistent from their original selection to print and screen applications.

Note: Adjusted for AA Normal Text Compliance (tested on webaim.org color contrast checker). These colors do not use the formulas recommended by Pantone Color Bridge.

 

AA-COMPLIANT COLOR FORMULAS FOR SCREEN APPLICATIONS

Ensuring adequate text and visual media contrast can help people with visual impairments navigate content more easily.

The Web Content Accessibility Guidelines (WCAG) provide a set of international standards developed by the Worldwide Web Consortium (W3C), the web’s governing body.

AA Level compliance is a vital contrast standard for displaying text and images in both the foreground and the background. The goal of these accommodations is to help ensure that our online content is equally accessible and user-friendly
to all users.

Because of their quick impact and smaller size, communication pieces on the web (such as web ads) should only feature our orange and blue colors. At the right, we’ve outlined a short list of compliant and non-compliant color pairings for our core colors.

This list is not comprehensive; it’s essential to check accessibility for every piece you create. For additional guidance on web accessibility, visit webaim.org/resources/contrastchecker.

Note: Large text is typically defined as 14 points or larger and bold.

 

AA-Compliant Color Formulas. Compliant: White large text on blue. Blue large text on white. Normal white text on blue. Normal blue text on white. White large text on orange. Orange large text on white. Orange large text in the light section of a blue gradient. Blue large text in the light section of an orange gradient. Non-Compliant. White normal text on an orange background. Orange normal text on a white background. Orange large text in the light section of a blue gradient. Blue large text in the dark section of an orange gradient.