Colors

Oscaro brand colors are applied site wide as well as on our brand marketing materials.

Default Brand Colors

These are the Oscaro Primary Brand Colors, utilized across the all websites, all brand facing elements, and all marketing campaigns.
Primary Color

RGB : 20, 74, 130
HEX : #144a82
HSL : 211, 73%, 29%
HSV : 211, 85%, 51%
SASS : $color-primary-color

Secondary Blue

RGB : 36, 127, 194
HEX : #247fc2
HSL : 205, 69%, 45%
HSV : 205, 81%, 76%
SASS : $color-secondary-blue

Secondary Color

RGB : 153, 202, 60
HEX : #99ca3c
HSL : 81, 57%, 51%
HSV : 81, 70%, 79%
SASS : $color-secondary-color

White

RGB : 255, 255, 255
HEX : #fff
HSL : 0, 0%, 100%
HSV : 0, 0%, 100%
SASS : $color-white

Default Gray Colors

These are the Oscaro Default Grey Colors, utilized across the all websites, all brand facing elements, and all marketing campaigns.
Light

RGB : 20, 74, 130
HEX : #144a82
HSL : 211, 73%, 29%
HSV : 211, 85%, 51%
SASS : $color-primary-color

Light grey

RGB : 36, 127, 194
HEX : #247fc2
HSL : 205, 69%, 45%
HSV : 205, 81%, 76%
SASS : $color-secondary-blue

Grey

RGB : 153, 202, 60
HEX : #99ca3c
HSL : 81, 57%, 51%
HSV : 81, 70%, 79%
SASS : $color-secondary-color

Medium grey

RGB : 255, 255, 255
HEX : #fff
HSL : 0, 0%, 100%
HSV : 0, 0%, 100%
SASS : $color-white

Dark

RGB : 255, 255, 255
HEX : #fff
HSL : 0, 0%, 100%
HSV : 0, 0%, 100%
SASS : $color-white

Support Colors

Support Colors are used to identify active states of certain components, form, fields, etc.
Red

RGB : 194, 32, 38
HEX : #c22026
HSL : 358, 72%, 44%
HSV : 358, 84%, 76%
SASS : $color-red

Orange

RGB : 245, 166, 35
HEX : #f5a623
HSL : 37, 91%, 55%
HSV : 37, 86%, 96%
SASS : $color-orange

Green

RGB : 0, 117, 31
HEX : #00751f
HSL : 136, 100%, 23%%
HSV : 136, 100%, 46%
SASS : $color-green

Hover Colors

Used in instances of hover on buttons for primary, secondary, and tertiary default buttons and some links on the category tree.
Primary darken

RGB : 13, 49, 86
HEX : #0d3156
HSL : 210, 74%, 19%
HSV : 210, 85%, 34%
SASS : $color-primary-darken

Secondary darken

RGB : 124, 166, 45
HEX : #7ca62d
HSL : 81, 57%, 41%
HSV : 81, 73%, 65%
SASS : $color-secondary-darken

White Darken

RGB : 230, 230, 230
HEX : #e6e6e6
HSL : 0, 0%, 90%
HSV : 0, 0%, 90%
SASS : $color-white-darken

Disable Colors

Disabled button management is in two phases at the moment, the current state and the future state where we display lighten transparency of default colors.
Primary lighten

RGB : 138, 165, 193
HEX : #8aa5c1
HSL : 211, 31%, 65%
HSV : 211, 28%, 76%
SASS : $color-primary-lighten

Secondary lighten

RGB : 204, 229, 158
HEX : #cce59e
HSL : 81, 58%, 76%
HSV : 81, 31%, 90%
SASS : $color-secondary-lighten

Terciary color

RGB : 202, 202, 202
HEX : #cacaca
HSL : 0, 0%, 79%
HSV : 0, 0%, 79%
SASS : $color-terciary-color