Overview
Colors are cool...
Official Oregon Color Library
Helper Classes
Note: All color combinations pass WCAG 2.x AA compliance, with a color contrast ratio of at least 4.5:1.
These are branded colors, which are in addition to classes available in Bootstrap
Text Classes
- .text-dark
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .text-tree
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- .text-path
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- .text-sand
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- .text-light
- Etiam porta sem malesuada magna mollis euismod.
- .text-grape / .text-navy
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .text-gold
- Nullam id dolor id nibh ultricies vehicula ut id elit.
Background Classes
Note: All color combinations pass WCAG 2.x AA compliance, with a color contrast ratio of at least 4.5:1.
- .bg-dark
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .bg-tree
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- .bg-path
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- .bg-sand
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- .bg-light
- Etiam porta sem malesuada magna mollis euismod.
- .bg-grape / .bg-navy
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .bg-gold
- Nullam id dolor id nibh ultricies vehicula ut id elit.
Extended Color Library
Helper Classes
These are branded colors, which are in addition to classes available in Bootstrap
Text Classes
Note: All color combinations pass WCAG 2.x AA compliance, with a color contrast ratio of at least 4.5:1.
- .text-cornflower
- Etiam porta sem malesuada magna mollis euismod.
- .text-teal
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- .text-sea
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .text-lime
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- .text-aqua
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- .text-peacock
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .text-slate
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- .text-periwinkle
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- .text-plum
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- .text-orchid
- Etiam porta sem malesuada magna mollis euismod.
- .text-rose
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .text-thistle
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- .text-bismuth
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- .text-wheat
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- .text-goldenrod
- Etiam porta sem malesuada magna mollis euismod.
- .text-cocoa
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .text-graphite
- Nullam id dolor id nibh ultricies vehicula ut id elit.
Background Classes
Note: All color combinations pass WCAG 2.x AA compliance, with a color contrast ratio of at least 4.5:1.
- .bg-cornflower
- Etiam porta sem malesuada magna mollis euismod.
- .bg-teal
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- .bg-sea
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .bg-lime
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- .bg-aqua
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- .bg-peacock
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .bg-slate
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- .bg-periwinkle
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- .bg-plum
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- .bg-orchid
- Etiam porta sem malesuada magna mollis euismod.
- .bg-rose
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .bg-thistle
- Nullam id dolor id nibh ultricies vehicula ut id elit.
- .bg-bismuth
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- .bg-tangerine
- Maecenas sed diam eget risus varius blandit sit amet non magna.
- .bg-goldenrod
- Etiam porta sem malesuada magna mollis euismod.
- .bg-cocoa
- Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
- .bg-graphite
- Nullam id dolor id nibh ultricies vehicula ut id elit.