Colors

We predefined a few colorsets. This can be handy to quickstart a project and have a colorset for your disposal. These colorsets can also be altered, overwritten or changed in any way.

default

  • Black
    #101010
    custom property
    --color-Black
    scss variable
    $colors-social-Black
    scss function
    color(Black)
    hex
    #101010
  • Dark
    #303030
    custom property
    --color-Dark
    scss variable
    $colors-social-Dark
    scss function
    color(Dark)
    hex
    #303030
  • White
    #ffffff
    custom property
    --color-White
    scss variable
    $colors-social-White
    scss function
    color(White)
    hex
    #ffffff
  • Offwhite
    #f7f7f7
    custom property
    --color-Offwhite
    scss variable
    $colors-social-Offwhite
    scss function
    color(Offwhite)
    hex
    #f7f7f7
  • Green
    #10c565
    custom property
    --color-Green
    scss variable
    $colors-social-Green
    scss function
    color(Green)
    hex
    #10c565
  • Blue
    #1eb3e0
    custom property
    --color-Blue
    scss variable
    $colors-social-Blue
    scss function
    color(Blue)
    hex
    #1eb3e0
  • Red
    #eb0f33
    custom property
    --color-Red
    scss variable
    $colors-social-Red
    scss function
    color(Red)
    hex
    #eb0f33
  • Brown
    #aa834f
    custom property
    --color-Brown
    scss variable
    $colors-social-Brown
    scss function
    color(Brown)
    hex
    #aa834f
  • Yellow
    #f5c505
    custom property
    --color-Yellow
    scss variable
    $colors-social-Yellow
    scss function
    color(Yellow)
    hex
    #f5c505
  • Orange
    #f6790b
    custom property
    --color-Orange
    scss variable
    $colors-social-Orange
    scss function
    color(Orange)
    hex
    #f6790b
  • Pink
    #ca1387
    custom property
    --color-Pink
    scss variable
    $colors-social-Pink
    scss function
    color(Pink)
    hex
    #ca1387
  • Purple
    #7329b1
    custom property
    --color-Purple
    scss variable
    $colors-social-Purple
    scss function
    color(Purple)
    hex
    #7329b1
  • Turquoise
    #3feac3
    custom property
    --color-Turquoise
    scss variable
    $colors-social-Turquoise
    scss function
    color(Turquoise)
    hex
    #3feac3

Vibrant

  • Black
    #1f1e1d
    custom property
    --color-Black
    scss variable
    $colors-social-Black
    scss function
    color(Black)
    hex
    #1f1e1d
  • Dark
    #363432
    custom property
    --color-Dark
    scss variable
    $colors-social-Dark
    scss function
    color(Dark)
    hex
    #363432
  • White
    #ffffff
    custom property
    --color-White
    scss variable
    $colors-social-White
    scss function
    color(White)
    hex
    #ffffff
  • Offwhite
    #eefef8
    custom property
    --color-Offwhite
    scss variable
    $colors-social-Offwhite
    scss function
    color(Offwhite)
    hex
    #eefef8
  • Green
    #58f29a
    custom property
    --color-Green
    scss variable
    $colors-social-Green
    scss function
    color(Green)
    hex
    #58f29a
  • Blue
    #2ae0e4
    custom property
    --color-Blue
    scss variable
    $colors-social-Blue
    scss function
    color(Blue)
    hex
    #2ae0e4
  • Red
    #fe5165
    custom property
    --color-Red
    scss variable
    $colors-social-Red
    scss function
    color(Red)
    hex
    #fe5165
  • Brown
    #c08e69
    custom property
    --color-Brown
    scss variable
    $colors-social-Brown
    scss function
    color(Brown)
    hex
    #c08e69
  • Yellow
    #f6ff5f
    custom property
    --color-Yellow
    scss variable
    $colors-social-Yellow
    scss function
    color(Yellow)
    hex
    #f6ff5f
  • Orange
    #ffb95f
    custom property
    --color-Orange
    scss variable
    $colors-social-Orange
    scss function
    color(Orange)
    hex
    #ffb95f
  • Pink
    #f258a0
    custom property
    --color-Pink
    scss variable
    $colors-social-Pink
    scss function
    color(Pink)
    hex
    #f258a0
  • Purple
    #c757e7
    custom property
    --color-Purple
    scss variable
    $colors-social-Purple
    scss function
    color(Purple)
    hex
    #c757e7
  • Turquoise
    #58f2bd
    custom property
    --color-Turquoise
    scss variable
    $colors-social-Turquoise
    scss function
    color(Turquoise)
    hex
    #58f2bd

