Colors

  • GrayDark
  • Gray
  • GrayLight
  • IceDark
  • Ice
  • IceLight
  • DarkDark
  • Dark
  • DarkLight
  • PlumDark
  • Plum
  • PlumLight
  • PurpleDark
  • Purple
  • PurpleLight
  • MagentaDark
  • Magenta
  • MagentaLight
  • PinkDark
  • Pink
  • PinkLight
  • RedDark
  • Red
  • RedLight
  • OrangeDark
  • Orange
  • OrangeLight
  • YellowDark
  • Yellow
  • YellowLight
  • LimeDark
  • Lime
  • LimeLight
  • GreenDark
  • Green
  • GreenLight
  • ArmyDark
  • Army
  • ArmyLight
  • TurqouiseDark
  • Turqouise
  • TurqouiseLight
  • CyanDark
  • Cyan
  • CyanLight
  • CloudDark
  • Cloud
  • CloudLight
  • SkyblueDark
  • Skyblue
  • SkyblueLight
  • BlueDark
  • Blue
  • BlueLight
  • BrownDark
  • Brown
  • BrownLight
  • BeigeDark
  • Beige
  • BeigeLight
  • White
  • Black

About

Guyn is made as a set to get some styling through a whole system. From websites, till the code editor, just to get it all in line.

Guyn is the Armenian word for color.

Install

The colorset of Guyn is usable in many different ways. Just the colorset is a npm package which includes all kinds of formats like json, scss (map), css (custom properties), less (list) and a includable js file.

npm install guyn

Usage

In code

The colorset can be used for many purposes. The npm package includes a css, json, scss, less and javascript file.

Json

As a theme

There are different themes made with this colorset.

