UFV Brand Colours
Primary Brand Colours
On UFV.ca, use variables instead of hex codes whenever possible. e.g. instead of #17382b, use var(--ufv-brand-deep-green)
(The variables are defined globally in this CSS file: https://www.ufv.ca/web-assets/media/web/b3/css/UFV-rebrand-overrides.css)
Deep Green
CSS Variable
--ufv-brand-deep-green
Hex
#17382b
RGB
23, 56, 43
Used for
- Primary brand colour
- Headers
- Dark rows
- Buttons
Lichen Green
CSS Variable
--ufv-brand-lichen-green
Hex
#bdefdd
Used for
- Light rows
- Quick-links
- Buttons, labels
- Success alert
Leaf Green
CSS Variable
--ufv-brand-leaf-green
Hex
#00a055
Suggested use
- Accents
- Pops of colour
Valley Green
CSS Variable
--ufv-brand-valley-green
Hex
#006d56
Suggested use
- Headings
- Links
- Icons
Mushroom
CSS Variable
--ufv-neutral-mushroom
Hex
#f6f4ea
RGB
246, 244, 234
Suggested use
- Section backgrounds
- Cards & flex-boxes
- Warm neutral surfaces
Charcoal
CSS Variable
--ufv-neutral-charcoal
Hex
#333333
RGB
51, 51, 51
Suggested use
- Body text
- Icons
- Text on light backgrounds
Secondary & Accent Colours
Orange
CSS Variable
--ufv-brand-orange
Hex
#ff8a65
RGB
255, 138, 101
Suggested use
- Promotional content
- Attention-grabbing elements
- Rarely used for web
Yellow
CSS Variable
--ufv-brand-yellow
Hex
#ffe164
RGB
255, 225, 100
Suggested use
- Warning alerts
- Promotional content
- Visual emphasis
Purple
CSS Variable
--ufv-brand-purple
Hex
#ed9eff
RGB
237, 158, 255
Suggested uses
- Special campaigns
- Events and promotions
- Feature highlights
- Supporting accent colour