Colors

Primary colors

PRIMARY_BLUE
Azure Blue
#18A5D6

PRIMARY_BLUE_HOVER
Dim Azure Blue
#007199

PRIMARY_RED
Grenadine Red
#F01446

PRIMARY_RED_HOVER
Dim Grenadine Red
#BD0A33

PRIMARY_BLACK

#232221

PRIMARY_BLACK_HOVER

#363636

PRIMARY_SAND
Sand
#F6F1EB

PRIMARY_WHITE
White
#FFFFFF

Shades of blue

BLUE_SHADE_1
Pastel Blue
#D1EDF7

BLUE_SHADE_2
Petrol Blue
#004E69

BLUE_SHADE_3

#E7F8FC

Shades of red

RED_SHADE_1
Pastel Red
#FDDCE3

RED_SHADE_2
Bordeaux
#8B0020

Shades of grey

GREY_SHADE_1

#59544E

GREY_SHADE_2

#807A74

GREY_SHADE_3

#999999

GREY_SHADE_4

#BDBDBD

GREY_SHADE_5

#E3DDD3

GREY_SHADE_6

#F5F6F9

GREY_SHADE_7

#B8AFA4

Brand accent colors

BRAND_ACCENT_GREEN

#02715C

BRAND_ACCENT_PURPLE

#9E3F78

BRAND_ACCENT_YELLOW

#FDCE03

Social colors

FACEBOOK

#3B5998

MESSENGER

#057FF5

TWITTER

#55ACEE

LINKEDIN

#0077B5

YOUTUBE

#E52D27

Deprecated Primary colors

PRIMARY_GREEN

#66DC88

PRIMARY_GREEN_HOVER

#64D088

Deprecated Secondary colors

SECONDARY_YELLOW

#F7C884

SECONDARY_INDIGO

#3E51B5

SECONDARY_PURPLE

#8B66C5

SECONDARY_RED

#FF4336

SECONDARY_PINK

#FF5858

How to use it?

// First import COLORS constant from library
import { COLORS } from '@ulule/owl-kit-components/dist/next.esm'

// Then access of the color with the name of the colors as key
const myColor = COLORS['PRIMARY_BLUE']
// First import COLORS constant from library
import { COLORS } from '@ulule/owl-kit-components/dist/next.esm'

// Then access of the color with the name of the colors as key
const myColor = COLORS['PRIMARY_BLUE']