Web Color Guidance

Color plays a crucial role in shaping the visual identity and usability of our product. This color palette ensures consistency, accessibility, and emotional clarity across all web applications. Each color in the system has been carefully chosen to support a harmonious aesthetic while serving specific functional roles.

This guide defines the correct usage of our primary and suggested secondary colors, outlines restricted usage, and provides direction on how to effectively use color to enhance user interface (UI) communication. While these approved colors should be the colors used for the vast majority of university projects, we understand that there will be occasions when other colors may be considered for limited use, please work with University Relations in these cases to ensure brand consistency and awareness.

Approved colors and text overlays appear below. These colors are approved for text overlay only at the sizes and colors defined to maintain compliance with the WCAG 2.2 guidelines.

Primary Colors

Our primary colors define the core identity of the brand and are used most prominently across UI components. These colors are used for key interactive elements, navigation and brand reinforcement.

Razorback Red
#9D2235

bg-razorback-red

Normal Text (16px):
  • FFFFFF (AAA)
  • F2F2F4 (AA)
  • C7C8C9 (AA)
Large Text (24px):
  • FFFFFF (AAA)
  • F2F2F4 (AAA)
  • DDBA96 (AA)
  • 9DC9D5 (AA)
  • C7C8C9 (AAA)

RGB: 161 | 0 | 47

Apple Blossom
#FFFFFF

bg-appleblossom

Normal Text (16px):
  • 9D2235 (AAA)
  • 000000 (AAA)
  • 464648 (AAA)
  • 492D14 (AAA)
  • 0F3842 (AAA)
Large Text (24px):
  • 9D2235 (AAA)
  • 000000 (AAA)
  • 464648 (AAA)
  • 492D14 (AAA)
  • 0F3842 (AAA)
  • 957552 (AA)
  • 3E94AA (AA)

RGB: 255 | 255 | 255

Secondary Colors

Secondary colors most often serve in a supporting role, allowing our primary colors to stand out.

Quartz
#F2F2F4

bg-quartz

Normal Text (16px):
  • 9D2235 (AA)
  • 000000 (AAA)
  • 464648 (AAA)
  • 492D14 (AAA)
  • 0F3842 (AAA)
Large Text (24px):
  • 9D2235 (AAA)
  • 000000 (AAA)
  • 464648 (AAA)
  • 492D14 (AAA)
  • 0F3842 (AAA)
  • 957552 (AA)
  • 3E94AA (AA)

RGB: 242 | 242 | 242

Silverleaf
#C7C8C9

bg-silverleaf

Normal Text (16px):
  • 9D2235 (AA)
  • 000000 (AAA)
  • 464648 (AA)
  • 492D14 (AAA)
  • 0F3842 (AAA)
Large Text (24px):
  • 9D2235 (AAA)
  • 000000 (AAA)
  • 464648 (AAA)
  • 492D14 (AAA)
  • 0F3842 (AAA)

RGB: 199 | 200 | 201

Spoofer's Stone
#464648

bg-spoofers

Normal Text (16px):
  • FFFFFF (AAA)
  • F2F2F4 (AAA)
  • DDBA96 (AA)
  • 9DC9D5 (AA)
  • C7C8C9 (AA)
Large Text (24px):
  • FFFFFF (AAA)
  • F2F2F4 (AAA)
  • DDBA96 (AAA)
  • 9DC9D5 (AAA)
  • C7C8C9 (AAA)

RGB: 70 | 70 | 72

Accent Colors

Accent colors provide additional creative flexibility but should be used sparingly.

Buckskin
#DDBA96

bg-buckskin

Normal Text (16px):
  • 000000 (AAA)
  • 464648 (AA)
  • 492D14 (AA)
  • 0F3842 (AA)
Large Text (24px):
  • 9D2235 (AA)
  • 000000 (AAA)
  • 464648 (AAA)
  • 492D14 (AAA)
  • 0F3842 (AAA)

RGB: 221 | 186 | 150

Hickory
#957552

bg-hickory

Normal Text (16px):
  • 000000 (AA)
Large Text (24px):
  • FFFFFF (AA)
  • 000000 (AAA)
  • F2F2F4 (AA)

RGB: 149 | 117 | 82

Bauxite
#492D14

bg-bauxite

Normal Text (16px):
  • FFFFFF (AAA)
  • F2F2F4 (AAA)
  • DDBA96 (AA)
  • 9DC9D5 (AAA)
  • C7C8C9 (AAA)
