Colors (Palette)
The palette styles add the ability to set a background, accent, or “context” color to a given element. This will set that color and will also update the foreground color context to ensure accessible contrast for a given background color.
Examples and Code
Section titled “Examples and Code”
Open Full Example
<div class="palette-bg-uo-green"><p>Hello World uo-green <a href="https://uoregon.edu/uo-green">Link Text</a></p></div>
<div class="palette-bg-uo-yellow"><p>Hello World uo-yellow <a href="https://uoregon.edu/uo-yellow">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green"><p>Hello World uo-legacy-green <a href="https://uoregon.edu/uo-legacy-green">Link Text</a></p></div>
<div class="palette-bg-grass-green"><p>Hello World grass-green <a href="https://uoregon.edu/grass-green">Link Text</a></p></div>
<div class="palette-bg-lime-green"><p>Hello World lime-green <a href="https://uoregon.edu/lime-green">Link Text</a></p></div>
<div class="palette-bg-chartreuse"><p>Hello World chartreuse <a href="https://uoregon.edu/chartreuse">Link Text</a></p></div>
<div class="palette-bg-dark-blue"><p>Hello World dark-blue <a href="https://uoregon.edu/dark-blue">Link Text</a></p></div>
<div class="palette-bg-light-blue"><p>Hello World light-blue <a href="https://uoregon.edu/light-blue">Link Text</a></p></div>
<div class="palette-bg-berry"><p>Hello World berry <a href="https://uoregon.edu/berry">Link Text</a></p></div>
<div class="palette-bg-black"><p>Hello World black <a href="https://uoregon.edu/black">Link Text</a></p></div>
<div class="palette-bg-dark-gray"><p>Hello World dark-gray <a href="https://uoregon.edu/dark-gray">Link Text</a></p></div>
<div class="palette-bg-medium-gray"><p>Hello World medium-gray <a href="https://uoregon.edu/medium-gray">Link Text</a></p></div>
<div class="palette-bg-light-gray"><p>Hello World light-gray <a href="https://uoregon.edu/light-gray">Link Text</a></p></div>
<div class="palette-bg-golden-yellow"><p>Hello World golden-yellow <a href="https://uoregon.edu/golden-yellow">Link Text</a></p></div>
Open Full Example
<div class="palette-bg-uo-green"><p>Hello World uo-green <a href="https://uoregon.edu/uo-green">Link Text</a></p></div>
<div class="palette-bg-uo-green-t9"><p>Hello World uo-green-t9 <a href="https://uoregon.edu/uo-green9">Link Text</a></p></div>
<div class="palette-bg-uo-green-t8"><p>Hello World uo-green-t8 <a href="https://uoregon.edu/uo-green8">Link Text</a></p></div>
<div class="palette-bg-uo-green-t7"><p>Hello World uo-green-t7 <a href="https://uoregon.edu/uo-green7">Link Text</a></p></div>
<div class="palette-bg-uo-green-t6"><p>Hello World uo-green-t6 <a href="https://uoregon.edu/uo-green6">Link Text</a></p></div>
<div class="palette-bg-uo-green-t5"><p>Hello World uo-green-t5 <a href="https://uoregon.edu/uo-green5">Link Text</a></p></div>
<div class="palette-bg-uo-green-t4"><p>Hello World uo-green-t4 <a href="https://uoregon.edu/uo-green4">Link Text</a></p></div>
<div class="palette-bg-uo-green-t3"><p>Hello World uo-green-t3 <a href="https://uoregon.edu/uo-green3">Link Text</a></p></div>
<div class="palette-bg-uo-green-t2"><p>Hello World uo-green-t2 <a href="https://uoregon.edu/uo-green2">Link Text</a></p></div>
<div class="palette-bg-uo-green-t1"><p>Hello World uo-green-t1 <a href="https://uoregon.edu/uo-green1">Link Text</a></p></div>
<div class="palette-bg-uo-yellow"><p>Hello World uo-yellow <a href="https://uoregon.edu/uo-yellow">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t9"><p>Hello World uo-yellow-t9 <a href="https://uoregon.edu/uo-yellow9">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t8"><p>Hello World uo-yellow-t8 <a href="https://uoregon.edu/uo-yellow8">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t7"><p>Hello World uo-yellow-t7 <a href="https://uoregon.edu/uo-yellow7">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t6"><p>Hello World uo-yellow-t6 <a href="https://uoregon.edu/uo-yellow6">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t5"><p>Hello World uo-yellow-t5 <a href="https://uoregon.edu/uo-yellow5">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t4"><p>Hello World uo-yellow-t4 <a href="https://uoregon.edu/uo-yellow4">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t3"><p>Hello World uo-yellow-t3 <a href="https://uoregon.edu/uo-yellow3">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t2"><p>Hello World uo-yellow-t2 <a href="https://uoregon.edu/uo-yellow2">Link Text</a></p></div>
<div class="palette-bg-uo-yellow-t1"><p>Hello World uo-yellow-t1 <a href="https://uoregon.edu/uo-yellow1">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green"><p>Hello World uo-legacy-green <a href="https://uoregon.edu/uo-legacy-green">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t9"><p>Hello World uo-legacy-green-t9 <a href="https://uoregon.edu/uo-legacy-green9">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t8"><p>Hello World uo-legacy-green-t8 <a href="https://uoregon.edu/uo-legacy-green8">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t7"><p>Hello World uo-legacy-green-t7 <a href="https://uoregon.edu/uo-legacy-green7">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t6"><p>Hello World uo-legacy-green-t6 <a href="https://uoregon.edu/uo-legacy-green6">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t5"><p>Hello World uo-legacy-green-t5 <a href="https://uoregon.edu/uo-legacy-green5">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t4"><p>Hello World uo-legacy-green-t4 <a href="https://uoregon.edu/uo-legacy-green4">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t3"><p>Hello World uo-legacy-green-t3 <a href="https://uoregon.edu/uo-legacy-green3">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t2"><p>Hello World uo-legacy-green-t2 <a href="https://uoregon.edu/uo-legacy-green2">Link Text</a></p></div>
<div class="palette-bg-uo-legacy-green-t1"><p>Hello World uo-legacy-green-t1 <a href="https://uoregon.edu/uo-legacy-green1">Link Text</a></p></div>
<div class="palette-bg-grass-green"><p>Hello World grass-green <a href="https://uoregon.edu/grass-green">Link Text</a></p></div>
<div class="palette-bg-grass-green-t9"><p>Hello World grass-green-t9 <a href="https://uoregon.edu/grass-green9">Link Text</a></p></div>
<div class="palette-bg-grass-green-t8"><p>Hello World grass-green-t8 <a href="https://uoregon.edu/grass-green8">Link Text</a></p></div>
<div class="palette-bg-grass-green-t7"><p>Hello World grass-green-t7 <a href="https://uoregon.edu/grass-green7">Link Text</a></p></div>
<div class="palette-bg-grass-green-t6"><p>Hello World grass-green-t6 <a href="https://uoregon.edu/grass-green6">Link Text</a></p></div>
<div class="palette-bg-grass-green-t5"><p>Hello World grass-green-t5 <a href="https://uoregon.edu/grass-green5">Link Text</a></p></div>
<div class="palette-bg-grass-green-t4"><p>Hello World grass-green-t4 <a href="https://uoregon.edu/grass-green4">Link Text</a></p></div>
<div class="palette-bg-grass-green-t3"><p>Hello World grass-green-t3 <a href="https://uoregon.edu/grass-green3">Link Text</a></p></div>
<div class="palette-bg-grass-green-t2"><p>Hello World grass-green-t2 <a href="https://uoregon.edu/grass-green2">Link Text</a></p></div>
<div class="palette-bg-grass-green-t1"><p>Hello World grass-green-t1 <a href="https://uoregon.edu/grass-green1">Link Text</a></p></div>
<div class="palette-bg-lime-green"><p>Hello World lime-green <a href="https://uoregon.edu/lime-green">Link Text</a></p></div>
<div class="palette-bg-lime-green-t9"><p>Hello World lime-green-t9 <a href="https://uoregon.edu/lime-green9">Link Text</a></p></div>
<div class="palette-bg-lime-green-t8"><p>Hello World lime-green-t8 <a href="https://uoregon.edu/lime-green8">Link Text</a></p></div>
<div class="palette-bg-lime-green-t7"><p>Hello World lime-green-t7 <a href="https://uoregon.edu/lime-green7">Link Text</a></p></div>
<div class="palette-bg-lime-green-t6"><p>Hello World lime-green-t6 <a href="https://uoregon.edu/lime-green6">Link Text</a></p></div>
<div class="palette-bg-lime-green-t5"><p>Hello World lime-green-t5 <a href="https://uoregon.edu/lime-green5">Link Text</a></p></div>
<div class="palette-bg-lime-green-t4"><p>Hello World lime-green-t4 <a href="https://uoregon.edu/lime-green4">Link Text</a></p></div>
<div class="palette-bg-lime-green-t3"><p>Hello World lime-green-t3 <a href="https://uoregon.edu/lime-green3">Link Text</a></p></div>
<div class="palette-bg-lime-green-t2"><p>Hello World lime-green-t2 <a href="https://uoregon.edu/lime-green2">Link Text</a></p></div>
<div class="palette-bg-lime-green-t1"><p>Hello World lime-green-t1 <a href="https://uoregon.edu/lime-green1">Link Text</a></p></div>
<div class="palette-bg-chartreuse"><p>Hello World chartreuse <a href="https://uoregon.edu/chartreuse">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t9"><p>Hello World chartreuse-t9 <a href="https://uoregon.edu/chartreuse9">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t8"><p>Hello World chartreuse-t8 <a href="https://uoregon.edu/chartreuse8">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t7"><p>Hello World chartreuse-t7 <a href="https://uoregon.edu/chartreuse7">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t6"><p>Hello World chartreuse-t6 <a href="https://uoregon.edu/chartreuse6">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t5"><p>Hello World chartreuse-t5 <a href="https://uoregon.edu/chartreuse5">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t4"><p>Hello World chartreuse-t4 <a href="https://uoregon.edu/chartreuse4">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t3"><p>Hello World chartreuse-t3 <a href="https://uoregon.edu/chartreuse3">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t2"><p>Hello World chartreuse-t2 <a href="https://uoregon.edu/chartreuse2">Link Text</a></p></div>
<div class="palette-bg-chartreuse-t1"><p>Hello World chartreuse-t1 <a href="https://uoregon.edu/chartreuse1">Link Text</a></p></div>
<div class="palette-bg-dark-blue"><p>Hello World dark-blue <a href="https://uoregon.edu/dark-blue">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t9"><p>Hello World dark-blue-t9 <a href="https://uoregon.edu/dark-blue9">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t8"><p>Hello World dark-blue-t8 <a href="https://uoregon.edu/dark-blue8">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t7"><p>Hello World dark-blue-t7 <a href="https://uoregon.edu/dark-blue7">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t6"><p>Hello World dark-blue-t6 <a href="https://uoregon.edu/dark-blue6">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t5"><p>Hello World dark-blue-t5 <a href="https://uoregon.edu/dark-blue5">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t4"><p>Hello World dark-blue-t4 <a href="https://uoregon.edu/dark-blue4">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t3"><p>Hello World dark-blue-t3 <a href="https://uoregon.edu/dark-blue3">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t2"><p>Hello World dark-blue-t2 <a href="https://uoregon.edu/dark-blue2">Link Text</a></p></div>
<div class="palette-bg-dark-blue-t1"><p>Hello World dark-blue-t1 <a href="https://uoregon.edu/dark-blue1">Link Text</a></p></div>
<div class="palette-bg-light-blue"><p>Hello World light-blue <a href="https://uoregon.edu/light-blue">Link Text</a></p></div>
<div class="palette-bg-light-blue-t9"><p>Hello World light-blue-t9 <a href="https://uoregon.edu/light-blue9">Link Text</a></p></div>
<div class="palette-bg-light-blue-t8"><p>Hello World light-blue-t8 <a href="https://uoregon.edu/light-blue8">Link Text</a></p></div>
<div class="palette-bg-light-blue-t7"><p>Hello World light-blue-t7 <a href="https://uoregon.edu/light-blue7">Link Text</a></p></div>
<div class="palette-bg-light-blue-t6"><p>Hello World light-blue-t6 <a href="https://uoregon.edu/light-blue6">Link Text</a></p></div>
<div class="palette-bg-light-blue-t5"><p>Hello World light-blue-t5 <a href="https://uoregon.edu/light-blue5">Link Text</a></p></div>
<div class="palette-bg-light-blue-t4"><p>Hello World light-blue-t4 <a href="https://uoregon.edu/light-blue4">Link Text</a></p></div>
<div class="palette-bg-light-blue-t3"><p>Hello World light-blue-t3 <a href="https://uoregon.edu/light-blue3">Link Text</a></p></div>
<div class="palette-bg-light-blue-t2"><p>Hello World light-blue-t2 <a href="https://uoregon.edu/light-blue2">Link Text</a></p></div>
<div class="palette-bg-light-blue-t1"><p>Hello World light-blue-t1 <a href="https://uoregon.edu/light-blue1">Link Text</a></p></div>
<div class="palette-bg-berry"><p>Hello World berry <a href="https://uoregon.edu/berry">Link Text</a></p></div>
<div class="palette-bg-berry-t9"><p>Hello World berry-t9 <a href="https://uoregon.edu/berry9">Link Text</a></p></div>
<div class="palette-bg-berry-t8"><p>Hello World berry-t8 <a href="https://uoregon.edu/berry8">Link Text</a></p></div>
<div class="palette-bg-berry-t7"><p>Hello World berry-t7 <a href="https://uoregon.edu/berry7">Link Text</a></p></div>
<div class="palette-bg-berry-t6"><p>Hello World berry-t6 <a href="https://uoregon.edu/berry6">Link Text</a></p></div>
<div class="palette-bg-berry-t5"><p>Hello World berry-t5 <a href="https://uoregon.edu/berry5">Link Text</a></p></div>
<div class="palette-bg-berry-t4"><p>Hello World berry-t4 <a href="https://uoregon.edu/berry4">Link Text</a></p></div>
<div class="palette-bg-berry-t3"><p>Hello World berry-t3 <a href="https://uoregon.edu/berry3">Link Text</a></p></div>
<div class="palette-bg-berry-t2"><p>Hello World berry-t2 <a href="https://uoregon.edu/berry2">Link Text</a></p></div>
<div class="palette-bg-berry-t1"><p>Hello World berry-t1 <a href="https://uoregon.edu/berry1">Link Text</a></p></div>
<div class="palette-bg-black"><p>Hello World black <a href="https://uoregon.edu/black">Link Text</a></p></div>
<div class="palette-bg-black-t9"><p>Hello World black-t9 <a href="https://uoregon.edu/black9">Link Text</a></p></div>
<div class="palette-bg-black-t8"><p>Hello World black-t8 <a href="https://uoregon.edu/black8">Link Text</a></p></div>
<div class="palette-bg-black-t7"><p>Hello World black-t7 <a href="https://uoregon.edu/black7">Link Text</a></p></div>
<div class="palette-bg-black-t6"><p>Hello World black-t6 <a href="https://uoregon.edu/black6">Link Text</a></p></div>
<div class="palette-bg-black-t5"><p>Hello World black-t5 <a href="https://uoregon.edu/black5">Link Text</a></p></div>
<div class="palette-bg-black-t4"><p>Hello World black-t4 <a href="https://uoregon.edu/black4">Link Text</a></p></div>
<div class="palette-bg-black-t3"><p>Hello World black-t3 <a href="https://uoregon.edu/black3">Link Text</a></p></div>
<div class="palette-bg-black-t2"><p>Hello World black-t2 <a href="https://uoregon.edu/black2">Link Text</a></p></div>
<div class="palette-bg-black-t1"><p>Hello World black-t1 <a href="https://uoregon.edu/black1">Link Text</a></p></div>
<div class="palette-bg-dark-gray"><p>Hello World dark-gray <a href="https://uoregon.edu/dark-gray">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t9"><p>Hello World dark-gray-t9 <a href="https://uoregon.edu/dark-gray9">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t8"><p>Hello World dark-gray-t8 <a href="https://uoregon.edu/dark-gray8">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t7"><p>Hello World dark-gray-t7 <a href="https://uoregon.edu/dark-gray7">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t6"><p>Hello World dark-gray-t6 <a href="https://uoregon.edu/dark-gray6">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t5"><p>Hello World dark-gray-t5 <a href="https://uoregon.edu/dark-gray5">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t4"><p>Hello World dark-gray-t4 <a href="https://uoregon.edu/dark-gray4">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t3"><p>Hello World dark-gray-t3 <a href="https://uoregon.edu/dark-gray3">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t2"><p>Hello World dark-gray-t2 <a href="https://uoregon.edu/dark-gray2">Link Text</a></p></div>
<div class="palette-bg-dark-gray-t1"><p>Hello World dark-gray-t1 <a href="https://uoregon.edu/dark-gray1">Link Text</a></p></div>
<div class="palette-bg-medium-gray"><p>Hello World medium-gray <a href="https://uoregon.edu/medium-gray">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t9"><p>Hello World medium-gray-t9 <a href="https://uoregon.edu/medium-gray9">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t8"><p>Hello World medium-gray-t8 <a href="https://uoregon.edu/medium-gray8">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t7"><p>Hello World medium-gray-t7 <a href="https://uoregon.edu/medium-gray7">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t6"><p>Hello World medium-gray-t6 <a href="https://uoregon.edu/medium-gray6">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t5"><p>Hello World medium-gray-t5 <a href="https://uoregon.edu/medium-gray5">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t4"><p>Hello World medium-gray-t4 <a href="https://uoregon.edu/medium-gray4">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t3"><p>Hello World medium-gray-t3 <a href="https://uoregon.edu/medium-gray3">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t2"><p>Hello World medium-gray-t2 <a href="https://uoregon.edu/medium-gray2">Link Text</a></p></div>
<div class="palette-bg-medium-gray-t1"><p>Hello World medium-gray-t1 <a href="https://uoregon.edu/medium-gray1">Link Text</a></p></div>
<div class="palette-bg-light-gray"><p>Hello World light-gray <a href="https://uoregon.edu/light-gray">Link Text</a></p></div>
<div class="palette-bg-light-gray-t9"><p>Hello World light-gray-t9 <a href="https://uoregon.edu/light-gray9">Link Text</a></p></div>
<div class="palette-bg-light-gray-t8"><p>Hello World light-gray-t8 <a href="https://uoregon.edu/light-gray8">Link Text</a></p></div>
<div class="palette-bg-light-gray-t7"><p>Hello World light-gray-t7 <a href="https://uoregon.edu/light-gray7">Link Text</a></p></div>
<div class="palette-bg-light-gray-t6"><p>Hello World light-gray-t6 <a href="https://uoregon.edu/light-gray6">Link Text</a></p></div>
<div class="palette-bg-light-gray-t5"><p>Hello World light-gray-t5 <a href="https://uoregon.edu/light-gray5">Link Text</a></p></div>
<div class="palette-bg-light-gray-t4"><p>Hello World light-gray-t4 <a href="https://uoregon.edu/light-gray4">Link Text</a></p></div>
<div class="palette-bg-light-gray-t3"><p>Hello World light-gray-t3 <a href="https://uoregon.edu/light-gray3">Link Text</a></p></div>
<div class="palette-bg-light-gray-t2"><p>Hello World light-gray-t2 <a href="https://uoregon.edu/light-gray2">Link Text</a></p></div>
<div class="palette-bg-light-gray-t1"><p>Hello World light-gray-t1 <a href="https://uoregon.edu/light-gray1">Link Text</a></p></div>
<div class="palette-bg-golden-yellow"><p>Hello World golden-yellow <a href="https://uoregon.edu/golden-yellow">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t9"><p>Hello World golden-yellow-t9 <a href="https://uoregon.edu/golden-yellow9">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t8"><p>Hello World golden-yellow-t8 <a href="https://uoregon.edu/golden-yellow8">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t7"><p>Hello World golden-yellow-t7 <a href="https://uoregon.edu/golden-yellow7">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t6"><p>Hello World golden-yellow-t6 <a href="https://uoregon.edu/golden-yellow6">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t5"><p>Hello World golden-yellow-t5 <a href="https://uoregon.edu/golden-yellow5">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t4"><p>Hello World golden-yellow-t4 <a href="https://uoregon.edu/golden-yellow4">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t3"><p>Hello World golden-yellow-t3 <a href="https://uoregon.edu/golden-yellow3">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t2"><p>Hello World golden-yellow-t2 <a href="https://uoregon.edu/golden-yellow2">Link Text</a></p></div>
<div class="palette-bg-golden-yellow-t1"><p>Hello World golden-yellow-t1 <a href="https://uoregon.edu/golden-yellow1">Link Text</a></p></div>
Open Full Example
<div class="palette-accent-uo-green b2"><p>Hello World uo-green <a href="https://uoregon.edu/uo-green">Link Text</a></p></div>
<div class="palette-accent-uo-yellow b2"><p>Hello World uo-yellow <a href="https://uoregon.edu/uo-yellow">Link Text</a></p></div>
<div class="palette-accent-uo-legacy-green b2"><p>Hello World uo-legacy-green <a href="https://uoregon.edu/uo-legacy-green">Link Text</a></p></div>
<div class="palette-accent-grass-green b2"><p>Hello World grass-green <a href="https://uoregon.edu/grass-green">Link Text</a></p></div>
<div class="palette-accent-lime-green b2"><p>Hello World lime-green <a href="https://uoregon.edu/lime-green">Link Text</a></p></div>
<div class="palette-accent-chartreuse b2"><p>Hello World chartreuse <a href="https://uoregon.edu/chartreuse">Link Text</a></p></div>
<div class="palette-accent-dark-blue b2"><p>Hello World dark-blue <a href="https://uoregon.edu/dark-blue">Link Text</a></p></div>
<div class="palette-accent-light-blue b2"><p>Hello World light-blue <a href="https://uoregon.edu/light-blue">Link Text</a></p></div>
<div class="palette-accent-berry b2"><p>Hello World berry <a href="https://uoregon.edu/berry">Link Text</a></p></div>
<div class="palette-accent-black b2"><p>Hello World black <a href="https://uoregon.edu/black">Link Text</a></p></div>
<div class="palette-accent-dark-gray b2"><p>Hello World dark-gray <a href="https://uoregon.edu/dark-gray">Link Text</a></p></div>
<div class="palette-accent-medium-gray b2"><p>Hello World medium-gray <a href="https://uoregon.edu/medium-gray">Link Text</a></p></div>
<div class="palette-accent-light-gray b2"><p>Hello World light-gray <a href="https://uoregon.edu/light-gray">Link Text</a></p></div>
<div class="palette-accent-golden-yellow b2"><p>Hello World golden-yellow <a href="https://uoregon.edu/golden-yellow">Link Text</a></p></div>
Open Full Example
<div class="palette-base-uo-green"><p>Hello World uo-green <a href="https://uoregon.edu/uo-green">Link Text</a></p></div>
<div class="palette-base-uo-yellow"><p>Hello World uo-yellow <a href="https://uoregon.edu/uo-yellow">Link Text</a></p></div>
<div class="palette-base-uo-legacy-green"><p>Hello World uo-legacy-green <a href="https://uoregon.edu/uo-legacy-green">Link Text</a></p></div>
<div class="palette-base-grass-green"><p>Hello World grass-green <a href="https://uoregon.edu/grass-green">Link Text</a></p></div>
<div class="palette-base-lime-green"><p>Hello World lime-green <a href="https://uoregon.edu/lime-green">Link Text</a></p></div>
<div class="palette-base-chartreuse"><p>Hello World chartreuse <a href="https://uoregon.edu/chartreuse">Link Text</a></p></div>
<div class="palette-base-dark-blue"><p>Hello World dark-blue <a href="https://uoregon.edu/dark-blue">Link Text</a></p></div>
<div class="palette-base-light-blue"><p>Hello World light-blue <a href="https://uoregon.edu/light-blue">Link Text</a></p></div>
<div class="palette-base-berry"><p>Hello World berry <a href="https://uoregon.edu/berry">Link Text</a></p></div>
<div class="palette-base-black"><p>Hello World black <a href="https://uoregon.edu/black">Link Text</a></p></div>
<div class="palette-base-dark-gray"><p>Hello World dark-gray <a href="https://uoregon.edu/dark-gray">Link Text</a></p></div>
<div class="palette-base-medium-gray"><p>Hello World medium-gray <a href="https://uoregon.edu/medium-gray">Link Text</a></p></div>
<div class="palette-base-light-gray"><p>Hello World light-gray <a href="https://uoregon.edu/light-gray">Link Text</a></p></div>
<div class="palette-base-golden-yellow"><p>Hello World golden-yellow <a href="https://uoregon.edu/golden-yellow">Link Text</a></p></div>
Apply the class for the given color to the element.
Background Colors
Section titled “Background Colors”These classes set a solid color as the background and a light or dark base color for the foreground.
| Classname | Color | Foreground Color | Brand Color Type | Hex Value |
|---|---|---|---|---|
palette-bg-uo-green | UO Green | Dark | Primary | #007030 |
palette-bg-uo-yellow | UO Yellow | Dark | Primary | #FEE11A |
palette-bg-uo-legacy-green | UO Legacy Green | Light | Secondary | #104735 |
palette-bg-grass-green | Grass Green | Dark | Secondary | #489D46 |
palette-bg-lime-green | Lime Green | Dark | Secondary | #8ABB40 |
palette-bg-chartreuse | Chartreuse | Dark | Secondary | #E2E11B |
palette-bg-dark-blue | Dark Blue | Light | Secondary | #004F6E |
palette-bg-light-blue | Light Blue | Dark | Secondary | #00A5B5 |
palette-bg-berry | Berry | Light | Secondary | #8D1D58 |
palette-bg-dark-gray | Dark Gray | Light | Secondary | #4D5859 |
palette-bg-medium-gray | Medium Gray | Dark | Secondary | #A2AAAD |
palette-bg-light-gray | Light Gray | Dark | Secondary | #D8DCDA |
palette-bg-black | Black | Light | System | #000000 |
palette-bg-white | White | Dark | Sytem | #FFFFFF |
These classes provide alternate tint shades of the core colors. These should be used sparingly and slightly when the core colors will not work for accessibility reasons. They range from -t9 (darkest, closest to the original color) to -t1 (lightest, closest to white).
Accent Colors
Section titled “Accent Colors”Accent colors apply to borders or other accent elements, these can be applied to certain components to adjust the style further. The classnames are the same as background colors, but use accent instead of bg, such as palette-accent-uo-green.
Base (Context) Colors
Section titled “Base (Context) Colors”Base colors apply a color hint to an element that uses the color in multiple places. This allows the component to know what the expected color is and apply it, without necessary setting the background color of that element. The classnames are the same as background colors, but use base instead of bg, such as palette-base-uo-green.
Guidance
Section titled “Guidance”Usage Guidance
Section titled “Usage Guidance”- Use on an envelope or other “section” of content to give that content a distinct tone
- Use on an a card or group of cards to make them stand out
- Use the primary brand colors for larger element background and the secondary brand colors for smaller accent elements
- Don’t apply to small chunks of inline text for a highlight affect
- Don’t use the UO Legacy Green color for core branding elements, use UO Green instead
- Don’t use the secondary brand colors for prominent elements on the page
- Don’t use tints on major page elements
Further usage guidance is available on the Oregon Brand Guide
Accessibility Guidance
Section titled “Accessibility Guidance”- Ensure good contrast. The background color classes will change the foreground color by default to provide proper contrast, however, all your content within that may not have proper contrast if font colors are overridden. Always check to ensure that the text content in front of the background has sufficient contrast. For more detail, see the table of palette colors and allowed contrasting font colors.