Color

Anchored in our “Franciscan blue,” our color palette continues to guide every touchpoint with intention and spirit, giving our brand a consistent and lively presence.

The rationale for using only approved fonts also applies to our color scheme. Please do not deviate from the 11-color palette below.

First-Tier Palette

As Franciscan aims to “own the blue” in our sector, leaning most heavily on our four-color “primary palette” can aid us in this endeavor. Think of PMS 647 as the star of the show.

Color	Digital	Print
Blue	Web RGB: 0 86 149 HEX: #005695	Print CMYK: 100 56 0 23 PMS 647
Brown	Web RGB: 87 67 25 HEX: #574319	Print CMYK: 50 60 100 48 PMS 7519
Light Blue	Web RGB: 80 145 205 HEX: #5091CD	Print CMYK: 68 34 0 0 PMS 279
Light Brown – 8% screen For web use only	Web RGB: 181 9 56 HEX: #E7E3DC	Print CMYK: 0 100 65 28 PMS 7519

Second-Tier Palette

When “pop” is needed for elements like calls-to-action, consider this grouping. Note that overuse can decrease “pop factor” and distract from our brand.

	Color	Digital	Print
	Green – For web buttons	Web RGB: 120 162 47 HEX: #78A22F	Print CMYK: 45 0 100 24 PMS 377
	Orange – For CTAs	Web RGB: 241 93 34 HEX: #F15D22	Print CMYK: 0 79 100 0 PMS 179

Third-Tier Palette

Third-tier colors are for event marketing only and should be used sparingly.

Color	Digital	Print
Pink – For breast cancer	Web RGB: 244 166 215 HEX: #F4A6D7	Print CMYK: 3 39 0 0 PMS 230
Red – For cardiovascular	Web RGB: 181 9 56 HEX: #B50938	Print CMYK: 0 100 65 28 PMS 7427
Purple	Web RGB: 108 32 126 HEX: #6C207E	Print CMYK: 63 100 0 15 PMS 2613
Teal	Web RGB: 0 146 159 HEX: #00929F	Print CMYK: 90 0 28 22 PMS 7474
Yellow	Web RGB: 253 185 19 HEX: #FDB913	Print CMYK: 0 30 100 0 PMS 130

Usage

For printing, it’s best to use CMYK. For a large print run with minimal colors or specialty print methods, it’s recommended to use the Pantone Matching System (PMS) spot colors.

For web, use the HEX values (#xxxxxx) and for digital applications, use RGB. Note that colors may vary on different computers/devices, due to inconsistent monitor color calibration.

Color Scale

Color Accessibility

Color accessibility is important because it ensures that everyone, including people with visual impairments or color vision deficiencies, can perceive and distinguish information presented in various color combinations.

The Web Content Accessibility Guidelines (WCAG) provide specific criteria for contrast ratios to ensure that text is easily readable for a wide range of users. The current WCAG 2.1 standard recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (typically 18 pt or 14 pt bold). For enhanced accessibility, the WCAG AAA level requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

By ensuring sufficient contrast between foreground and background colors, we make it easier for all users to perceive and understand the information being presented.

Background Text	#FFFFFF	#000000	#005695	#574319	#5091CD	#78A22F	#F15D22
White #FFFFFF		Text AAA 21	Text AAA 7.5	Text AAA 9.4	Text AA18 3.3	Text AA18 3	Text AA18 3.3
Black #000000	Text AAA 21		Text DNP 2.7	Text DNP 2.2	Text AA 6.2	Text AAA 7	Text AA 6.3
Blue #005695	Text AAA 7.5	Text DNP 2.7		Text DNP 1.2	Text DNP 2.2	Text DNP 2.5	Text DNP 2.2
Brown #574319	Text AAA 9.4	Text DNP 2.2	Text DNP 1.2		Text DNP 2.8	Text AA18 3.1	Text DNP 2.8
Light Blue #5091CD	Text AA18 3.3	Text AA 6.2	Text DNP 2.2	Text DNP 2.8		Text DNP 1.1	Text DNP 1
Green #78A22F	Text AA18 3	Text AAA 7	Text DNP 2.5	Text AA18 3.1	Text DNP 1.1		Text DNP 1.1
Orange #F15D22	Text AA18 3.3	Text AA 6.3	Text DNP 2.2	Text DNP 2.8	Text DNP 1	Text DNP 1.1
AAA Pass, AAA (7+) AA Pass, AA (4.5+) AA18 Pass, Large Text Only (3+) DNP Does Not Pass About WCAG 2.0 contrast

Color Contrast

Color contrast is defined as the difference between two colors when they are placed next to each other. It is important because it affects legibility and readability of text, as well as the overall comprehension of content for people with visual impairments or color vision deficiencies.

Contrast is typically measured using what’s known as the contrast ratio, a numerical value that represents the relative difference in luminance (brightness) between two colors. The contrast ratio is calculated by comparing the luminance of the foreground color (such as text) to that of the background color (such as the background of a webpage).

Don’t: Low contrast