Svd

  • Black
    #050401
    custom property
    --color-Black
    scss variable
    $colors-social-Black
    scss function
    color(Black)
    hex
    #050401
  • Dark
    #24132f
    custom property
    --color-Dark
    scss variable
    $colors-social-Dark
    scss function
    color(Dark)
    hex
    #24132f
  • White
    #ffffff
    custom property
    --color-White
    scss variable
    $colors-social-White
    scss function
    color(White)
    hex
    #ffffff
  • Offwhite
    #bab5be
    custom property
    --color-Offwhite
    scss variable
    $colors-social-Offwhite
    scss function
    color(Offwhite)
    hex
    #bab5be
  • Green
    #10c565
    custom property
    --color-Green
    scss variable
    $colors-social-Green
    scss function
    color(Green)
    hex
    #10c565
  • Blue
    #1eb3e0
    custom property
    --color-Blue
    scss variable
    $colors-social-Blue
    scss function
    color(Blue)
    hex
    #1eb3e0
  • Red
    #eb0f33
    custom property
    --color-Red
    scss variable
    $colors-social-Red
    scss function
    color(Red)
    hex
    #eb0f33
  • Brown
    #aa834f
    custom property
    --color-Brown
    scss variable
    $colors-social-Brown
    scss function
    color(Brown)
    hex
    #aa834f
  • Yellow
    #f5c505
    custom property
    --color-Yellow
    scss variable
    $colors-social-Yellow
    scss function
    color(Yellow)
    hex
    #f5c505
  • Orange
    #f6790b
    custom property
    --color-Orange
    scss variable
    $colors-social-Orange
    scss function
    color(Orange)
    hex
    #f6790b
  • Pink
    #ca1387
    custom property
    --color-Pink
    scss variable
    $colors-social-Pink
    scss function
    color(Pink)
    hex
    #ca1387
  • Purple
    #7329b1
    custom property
    --color-Purple
    scss variable
    $colors-social-Purple
    scss function
    color(Purple)
    hex
    #7329b1
  • Turquoise
    #3feac3
    custom property
    --color-Turquoise
    scss variable
    $colors-social-Turquoise
    scss function
    color(Turquoise)
    hex
    #3feac3

Social

  • dribbble
    #ea4c89
    custom property
    --color-dribbble
    scss variable
    $colors-social-dribbble
    scss function
    color(dribbble)
    hex
    #ea4c89
  • facebook
    #3b5998
    custom property
    --color-facebook
    scss variable
    $colors-social-facebook
    scss function
    color(facebook)
    hex
    #3b5998
  • flickr
    #ff0084
    custom property
    --color-flickr
    scss variable
    $colors-social-flickr
    scss function
    color(flickr)
    hex
    #ff0084
  • foursquare
    #0072b1
    custom property
    --color-foursquare
    scss variable
    $colors-social-foursquare
    scss function
    color(foursquare)
    hex
    #0072b1
  • git
    #0f0d0e
    custom property
    --color-git
    scss variable
    $colors-social-git
    scss function
    color(git)
    hex
    #0f0d0e
  • googleplus
    #dd4b39
    custom property
    --color-googleplus
    scss variable
    $colors-social-googleplus
    scss function
    color(googleplus)
    hex
    #dd4b39
  • twitter
    #00aced
    custom property
    --color-twitter
    scss variable
    $colors-social-twitter
    scss function
    color(twitter)
    hex
    #00aced
  • linkedin
    #007bb6
    custom property
    --color-linkedin
    scss variable
    $colors-social-linkedin
    scss function
    color(linkedin)
    hex
    #007bb6
  • instagram
    #517fa4
    custom property
    --color-instagram
    scss variable
    $colors-social-instagram
    scss function
    color(instagram)
    hex
    #517fa4
  • pinterest
    #cb2027
    custom property
    --color-pinterest
    scss variable
    $colors-social-pinterest
    scss function
    color(pinterest)
    hex
    #cb2027
  • skype
    #12a5f4
    custom property
    --color-skype
    scss variable
    $colors-social-skype
    scss function
    color(skype)
    hex
    #12a5f4
  • snapchat
    #fffc00
    custom property
    --color-snapchat
    scss variable
    $colors-social-snapchat
    scss function
    color(snapchat)
    hex
    #fffc00
  • soundcloud
    #ff7700
    custom property
    --color-soundcloud
    scss variable
    $colors-social-soundcloud
    scss function
    color(soundcloud)
    hex
    #ff7700
  • spotify
    #2ebd59
    custom property
    --color-spotify
    scss variable
    $colors-social-spotify
    scss function
    color(spotify)
    hex
    #2ebd59
  • tumblr
    #32506d
    custom property
    --color-tumblr
    scss variable
    $colors-social-tumblr
    scss function
    color(tumblr)
    hex
    #32506d
  • vimeo
    #aad450
    custom property
    --color-vimeo
    scss variable
    $colors-social-vimeo
    scss function
    color(vimeo)
    hex
    #aad450
  • vine
    #00bf8f
    custom property
    --color-vine
    scss variable
    $colors-social-vine
    scss function
    color(vine)
    hex
    #00bf8f
  • vkontakte
    #45668e
    custom property
    --color-vkontakte
    scss variable
    $colors-social-vkontakte
    scss function
    color(vkontakte)
    hex
    #45668e
  • youtube
    #bb0000
    custom property
    --color-youtube
    scss variable
    $colors-social-youtube
    scss function
    color(youtube)
    hex
    #bb0000
  • wordpress
    #21759b
    custom property
    --color-wordpress
    scss variable
    $colors-social-wordpress
    scss function
    color(wordpress)
    hex
    #21759b