Create Institution Landing Pages: Color Selection

An institution can create a customized, branded Transferology® landing page to help promote the college or university to prospective students. When navigating to Transferology through the institution'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 Institution Landing Pages: An Overview Guide explains how School Admins can customize select header text, background colors, buttons, icons, and borders within the page.

Articles in this series:

Customize the Transferology Landing Page
Create Institution Landing Pages: An Overview Guide
Create Institution Landing Pages: Color Selection

Primary Color
Secondary Color
Tertiary Color

Create Institution Landing Pages: Information
Create Institution Landing Pages: Image Uploads
Create Institution Landing Pages: SEO Optimization
Create Institution Landing Pages: Sample Landing Page
Edit Institution Landing Pages

As noted above, School Administrators can enter the hex numbers of school colors to customize select header text, background colors, buttons, icons, and borders within the landing page.

School Administrators can contact the institution's Marketing department to confirm hex code numbers.

Primary Color

The Primary Color fields are 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.

By default, a hex code of #e81f10 (red) is entered. If not changed, this will be the primary color that displays upon publication of the page.

To input the primary color selection:

Use the keyboard to remove the default hex code number from the Primary Color hex code box.
Enter a hex code number in its place.

Hex codes are six characters, contain numbers 0-9, and letters a-f.

The callout highlights the Primary Color hex code box.

Example of area displaying primary color text change within institution landing page. — Select to see a larger version.

Use the following fields to additionally adjust and verify the display of the color selection after entering the hex code:

Field	Image	Description
lighten background		Select this button to lighten the text.
darken background		Select this button to darken the text.
Results		The sample text will adjust to reflect the hex code entered and any lightening or darkening of the text.
Accessibility Check		WCAG AA 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. The color chosen must be WCAG AA accessible for use with the color white (#FFFFFF). A green checkmark indicates that the color selected meets this guideline. A red information icon indicates the color selected does not meet this standard. WCAG AAA A green checkmark indicates that the color selected meets WCAG AAA guidelines, which are higher than those required by CollegeSource. A red information icon indicates the color selected does not meet this standard. Institutions will not be able to publish landing pages with inaccessible colors. If a user enters a hex code that does not meet WCAG AA guidelines, a message will appear under the primary color hex code indicating that WCAG AA accessibility standards are required.

Visit a sample Transferology® institution landing page for a detailed look at how changes to the primary color appear on an institution landing page. Hex #00008b (dark blue) is the primary color used in the example.

Select the Preview Changes button at the top of the template to see how selections appear on the landing page.
Select Save Changes to save work on the landing page.

A pop-up will appear noting that the user is about to make changes to the landing page for the institution. Doing so will make these changes visible to the public if the landing page has been published. Make sure to review changes via the Preview Changes button.
- Select Yes to proceed with saving changes.
- A confirmation will appear indicating that changes have been saved.

Secondary Color

The Secondary Color fields establish the color of the main buttons on the Transferology homepage (" Sign up" and " Get started") and icons throughout the page.

By default, a hex code of #0090b0 (blue) is entered. If not changed, this will be the primary color that displays upon publication of the page.

To input the secondary color selection:

Use the keyboard to remove the default hex code number from the Secondary Color hex code box.
Enter a hex code number in its place.

Hex codes are six characters, contain numbers 0-9, and letters a-f.

The callout highlights the Secondary Color hex code box.

Example of area displaying secondary color text change within institution landing page. — Select to see a larger version

Use the following fields to additionally adjust and verify the display of the color selection after entering the hex code:

Field	Image	Description
lighten background		Select this button to lighten the buttons' background, icons, and borders.
darken background		Select this button to darken the buttons' background, icons, and borders.
Results		The button will adjust to reflect the hex code entered and any lightening or darkening of its background.
Accessibility Check		WCAG AA 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. The color chosen must be WCAG AA accessible for use with the color white (#FFFFFF). A green checkmark indicates that the color selected meets this guideline. A red information icon indicates the color selected does not meet this standard. WCAG AAA A green checkmark indicates that the color selected meets WCAG AAA guidelines, which are higher than those required by CollegeSource. A red information icon indicates the color selected does not meet this standard. Institutions will not be able to publish landing pages with inaccessible colors. If a user enters a hex code that does not meet WCAG AA guidelines, a message will appear under the primary color hex code indicating that WCAG AA accessibility standards are required.

Visit a sample Transferology® institution landing page for a detailed look at how changes to the secondary color appear on an institution landing page. Hex #b94700 (orange) is the secondary color used in the example.

Select the Preview Changes button at the top of the template to see how selections appear on the landing page.
Select Save Changes to save work on the landing page.

A pop-up will appear noting that the user is about to make changes to the landing page for the institution. Doing so will make these changes visible to the public if the landing page has been published. Make sure to review changes via the Preview Changes button.
- Select Yes to proceed with saving changes.
- A confirmation will appear indicating that changes have been saved.

Tertiary Color

The Tertiary Color fields establish the border color of the infographics on the Transferology homepage (" Quick facts", map location).

By default, a hex code of #0090b0 (blue) is entered. If not changed, this will be the tertiary color that displays upon publication of the page.

To input the tertiary color selection:

Use the keyboard to remove the default hex code number from the Tertiary Color hex code box.
Enter a hex code number in its place.

Hex codes are six characters, contain numbers 0-9, and letters a-f.

The callout highlights the Tertiary Color hex code box.

Example of area displaying tertiary color text change within institution landing page. — Select to see a larger version

Use the following fields to additionally adjust and verify the display of the color selection after entering the hex code:

Field	Image	Description
lighten background		Select this button to lighten the buttons' background, icons, and borders.
darken background		Select this button to darken the buttons' background, icons, and borders.
Results		The button will adjust to reflect the hex code entered and any lightening or darkening of its background.
Accessibility Check		WCAG AA 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. The color chosen must be WCAG AA accessible for use with the color white (#FFFFFF). A green checkmark indicates that the color selected meets this guideline. A red information icon indicates the color selected does not meet this standard. WCAG AAA A green checkmark indicates that the color selected meets WCAG AAA guidelines, which are higher than those required by CollegeSource. A red information icon indicates the color selected does not meet this standard. Institutions will not be able to publish landing pages with inaccessible colors. If a user enters a hex code that does not meet WCAG AA guidelines, a message will appear under the primary color hex code indicating that WCAG AA accessibility standards are required.

Visit a sample Transferology® institution landing page for a detailed look at how changes to the tertiary color appear on an institution landing page. Hex #4a584b (dark green) is the tertiary color used in the example.