Large Text (24px):
  • FFFFFF (AAA)
  • F2F2F4 (AAA)
  • DDBA96 (AAA)
  • 9DC9D5 (AAA)
  • C7C8C9 (AAA)
  • 3E94AA (AA)

RGB: 73 | 45 | 20

Clearsky
#9DC9D5

bg-clearsky

Normal Text (16px):
  • 000000 (AAA)
  • 464648 (AA)
  • 492D14 (AAA)
  • 0F3842 (AAA)
Large Text (24px):
  • 9D2235 (AA)
  • 000000 (AAA)
  • 464648 (AAA)
  • 492D14 (AAA)
  • 0F3842 (AAA)

RGB: 157 | 201 | 213

Springwater
#3E94AA

bg-springwater

Normal Text (16px):
  • 000000 (AA)
Large Text (24px):
  • FFFFFF (AA)
  • 000000 (AAA)
  • F2F2F4 (AA)
  • 492D14 (AA)
  • 0F3842 (AA)

RGB: 62 | 148 | 170

Storm Cloud
#0F3842

bg-stormcloud

Normal Text (16px):
  • FFFFFF (AAA)
  • F2F2F4 (AAA)
  • DDBA96 (AA)
  • 9DC9D5 (AAA)
  • C7C8C9 (AAA)
Large Text (24px):
  • FFFFFF (AAA)
  • F2F2F4 (AAA)
  • DDBA96 (AAA)
  • 9DC9D5 (AAA)
  • C7C8C9 (AAA)
  • 3E94AA (AA)

RGB: 15 | 56 | 66

Core vs. Accent Color Usage

Maintaining a clear distinction between primary and secondary colors is vital to creating a cohesive and accessible visual narrative.

Usage Guidelines:
  • Key Elements: Apply primary colors to core components such as main buttons, navigation bars, and feature backgrounds.
  • Brand Consistency: Adhere strictly to the defined HEX/RGB values to ensure consistency, whether on digital platforms or printed materials.
  • Emotional Impact: Leverage the psychological impact of these colors to evoke the intended brand emotions.
  • HEX (#) colors should be used when designing websites.
  • RGB colors should be used when designing graphics for digital signage and projection. Photos and graphics should also be converted to RGB for web use.

Ratios

50% White
25% Razorback Red
15% Secondary
10% Accent
60% White
25% Razorback Red
15% Secondary

Examples of Using Colors Poorly

Issue: pink is a restricted color, there is a lack of contrast between the background and the typography

Issue: no UARK red in the design. The secondary colors need to compliment the UARK red, not ignore it.

Issue: too many colors creates visual noise and a lack of contrast for the typography

Issue: too much red overloads the page, compare the real University Relations About Us page for an example of color background variation:

Designers are encouraged to consult this guide regularly, and any deviations should undergo a formal review to ensure compliance with our visual identity standards.

Accessibility Considerations: Ensure sufficient contrast ratio between foreground and background (aim for WCAG 2.1 AA at minimum).

  • Contrast and Legibility: Always ensure proper contrast ratios between text and background. Design elements must meet or exceed WCAG guidelines to support users with varied visual abilities.
  • Consistency Across Devices: Verify that color usage remains effective and consistent in different lighting conditions and on diverse screens (desktop, mobile, print).
  • Use tools like WebAIM Contrast Checker
  • Avoid using color as the only way to convey information—pair it with icons or text where needed
  • AA designated text overlay must be 18px or greater.
  • AAA designated text overlay must be 12px or greater.

Using Colors to Communicate UI

Colors are powerful communicators when used strategically within an interface. Here’s how to harness their potential:

Status Indicators:

  • Success: Use approved green tones (e.g., Primary Green) to signal successful actions or confirmation messages.
  • Error: Apply consistent red hues (e.g., Primary Red) to denote errors or warnings, ensuring they grab attention instantly.
  • Information: Utilize calmer colors like a designated light blue or neutral shades to present informational content without overwhelming the user.

Interactivity:

  • Actionable Elements: Reserve primary colors for elements that require immediate attention, such as active buttons or key interactive components.
  • Hover and Active States: Employ subtle variations (in brightness or saturation) of the UI colors to clearly indicate hover or active states, enhancing user feedback.
  • Disabled Components: Use muted or desaturated tones to denote inactive or unavailable options, thereby setting clear expectations.