Color is a foundational expression of the Fred Hutch brand. Our palette reflects our history, partnerships and values, while supporting clarity, accessibility and consistency across every touchpoint.
The following guidelines outline how to use our colors intentionally — including accessible pairings, recommended combinations and proportions, gradient usage, and key don’ts — to ensure our work is cohesive, inclusive and unmistakably Fred Hutch.
Fred Hutch Navy
HEX: #18365D
RGB: 27, 54, 93
CMYK: 95, 74, 7, 44
PMS: 534C
Our iconic Fred Hutch Navy represents intellect, professionalism and knowledge.
White
HEX: #FFFFFF
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0
Crisp, clean and airy like the Sloan Clinic, white is a primary color that grounds our designs.
Bright Blue
HEX: #00ABC8
RGB: 0, 171, 200
CMYK: 83, 0, 21, 0
PMS: 3125C
Bright Blue adds energy and trust to designs, pairing well with Teal and other secondary colors. Use it to highlight key elements and create a vibrant, engaging look.
Vivid Yellow
HEX: #FFB500
RGB: 255, 181, 0
CMYK: 0, 22, 100, 2
PMS: 7549C
Not to be used on its own, Vivid Yellow can pair with any of our other secondary colors.
Warm Purple
HEX: #AA4AC4
RGB: 170, 74, 196
CMYK: 48, 80, 0, 0
PMS: 2582C
Best used with other colors to avoid confusion with UW Medicine, Warm Purple adds energy and brightness to layouts.
Light Grey
HEX: #F4F4F4
RGB: 244, 244, 244
CMYK: 0, 0, 0, 10
PMS: 179-2 C
Light Grey is often used as text backgrounds and holding shapes since it is light enough to help break apart informaton, without being too heavy or distracting.
Teal
HEX: #0A799A
RGB: 10, 121, 154
CMYK: 87, 42, 27, 3
PMS: 632C
Found at the middle of our Bright Blue and Fred Hutch Navy, Teal is used commonly on digital materials to indicate an action. It can also be added to print materials as an accent color.
Dark Navy
HEX: #112345
Dark Navy is used most commonly on digital materials and websites as the color for our text. It offers a darker alternative to Fred Hutch Navy when additional contrast is required.
Digital Accessibility Guidelines
Text
On white or Light Grey backgrounds, text should be Dark Navy and links should always be bold and Teal.
On dark backgrounds, text should be white and links should always be bold, white text with an underline.
Buttons
Fred Hutch's primary button on light backgrounds uses Teal as the base action color and is accessible with white text in Circular Medium font. The secondary buttons use a 1px Teal outline with teal text.
On dark backgrounds white become the primary action color with Teal text, secondary buttons use a 1px white outline with white text.
Color Combinations
To ensure consistent brand presentation, we have created a list of recommended color pairings for backgrounds, graphics and text. While this list is not exhaustive, it provides designers with preferred combinations to use.
Color Proportions
The primary colors, Fred Hutch Navy and white, will ground the accent colors.
When using the colors, the predominant usage will move from left to right. Use Dark Navy the most and Warm Purple the least.
Selective Colors
When the information needs to be clear and concise, using a few selective colors can be effective. For high legibility, using Fred Hutch Navy with or without an accent color on a white background for print pieces, and white with or without an accent color on a Fred Hutch Navy background for digital pieces will give a nice contrast.
Light and Dark Mode
Selecting the appropriate color mode for your design significantly impacts its overall experience. Light backgrounds, such as white or spot colors, create a clean, fresh and airy feel. In contrast, navy blue and dark gradient backgrounds evoke a sense of boldness, elegance and premium quality. It's crucial to consider your audience and content when deciding between light and dark modes.
Light Mode
- Background is primarily white
- Text is in Fred Hutch Navy
- Secondary colors used in supporting graphics
- Light Grey is used for holding shapes and text boxes to break up information
Considerations: Light mode, featuring dark text on a white background, is superior for readability. Therefore, when designing text-heavy documents, surveys or forms, it is recommended to use light mode or white backgrounds.
Dark Mode
- Background is primarily Fred Hutch Navy or gradient
- Headline and body text is white
- If Fred Hutch Navy is the base, accent with all secondary colors or Teal and Bright Blue
Additional Considerations
When using multi-colored gradient backgrounds, avoid excessive accent colors to prevent overcomplicating the design. You may not need additional accent graphics or colors at all.
Navy Blue Gradient
Fred Hutch Navy › Teal › Bright Blue
A gradient between Fred Hutch Navy and Bright Blue can work as a professional and dynamic foundation for a "dark mode" piece. This gradient can also be used in other graphical shapes to give depth and elegance.
Sunset Gradient
Fred Hutch Navy › Bright Blue › Warm Purple › Vivid Yellow
A gradient composed of our four logo colors evokes the beauty of Pacific Northwest sunsets. While it works best on graphic elements, it can also serve as a striking background on simple compositions.
Approved Gradient Examples
Contact Us
Questions regarding our colors and these guidelines can be directed to brand@fredhutch.org.