Color details

  • GrayDark
    hex
    #3D4348
    scss
    $guyn-GrayDark
    css
    --guyn-GrayDark
    less
    @guyn-GrayDark
    js
    guyn.GrayDark
  • Gray
    hex
    #5C6368
    scss
    $guyn-Gray
    css
    --guyn-Gray
    less
    @guyn-Gray
    js
    guyn.Gray
  • GrayLight
    hex
    #8C9398
    scss
    $guyn-GrayLight
    css
    --guyn-GrayLight
    less
    @guyn-GrayLight
    js
    guyn.GrayLight
  • IceDark
    hex
    #A6B3BD
    scss
    $guyn-IceDark
    css
    --guyn-IceDark
    less
    @guyn-IceDark
    js
    guyn.IceDark
  • Ice
    hex
    #BEC8D0
    scss
    $guyn-Ice
    css
    --guyn-Ice
    less
    @guyn-Ice
    js
    guyn.Ice
  • IceLight
    hex
    #DDE5EB
    scss
    $guyn-IceLight
    css
    --guyn-IceLight
    less
    @guyn-IceLight
    js
    guyn.IceLight
  • DarkDark
    hex
    #1C011B
    scss
    $guyn-DarkDark
    css
    --guyn-DarkDark
    less
    @guyn-DarkDark
    js
    guyn.DarkDark
  • Dark
    hex
    #2E192D
    scss
    $guyn-Dark
    css
    --guyn-Dark
    less
    @guyn-Dark
    js
    guyn.Dark
  • DarkLight
    hex
    #664E66
    scss
    $guyn-DarkLight
    css
    --guyn-DarkLight
    less
    @guyn-DarkLight
    js
    guyn.DarkLight
  • PlumDark
    hex
    #550764
    scss
    $guyn-PlumDark
    css
    --guyn-PlumDark
    less
    @guyn-PlumDark
    js
    guyn.PlumDark
  • Plum
    hex
    #390344
    scss
    $guyn-Plum
    css
    --guyn-Plum
    less
    @guyn-Plum
    js
    guyn.Plum
  • PlumLight
    hex
    #550764
    scss
    $guyn-PlumLight
    css
    --guyn-PlumLight
    less
    @guyn-PlumLight
    js
    guyn.PlumLight
  • PurpleDark
    hex
    #9710B2
    scss
    $guyn-PurpleDark
    css
    --guyn-PurpleDark
    less
    @guyn-PurpleDark
    js
    guyn.PurpleDark
  • Purple
    hex
    #B223CF
    scss
    $guyn-Purple
    css
    --guyn-Purple
    less
    @guyn-Purple
    js
    guyn.Purple
  • PurpleLight
    hex
    #770D8D
    scss
    $guyn-PurpleLight
    css
    --guyn-PurpleLight
    less
    @guyn-PurpleLight
    js
    guyn.PurpleLight
  • MagentaDark
    hex
    #CB0C7A
    scss
    $guyn-MagentaDark
    css
    --guyn-MagentaDark
    less
    @guyn-MagentaDark
    js
    guyn.MagentaDark
  • Magenta
    hex
    #E22D95
    scss
    $guyn-Magenta
    css
    --guyn-Magenta
    less
    @guyn-Magenta
    js
    guyn.Magenta
  • MagentaLight
    hex
    #EE63B3
    scss
    $guyn-MagentaLight
    css
    --guyn-MagentaLight
    less
    @guyn-MagentaLight
    js
    guyn.MagentaLight
  • PinkDark
    hex
    #DA4C7E
    scss
    $guyn-PinkDark
    css
    --guyn-PinkDark
    less
    @guyn-PinkDark
    js
    guyn.PinkDark
  • Pink
    hex
    #E9709B
    scss
    $guyn-Pink
    css
    --guyn-Pink
    less
    @guyn-Pink
    js
    guyn.Pink
  • PinkLight
    hex
    #FE95BA
    scss
    $guyn-PinkLight
    css
    --guyn-PinkLight
    less
    @guyn-PinkLight
    js
    guyn.PinkLight
  • RedDark
    hex
    #BF1A43
    scss
    $guyn-RedDark
    css
    --guyn-RedDark
    less
    @guyn-RedDark
    js
    guyn.RedDark
  • Red
    hex
    #EF194F
    scss
    $guyn-Red
    css
    --guyn-Red
    less
    @guyn-Red
    js
    guyn.Red
  • RedLight
    hex
    #FE688E
    scss
    $guyn-RedLight
    css
    --guyn-RedLight
    less
    @guyn-RedLight
    js
    guyn.RedLight
  • OrangeDark
    hex
    #FF9E2E
    scss
    $guyn-OrangeDark
    css
    --guyn-OrangeDark
    less
    @guyn-OrangeDark
    js
    guyn.OrangeDark
  • Orange
    hex
    #FFAE41
    scss
    $guyn-Orange
    css
    --guyn-Orange
    less
    @guyn-Orange
    js
    guyn.Orange
  • OrangeLight
    hex
    #FFCD61
    scss
    $guyn-OrangeLight
    css
    --guyn-OrangeLight
    less
    @guyn-OrangeLight
    js
    guyn.OrangeLight
  • YellowDark
    hex
    #FFC624
    scss
    $guyn-YellowDark
    css
    --guyn-YellowDark
    less
    @guyn-YellowDark
    js
    guyn.YellowDark
  • Yellow
    hex
    #FFD764
    scss
    $guyn-Yellow
    css
    --guyn-Yellow
    less
    @guyn-Yellow
    js
    guyn.Yellow
  • YellowLight
    hex
    #FFEDAD
    scss
    $guyn-YellowLight
    css
    --guyn-YellowLight
    less
    @guyn-YellowLight
    js
    guyn.YellowLight
  • LimeDark
    hex
    #98F42D
    scss
    $guyn-LimeDark
    css
    --guyn-LimeDark
    less
    @guyn-LimeDark
    js
    guyn.LimeDark
  • Lime
    hex
    #98F42D
    scss
    $guyn-Lime
    css
    --guyn-Lime
    less
    @guyn-Lime
    js
    guyn.Lime
  • LimeLight
    hex
    #B1FF57
    scss
    $guyn-LimeLight
    css
    --guyn-LimeLight
    less
    @guyn-LimeLight
    js
    guyn.LimeLight
  • GreenDark
    hex
    #7CDA0F
    scss
    $guyn-GreenDark
    css
    --guyn-GreenDark
    less
    @guyn-GreenDark
    js
    guyn.GreenDark
  • Green
    hex
    #6AB933
    scss
    $guyn-Green
    css
    --guyn-Green
    less
    @guyn-Green
    js
    guyn.Green
  • GreenLight
    hex
    #8AE24C
    scss
    $guyn-GreenLight
    css
    --guyn-GreenLight
    less
    @guyn-GreenLight
    js
    guyn.GreenLight
  • ArmyDark
    hex
    #678752
    scss
    $guyn-ArmyDark
    css
    --guyn-ArmyDark
    less
    @guyn-ArmyDark
    js
    guyn.ArmyDark
  • Army
    hex
    #89A974
    scss
    $guyn-Army
    css
    --guyn-Army
    less
    @guyn-Army
    js
    guyn.Army
  • ArmyLight
    hex
    #B8D3A5
    scss
    $guyn-ArmyLight
    css
    --guyn-ArmyLight
    less
    @guyn-ArmyLight
    js
    guyn.ArmyLight
  • TurqouiseDark
    hex
    #46C162
    scss
    $guyn-TurqouiseDark
    css
    --guyn-TurqouiseDark
    less
    @guyn-TurqouiseDark
    js
    guyn.TurqouiseDark
  • Turqouise
    hex
    #62F689
    scss
    $guyn-Turqouise
    css
    --guyn-Turqouise
    less
    @guyn-Turqouise
    js
    guyn.Turqouise
  • TurqouiseLight
    hex
    #93FFB6
    scss
    $guyn-TurqouiseLight
    css
    --guyn-TurqouiseLight
    less
    @guyn-TurqouiseLight
    js
    guyn.TurqouiseLight
  • CyanDark
    hex
    #21C9B3
    scss
    $guyn-CyanDark
    css
    --guyn-CyanDark
    less
    @guyn-CyanDark
    js
    guyn.CyanDark
  • Cyan
    hex
    #18ECD0
    scss
    $guyn-Cyan
    css
    --guyn-Cyan
    less
    @guyn-Cyan
    js
    guyn.Cyan
  • CyanLight
    hex
    #53FCE6
    scss
    $guyn-CyanLight
    css
    --guyn-CyanLight
    less
    @guyn-CyanLight
    js
    guyn.CyanLight
  • CloudDark
    hex
    #82DFFF
    scss
    $guyn-CloudDark
    css
    --guyn-CloudDark
    less
    @guyn-CloudDark
    js
    guyn.CloudDark
  • Cloud
    hex
    #AAE9FF
    scss
    $guyn-Cloud
    css
    --guyn-Cloud
    less
    @guyn-Cloud
    js
    guyn.Cloud
  • CloudLight
    hex
    #CEF2FF
    scss
    $guyn-CloudLight
    css
    --guyn-CloudLight
    less
    @guyn-CloudLight
    js
    guyn.CloudLight
  • SkyblueDark
    hex
    #25A7E2
    scss
    $guyn-SkyblueDark
    css
    --guyn-SkyblueDark
    less
    @guyn-SkyblueDark
    js
    guyn.SkyblueDark
  • Skyblue
    hex
    #49BDF2
    scss
    $guyn-Skyblue
    css
    --guyn-Skyblue
    less
    @guyn-Skyblue
    js
    guyn.Skyblue
  • SkyblueLight
    hex
    #65CCFA
    scss
    $guyn-SkyblueLight
    css
    --guyn-SkyblueLight
    less
    @guyn-SkyblueLight
    js
    guyn.SkyblueLight
  • BlueDark
    hex
    #0C4D99
    scss
    $guyn-BlueDark
    css
    --guyn-BlueDark
    less
    @guyn-BlueDark
    js
    guyn.BlueDark
  • Blue
    hex
    #2E71BE
    scss
    $guyn-Blue
    css
    --guyn-Blue
    less
    @guyn-Blue
    js
    guyn.Blue
  • BlueLight
    hex
    #518CD0
    scss
    $guyn-BlueLight
    css
    --guyn-BlueLight
    less
    @guyn-BlueLight
    js
    guyn.BlueLight
  • BrownDark
    hex
    #9D5E27
    scss
    $guyn-BrownDark
    css
    --guyn-BrownDark
    less
    @guyn-BrownDark
    js
    guyn.BrownDark
  • Brown
    hex
    #B97B45
    scss
    $guyn-Brown
    css
    --guyn-Brown
    less
    @guyn-Brown
    js
    guyn.Brown
  • BrownLight
    hex
    #C69F7D
    scss
    $guyn-BrownLight
    css
    --guyn-BrownLight
    less
    @guyn-BrownLight
    js
    guyn.BrownLight
  • BeigeDark
    hex
    #EEDEB8
    scss
    $guyn-BeigeDark
    css
    --guyn-BeigeDark
    less
    @guyn-BeigeDark
    js
    guyn.BeigeDark
  • Beige
    hex
    #F8ECD1
    scss
    $guyn-Beige
    css
    --guyn-Beige
    less
    @guyn-Beige
    js
    guyn.Beige
  • BeigeLight
    hex
    #FFF9EB
    scss
    $guyn-BeigeLight
    css
    --guyn-BeigeLight
    less
    @guyn-BeigeLight
    js
    guyn.BeigeLight
  • White
    hex
    #ffffff
    scss
    $guyn-White
    css
    --guyn-White
    less
    @guyn-White
    js
    guyn.White
  • Black
    hex
    #111111
    scss
    $guyn-Black
    css
    --guyn-Black
    less
    @guyn-Black
    js
    guyn.Black