Primary Colors
Our core brand colors. Use these as the foundation for most communications and interface elements.
Secondary Colors
Offers flexibility and variety. Inspired by the diversity of our campus, these colors complement the
primary palette and add visual interest.
Neutral Colors
Adds depth and balance. Inspired by the tones and textures found around our campus, these colors work in
harmony with the primary and secondary palettes while maintaining a cohesive and elegant look.
Accessible Brand Color Combinations
Use this tool to find color combinations that are
accessible and easy for everyone to read. Web
accessibility guidelines (WCAG) set minimum contrast levels between text and background to ensure content is
legible.
Understanding Your Contrast Ratio
To make sure text is easy to read for everyone, the Web Content Accessibility Guidelines (WCAG) set
contrast ratio standards. For small text (<24px), aim for a ratio of at least 4.5:1 (AA) or 7:1
(AAA).
For large text (≥24px), aim for 3:1 (AA) or 4.5:1 (AAA)—the same goes for any bold text greater than
18px.
Higher ratios mean better readability, especially for users with low vision. Overall, we need to
aim for AA at a minimum.
Text Color
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links
and will
darken on hover just like our default link styles.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
Similar to the contextual text color classes, easily set the background of an element to any contextual
class. Anchor
components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.
Background Color
Similar to the contextual text color classes, easily set the background of an element to any contextual
class. Anchor
components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
Background Gradients
.bg-gradient-primary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient
<style>
/* for color chips */
.color-chip__data p {
display: none;
margin: 0;
}
.color-copy-button-container {
display: none;
}
.color-chip:hover,
.color-chip:focus {
position: relative;
transition: transform 0.05s ease-in;
transform: scale(1.25);
z-index: 100;
}
.color-chip:hover .color-chip-info,
.color-chip:focus .color-chip-info {
transform-origin: top left;
transition: none;
transform: scale(0.8);
width: calc(125% - 1rem);
height: calc(125% - 1rem);
}
.primary.slim.color-chip:hover,
.primary.slim.color-chip:focus,
.tertiary-container .color-chip:hover,
.tertiary-container .color-chip:focus {
transform: scale(1.5, 1.25);
border-left-width: calc(5px/1.5);
/* 5/1.5 */
border-right-width: calc(5px/1.5);
border-top-width: calc(5px/1.25);
border-bottom-width: calc(5px/1.25);
}
.primary.slim.color-chip:hover .color-chip-info,
.primary.slim.color-chip:focus .color-chip-info,
.tertiary-container .color-chip:hover .color-chip-info,
.tertiary-container .color-chip:focus .color-chip-info {
transform: scale(calc(1/1.5), calc(1/1.25));
margin: calc(0.5rem/1.25) calc(0.5rem/1.5);
/* 0.5 / 1.25 and 0.5 / 1.5 */
width: calc(150% - 1rem);
height: calc(125% - 1rem);
}
.secondary-container .color-chip:hover,
.secondary-container .color-chip:focus {
transform: scale(2.25, 1.25);
border-left-width: calc(5px/2.25);
/* 5/2.25 */
border-right-width: calc(5px/2.25);
border-top-width: calc(5px/1.25);
border-bottom-width: calc(5px/1.25);
}
.secondary-container .color-chip:hover .color-chip-info,
.secondary-container .color-chip:focus .color-chip-info {
transform: scale(calc(1/2.25), calc(1/1.25));
margin: calc(0.5rem/1.25) calc(0.5rem/2.25);
/* 0.5 / 1.25 and 0.5 / 2.25 */
width: calc(225% - 1rem);
height: calc(125% - 1rem);
}
.color-chip:hover p,
.color-chip:focus p {
display: inherit;
transform-origin: top left;
overflow: visible;
width: 100%;
}
.color-chip:hover .color-copy-button-container,
.color-chip:focus .color-copy-button-container {
display: inherit;
}
.color-chip-container .col-lg:nth-child(1) .color-chip:nth-child(1) {
transform-origin: top left;
}
.color-chip-container .col-lg:nth-child(1) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
.color-chip-container .col-lg:nth-last-child(1) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container .col-lg:nth-last-child(1) .color-chip:nth-child(3) {
transform-origin: bottom right;
}
.color-chip-container .color-chip:nth-child(1) {
transform-origin: top;
}
.color-chip-container .color-chip:nth-child(2) {
transform-origin: center;
}
.color-chip-container .color-chip:nth-child(3) {
transform-origin: bottom;
}
.color-chip-container .col-lg:nth-child(1) .color-chip {
transform-origin: left;
}
.color-chip-container .col-lg:nth-last-child(1) .color-chip {
transform-origin: right;
}
.color-chip__name {
font-weight: bold;
}
@media (min-width: 766px) and (max-width: 991.98px) {
/* for block of colors with 3 per row */
.secondary-container .col-md-4 .color-chip:hover,
.secondary-container .color-chip:focus {
transform: scale(1.25, 1.25);
border-left-width: calc(5px / 1.25);
/* 5/2.25 */
border-right-width: calc(5px / 1.25);
border-top-width: calc(5px / 1.25);
border-bottom-width: calc(5px / 1.25);
}
.secondary-container .col-md-4 .color-chip:hover .color-chip-info,
.secondary-container .color-chip:focus .color-chip-info {
transform: scale(calc(1/1.25), 0.8);
margin: calc(0.5rem / 1.25) calc(0.5rem / 1.25);
/* 0.5 / 1.25 and 0.5 / 2.25 */
width: calc(125% - 1rem);
height: calc(125% - 1rem);
}
/* for block of colors with 4 per row */
.secondary-container .col-md-3 .color-chip:hover,
.secondary-container .color-chip:focus {
transform: scale(calc(15/9), 1.25);
border-left-width: calc(5px / calc(15/9));
/* 5/2.25 */
border-right-width: calc(5px / calc(15/9));
border-top-width: calc(5px / 1.25);
border-bottom-width: calc(5px / 1.25);
}
.secondary-container .col-md-3 .color-chip:hover .color-chip-info,
.secondary-container .color-chip:focus .color-chip-info {
transform: scale(calc(1/calc(15/9)), 0.8);
margin: calc(0.5rem / 1.25) calc(0.5rem / calc(15/9));
/* 0.5 / 1.25 and 0.5 / 2.25 */
width: calc(calc(1500%/9) - 1rem);
height: calc(125% - 1rem);
}
.color-chip-container.secondary-container .col-lg:nth-child(1) .color-chip:nth-child(1) {
transform-origin: top left;
}
/* agave */
.color-chip-container.secondary-container .col-lg:nth-child(4) .color-chip:nth-child(1) {
transform-origin: top left;
}
.color-chip-container.secondary-container .col-lg:nth-child(1) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
/* agave dark */
.color-chip-container.secondary-container .col-lg:nth-child(4) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
/* palm */
.color-chip-container.secondary-container .col-lg:nth-child(3) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(1) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container.secondary-container .col-lg:nth-child(3) .color-chip:nth-child(3) {
transform-origin: bottom right;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(1) .color-chip:nth-child(3) {
transform-origin: bottom right;
}
.color-chip-container.secondary-container .color-chip:nth-child(1) {
transform-origin: top;
}
.color-chip-container.secondary-container .color-chip:nth-child(2) {
transform-origin: center;
}
.color-chip-container.secondary-container .color-chip:nth-child(3) {
transform-origin: bottom;
}
.color-chip-container.secondary-container .col-lg:nth-child(1) .color-chip {
transform-origin: left;
}
/* agave light */
.color-chip-container.secondary-container .col-lg:nth-child(4) .color-chip {
transform-origin: left;
}
/* palm light */
.color-chip-container.secondary-container .col-lg:nth-child(3) .color-chip {
transform-origin: right;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(1) .color-chip {
transform-origin: right;
}
.color-chip-container.tertiary-container .col-lg:nth-child(1) .color-chip:nth-child(1) {
transform-origin: top left;
}
.color-chip-container.tertiary-container .col-lg:nth-child(2) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container.tertiary-container .col-lg:nth-child(3) .color-chip:nth-last-child(1) {
transform-origin: bottom left;
}
.color-chip-container.tertiary-container .col-lg:nth-child(4) .color-chip:nth-last-child(1) {
transform-origin: bottom right;
}
.color-chip-container.tertiary-container .col-lg:nth-child(2n-1) .color-chip {
transform-origin: left;
}
.color-chip-container.tertiary-container .col-lg:nth-child(2n) .color-chip {
transform-origin: right;
}
.tertiary-container .color-chip:hover,
.color-chip:focus {
position: relative;
transition: transform 0.05s ease-in;
transform: scale(1.25);
z-index: 100;
}
.tertiary-container .color-chip:hover .color-chip-info,
.color-chip:focus .color-chip-info {
transform-origin: top left;
transition: none;
transform: scale(0.8);
width: calc(125% - 1rem);
height: calc(125% - 1rem);
}
}
/* mobile view. no copy button because who's copying on mobile?? */
@media (max-width: 767.98px) {
.color-chip-container .color-chip:hover,
.color-chip:focus {
position: relative;
transition: transform 0.05s ease-in;
transform: scale(1.25);
border-left-width: calc(5px / 1.25);
/* 5/2.25 */
border-right-width: calc(5px / 1.25);
border-top-width: calc(5px / 1.25);
border-bottom-width: calc(5px / 1.25);
}
.color-chip-container .color-chip:hover .color-chip-info,
.color-chip:focus .color-chip-info {
transform: scale(calc(1/1.25));
margin: calc(0.5rem/1.25) calc(0.5rem/1.25);
width: calc(125% - 1rem);
height: calc(125% - 1rem);
}
.color-chip-container .col-lg:nth-child(1) .color-chip:nth-child(1) {
transform-origin: top left;
}
.color-chip-container .col-lg:nth-child(2) .color-chip:nth-child(1) {
transform-origin: top right;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(1) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
.color-chip-container.secondary-container .col-lg:nth-last-child(2) .color-chip:nth-child(3) {
transform-origin: bottom right;
}
.color-chip-container .col-lg:nth-child(2n-1) .color-chip {
transform-origin: left;
}
.color-chip-container .col-lg:nth-child(2n) .color-chip {
transform-origin: right;
}
.color-chip-container .col-lg:nth-last-child(1) .color-chip:nth-child(1) {
transform-origin: left;
}
.color-chip-container.tertiary-container .col-lg:nth-child(1) .color-chip:nth-child(3) {
transform-origin: left;
}
.color-chip-container.tertiary-container .col-lg:nth-last-child(2) .color-chip:nth-child(3) {
transform-origin: bottom left;
}
.color-chip-container .col-lg:nth-child(1) .color-chip:nth-child(3) {
transform-origin: left;
}
.color-chip-container.tertiary-container .col-lg:nth-last-child(1) .color-chip:nth-child(1) {
transform-origin: right;
}
.primary.slim.color-chip:hover,
.primary.slim.color-chip:focus {
transform: scale(2.5, 1.25);
border-left-width: calc(5px/1.5);
/* 5/1.5 */
border-right-width: calc(5px/1.5);
border-top-width: calc(5px/1.25);
border-bottom-width: calc(5px/1.25);
}
.primary.slim.color-chip:hover .color-chip-info,
.primary.slim.color-chip:focus .color-chip-info {
transform: scale(calc(1/2.5), calc(1/1.25));
margin: calc(0.5rem/1.25) calc(0.5rem/2.5);
/* 0.5 / 1.25 and 0.5 / 1.5 */
width: calc(250% - 1rem);
height: calc(125% - 1rem);
}
}
.color-chip {
height: 10rem;
border: 5px solid white;
}
.color-chip-info {
margin: 0.5rem;
}
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
position: relative;
width: 100%;
padding: 0;
}
.row {
margin: 0;
}
.color-copy-button-container {
position: absolute;
right: 0;
bottom: 0;
border: 1px solid;
width: fit-content;
padding: 5px;
text-align: center;
}
.color-copy-button {
text-align: center;
margin: 5px;
}
.color-copy-button-container:hover {
cursor: pointer;
}
/* for color combo */
.color-circle {
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
}
.color-circle:hover {
cursor: pointer;
}
.color-circle.selected {
outline: 1px solid black;
outline-offset: 5px;
}
.color-button {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 4.5rem;
}
.color-combo-container {
margin: 3.5rem 1.5rem 1.5rem 1.5rem;
padding: 2rem;
border: 1px solid #2A373F;
}
.color-selector {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
font-size: 1rem;
}
.sandbox {
padding: 2rem 2.5rem;
align-items: center;
}
.color-contrast-container {
padding: 2rem;
background-color: #F8F9FA;
}
.color-combo-header {
margin-top: 2rem;
margin-bottom: 2rem;
}
.color-button {
position: relative;
}
.color-tip {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
top: -50%;
z-index: 10;
}
.color-button:hover .color-tip {
visibility: visible;
opacity: 1;
}
.check-container {}
.pass-fail {
width: 3.125rem;
text-align: center;
}
.pass {
color: green;
border: 1px solid;
height: fit-content;
border-radius: 0.5rem;
padding: 0.25rem;
}
.fail {
color: #A9082B;
border: 1px solid;
height: fit-content;
border-radius: 0.5rem;
padding: 0.25rem;
}
.compliance {
gap: 2rem;
}
.compliance-row {
display: flex;
gap: 10px;
}
.compliance-category {
padding: 0.25rem 0;
height: fit-content;
}
.color-contrast {
font-weight: 700;
font-size: xxx-large;
}
@media (min-width: 1250px) {
.my-col-lg-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%;
}
.my-col-lg-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
max-width: 66.66667%;
}
}
</style>
<div>
<!-- primary colors -->
<h2 class="mt-5">Primary Colors</h2>
<p>Our core brand colors. Use these as the foundation for most communications and interface
elements.</p>
<div class="primary-color-chip-container">
<div class="row">
<div class="col-6">
<div class="color-chip primary" tabindex="0"
style="transform-origin: top left">
<div class="color-chip-info">
<div class="color-chip__name">
Santa Clara Red
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip primary" tabindex="0"
style="transform-origin: bottom left">
<div class="color-chip-info">
<div class="color-chip__name">
White
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="color-chip primary" tabindex="0"
style="transform-origin: top right">
<div class="color-chip-info">
<div class="color-chip__name">
Bronco Red
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="color-chip primary slim" tabindex="0"
style="transform-origin: bottom">
<div class="color-chip-info">
<div class="color-chip__name">
Stone
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="color-chip primary slim" tabindex="0"
style="transform-origin: bottom right">
<div class="color-chip-info">
<div class="color-chip__name">
Black
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- secondary colors -->
<h2 class="mt-5">Secondary Colors</h2>
<p>Offers flexibility and variety. Inspired by the diversity of our campus, these colors complement
the
primary palette and add visual interest.</p>
<div class="color-chip-container secondary-container">
<div class="row">
<div class="col-6 col-lg col-md-4">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Terracotta
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Terracotta Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Terracotta Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-4">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sunrise
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sunrise Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sunrise Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-4">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Palm
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Palm Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Palm Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-3">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Agave
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Agave Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Agave Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-3">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sky
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sky Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Sky Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-3">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Wisteria
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Wisteria Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Wisteria Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col-md-3">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Rose
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Rose Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Rose Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="mt-5">Neutral Colors</h2>
<p>Adds depth and balance. Inspired by the tones and textures found around our campus, these colors
work in
harmony with the primary and secondary palettes while maintaining a cohesive and elegant look.</p>
<div class="color-chip-container tertiary-container">
<div class="row">
<div class="col-6 col-lg col">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Fog
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Fog Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Fog Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Adobe
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Adobe Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Adobe Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Clay
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Clay Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Clay Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg col">
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Slate
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Slate Light
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
<div class="color-chip" tabindex="0">
<div class="color-chip-info">
<div class="color-chip__name">
Slate Dark
</div>
<div class="color-chip__data">
</div>
<div class="color-copy-button-container">
<a class="color-copy-button">Copy Hex Code</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="color-combo-container">
<h3>Accessible Brand Color Combinations</h3>
<p style="margin-top: 0.75rem; margin-bottom: 1.5rem;">Use this tool to find color
combinations that are
accessible and easy for everyone to read. Web
accessibility guidelines (WCAG) set minimum contrast levels between text and background to ensure content is
legible.</p>
<hr>
<h4 class="color-combo-header">Choose a Background Color</h4>
<div class="color-selector background-colors">
</div>
<hr>
<h4 class="color-combo-header">Choose a Text Color</h4>
<div class="color-selector text-colors">
</div>
<hr>
<h4 class="color-combo-header">Your Color Contrast Results</h4>
<div class="result-container row">
<div class="color-contrast-container col-12 my-col-lg-4">
<p style="font-size: 1.25rem;"><b>Contrast Ratio</b></p>
<div class="color-contrast">
</div>
<div class="row" style="margin-top: 2rem;">
<div class="col">
<p><b>Small Text</b></p>
<div class="compliance-row row">
<div class="pass-fail pass" id="aa-normal">
Pass
</div>
<p class="compliance-category">AA</p>
</div>
<div class="compliance-row row">
<div class="pass-fail pass" id="aaa-normal">
Pass
</div>
<p class="compliance-category">AAA</p>
</div>
</div>
<div class="col">
<p><b>Large Text</b></p>
<div class="compliance-row row">
<div class="pass-fail pass" id="aa-large">
Pass
</div>
<p class="compliance-category">AA</p>
</div>
<div class="compliance-row row">
<div class="pass-fail pass" id="aaa-large">
Pass
</div>
<p class="compliance-category">AAA</p>
</div>
</div>
</div>
</div>
<div class="sandbox row col-12 my-col-lg-8">
<div class="h3">Understanding Your Contrast Ratio</div>
<p>
To make sure text is easy to read for everyone, the Web Content Accessibility Guidelines (WCAG) set
contrast ratio standards. For small text (<24px), aim for a ratio of at least 4.5:1 (AA) or 7:1
(AAA).
For large text (≥24px), aim for 3:1 (AA) or 4.5:1 (AAA)—the same goes for any bold text greater than
18px.
</p>
<p>
Higher ratios mean better readability, especially for users with low vision. Overall, we need to
aim for AA at a minimum.
</p>
</div>
</div>
</div>
<h3>Text Color</h3>
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied
to links and will
darken on hover just like our default link styles.</p>
<div class="bd-example">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
</div>
<pre><code class="language-markup">
<script type="prism-html-markup">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p></script>
</code></pre>
<p>Similar to the contextual text color classes, easily set the background of an element to any
contextual class. Anchor
components will darken on hover, just like the text classes. Background utilities <strong>do not set
<code class="highlighter-rouge">color</code></strong>, so in some cases
you’ll want to use <code class="highlighter-rouge">.text-*</code>
utilities.</p>
<div class="bd-example">
<p><a href="#" class="text-primary">Primary
link</a></p>
<p><a href="#" class="text-secondary">Secondary
link</a></p>
<p><a href="#" class="text-success">Success
link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning
link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light
link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White
link</a></p>
</div>
<pre><code class="language-markup">
<script type="prism-html-markup">
<p><a href="#" class="text-primary">Primary
link</a></p>
<p><a href="#" class="text-secondary">Secondary
link</a></p>
<p><a href="#" class="text-success">Success
link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning
link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light
link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White
link</a></p></script>
</code></pre>
<h3>Background Color</h3>
<p>Similar to the contextual text color classes, easily set the background of an element to any
contextual class. Anchor
components will darken on hover, just like the text classes. Background utilities <strong>do not set
<code class="highlighter-rouge">color</code></strong>, so in some cases
you’ll want to use <code class="highlighter-rouge">.text-*</code>
utilities.</p>
<div class="bd-example">
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
</div>
<pre><code class="language-markup">
<script type="prism-html-markup">
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div></script>
</code></pre>
<h4>Background Gradients</h4>
<div class="bd-example">
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient text-white">.bg-gradient</div>
</div>
<pre><code class="language-markup">
<script type="prism-html-markup">
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient text-white">.bg-gradient</div></script>
</code></pre>
