created:12/30/2020
updated:12/30/2020
loc
156
comments
6%
SkylineColor
Color item displaying as a row, with color name, custom columns for contrast checks scss variable name and color block. Design inspired by Skyline.
| Name | Use on White | Use on Gray 200 | Scss | Example |
|---|---|---|---|---|
Green | Yes | Yes | get-hue(green) | #1a801b |
Green Light | No | No | get-hue(green, light) | #f4fce3 |
Yellow | No | No | get-hue(yellow) | #fcc419 |
Yellow Light | No | No | get-hue(yellow, light) | #fff9db |
Gray 500 | No | No | get-gray(500) | #8b8b8b |
Gray 600 | Yes | No | get-gray(600) | #757575 |
Gray 700 | Yes | Yes | get-gray(700) | #616161 |
| Name | Use on White | Use on Gray 200 | Scss | Example |
|---|---|---|---|---|
Green | Yes | Yes | get-hue(green) | #1a801b |
Green Light | No | No | get-hue(green, light) | #f4fce3 |
Yellow | No | No | get-hue(yellow) | #fcc419 |
Yellow Light | No | No | get-hue(yellow, light) | #fff9db |
Gray 500 | No | No | get-gray(500) | #8b8b8b |
Gray 600 | Yes | No | get-gray(600) | #757575 |
Gray 700 | Yes | Yes | get-gray(700) | #616161 |
| Name | Use on White | Use on Gray 200 | Scss | Example |
|---|---|---|---|---|
Green | Yes | Yes | get-hue(green) | #1a801b |
Green Light | No | No | get-hue(green, light) | #f4fce3 |
Yellow | No | No | get-hue(yellow) | #fcc419 |
Yellow Light | No | No | get-hue(yellow, light) | #fff9db |
Gray 500 | No | No | get-gray(500) | #8b8b8b |
Gray 600 | Yes | No | get-gray(600) | #757575 |
Gray 700 | Yes | Yes | get-gray(700) | #616161 |
| Name | Use on White | Use on Gray 200 | Scss | Example |
|---|---|---|---|---|
Green | Yes | Yes | get-hue(green) | #1a801b |
Green Light | No | No | get-hue(green, light) | #f4fce3 |
Yellow | No | No | get-hue(yellow) | #fcc419 |
Yellow Light | No | No | get-hue(yellow, light) | #fff9db |
Gray 500 | No | No | get-gray(500) | #8b8b8b |
Gray 600 | Yes | No | get-gray(600) | #757575 |
Gray 700 | Yes | Yes | get-gray(700) | #616161 |
| Name | Use on White | Use on Gray 200 | Scss | Example |
|---|---|---|---|---|
Green | Yes | Yes | get-hue(green) | #1a801b |
Green Light | No | No | get-hue(green, light) | #f4fce3 |
Yellow | No | No | get-hue(yellow) | #fcc419 |
Yellow Light | No | No | get-hue(yellow, light) | #fff9db |
Gray 500 | No | No | get-gray(500) | #8b8b8b |
Gray 600 | Yes | No | get-gray(600) | #757575 |
Gray 700 | Yes | Yes | get-gray(700) | #616161 |