Create State/System Landing Pages: Color Selection

States/systems can create a customized, branded Transferology® landing page to help promote colleges and universities to prospective students. When navigating to Transferology through the system's referral link or badge, students will see the customized page (assuming it is published) instead of the CollegeSource-branded homepage. This article within Create State/System Landing Pages: An Overview Guide provides further information about how select header text, background colors, buttons, icons, and borders within the page can be customized.

Articles in this series:

Primary Color
Secondary Color
Tertiary Color
Accessibility Requirements

States and systems must work with CollegeSource to collaboratively create the initial landing page. Once the landing page is in place, it will be maintained by users at the participating institutions with the State Coordinator role in the Lab and any other State Coordinators given access to edit the page.

The hex numbers of school colors can be used to customize select header text, background colors, buttons, icons, and borders within the landing page. Hex codes are six characters, contain numbers 0-9, and letters a-f. The state/system will need to supply hex code numbers for the primary, secondary, and tertiary colors on the landing page, as described below.

Primary Color

The primary color is used to establish the color of the header text appearing on a white background and the background color of sections with white header/body text.

Callout illustrates text affected by the primary color selection.

Secondary Color

The secondary color is used to establish the color of the main buttons on the Transferology homepage ("Sign up" and "Get started"), the background color for three custom resource links, various icons used throughout the page, and the border color for "Maps."

Get started button

Tertiary Color

The tertiary color is used to establish the border color for the Participating institutions map. This map pinpoints the names and locations of institutions associated with the state/system landing page.

Participating institutions map. Text reads Use Transferology to see how your courses, exams, military experience, and life learning experiences transfer to the following institutions. The universities associated with the landing page are listed. — Select to see a larger version

Accessibility Requirements

CollegeSource is committed to ensuring its products are accessible to all users. The company follows WCAG 2.2 Level AA standards when developing all products. Thus, the primary and secondary colors chosen must be WCAG AA accessible for use with the color white (#FFFFFF).

State/system representatives can contact the appropriate Marketing department(s) to confirm hex code numbers.

Visit a sample Transferology® system landing page for a detailed look at how color selections appear on a state/system landing page.

Primary Color: Hex #00008b (dark blue).
Secondary Color: Hex #b94700 (orange).
Tertiary Color: Hex #013220 (dark green).