Colorkit

A Compass extension for building color schemes in Sass.

Colorkit Library

Reds

Color Variable Hex Code
Red Tint Stack
$red #FF0000
$red--tint-1 #FF2626
$red--tint-2 #FF4C4C
$red--tint-3 #FF7272
$red--tint-4 #FF9999
$red--tint-5 #FFBFBF
$red--tint-6 #FFE5E5
Red Tone Stack
$red #FF0000
$red--tone-1 #EB1313
$red--tone-2 #D82626
$red--tone-3 #C53939
$red--tone-4 #B24C4C
$red--tone-5 #9F6060
$red--tone-6 #8C7373
Red Shade Stack
$red #FF0000
$red--shade-1 #D80000
$red--shade-2 #B20000
$red--shade-3 #8C0000
$red--shade-4 #660000
$red--shade-5 #3F0000
$red--shade-6 #190000

Red-Oranges

Color Variable Hex Code
Red-Orange Tint Stack
$red-orange #FF5200
$red-orange--tint-1 #FF6B26
$red-orange--tint-2 #FF854C
$red-orange--tint-3 #FF9F72
$red-orange--tint-4 #FFB999
$red-orange--tint-5 #FFD3BF
$red-orange--tint-6 #FFEDE5
Red-Orange Tone Stack
$red-orange #FF5200
$red-orange--tone-1 #EB5813
$red-orange--tone-2 #D85826
$red-orange--tone-3 #C56639
$red-orange--tone-4 #B26D4C
$red-orange--tone-5 #9F7460
$red-orange--tone-6 #8C7B73
Red-Orange Shade Stack
$red-orange #FF5200
$red-orange--shade-1 #D84500
$red-orange--shade-2 #B23900
$red-orange--shade-3 #8C2D00
$red-orange--shade-4 #662000
$red-orange--shade-5 #3F1400
$red-orange--shade-6 #190800

Oranges

Color Variable Hex Code
Orange Tint Stack
$orange #FFA500
$orange--tint-1 #FFB226
$orange--tint-2 #FFC04C
$orange--tint-3 #FFCD72
$orange--tint-4 #FFDB99
$orange--tint-5 #FFE8BF
$orange--tint-6 #FFF6E5
Orange Tone Stack
$orange #FFA500
$orange--tone-1 #EB9F13
$orange--tone-2 #D89926
$orange--tone-3 #C59439
$orange--tone-4 #B28E4C
$orange--tone-5 #9F8960
$orange--tone-6 #8C8373
Orange Shade Stack
$orange #FFA500
$orange--shade-1 #D88C00
$orange--shade-2 #B27300
$orange--shade-3 #8C5A00
$orange--shade-4 #664200
$orange--shade-5 #3F2900
$orange--shade-6 #191000

Yellow-Oranges

Color Variable Hex Code
Yellow-Orange Tint Stack
$yellow-orange #FFD200
$yellow-orange--tint-1 #FFD826
$yellow-orange--tint-2 #FFDF4C
$yellow-orange--tint-3 #FFE672
$yellow-orange--tint-4 #FFED99
$yellow-orange--tint-5 #FFF3BF
$yellow-orange--tint-6 #FFFAE5
Yellow-Orange Tone Stack
$yellow-orange #FFD200
$yellow-orange--tone-1 #EBC513
$yellow-orange--tone-2 #D8B926
$yellow-orange--tone-3 #C5AD39
$yellow-orange--tone-4 #B2A04C
$yellow-orange--tone-5 #9F9460
$yellow-orange--tone-6 #8C8873
Yellow-Orange Shade Stack
$yellow-orange #FFD200
$yellow-orange--shade-1 #D8B200
$yellow-orange--shade-2 #B29300
$yellow-orange--shade-3 #8C7300
$yellow-orange--shade-4 #665400
$yellow-orange--shade-5 #3F3400
$yellow-orange--shade-6 #191400

Yellows

Color Variable Hex Code
Yellow Tint Stack
$yellow #FFFF00
$yellow--tint-1 #FFFF26
$yellow--tint-2 #FFFF4C
$yellow--tint-3 #FFFF72
$yellow--tint-4 #FFFF99
$yellow--tint-5 #FFFFBF
$yellow--tint-6 #FFFAE5
Yellow Tone Stack
$yellow #FFFF00
$yellow--tone-1 #EBEB13
$yellow--tone-2 #D8D826
$yellow--tone-3 #C5C539
$yellow--tone-4 #B2B24C
$yellow--tone-5 #9F9F60
$yellow--tone-6 #8C8C73
Yellow Shade Stack
$yellow #FFFF00
$yellow--shade-1 #D8D800
$yellow--shade-2 #B2B200
$yellow--shade-3 #8C8C00
$yellow--shade-4 #666600
$yellow--shade-5 #3F3F00
$yellow--shade-6 #191900

Yellow-Greens

Color Variable Hex Code
Yellow-Green Tint Stack
$yellow-green #7FBF00
$yellow-green--tint-1 #92C826
$yellow-green--tint-2 #A5D24C
$yellow-green--tint-3 #B8DB72
$yellow-green--tint-4 #CBE599
$yellow-green--tint-5 #DFEFBF
$yellow-green--tint-6 #F2F8E5
Yellow-Green Tone Stack
$yellow-green #7FBF00
$yellow-green--tone-1 #7FB513
$yellow-green--tone-2 #7FAC26
$yellow-green--tone-3 #7FA239
$yellow-green--tone-4 #7F994C
$yellow-green--tone-5 #7F8F60
$yellow-green--tone-6 #7F8673
Yellow-Green Shade Stack
$yellow-green #7FBF00
$yellow-green--shade-1 #6BA200
$yellow-green--shade-2 #588500
$yellow-green--shade-3 #456900
$yellow-green--shade-4 #324C00
$yellow-green--shade-5 #1F2F00
$yellow-green--shade-6 #0C1300

Greens

Color Variable Hex Code
Green Tint Stack
$green #008800
$green--tint-1 #269926
$green--tint-2 #4CAB4C
$green--tint-3 #72BD72
$green--tint-4 #99CF99
$green--tint-5 #BFE1BF
$green--tint-6 #E5F3E5
Green Tone Stack
$green #008800
$green--tone-1 #138613
$green--tone-2 #268526
$green--tone-3 #398439
$green--tone-4 #4C834C
$green--tone-5 #608260
$green--tone-6 #738073
Green Shade Stack
$green #008800
$green--shade-1 #007300
$green--shade-2 #005F00
$green--shade-3 #004A00
$green--shade-4 #003600
$green--shade-5 #002200
$green--shade-6 #000D00

Blue-Greens

Color Variable Hex Code
Blue-Green Tint Stack
$blue-green #00407F
$blue-green--tint-1 #265C92
$blue-green--tint-2 #4C79A5
$blue-green--tint-3 #7295B8
$blue-green--tint-4 #99B2CB
$blue-green--tint-5 #BFCFDF
$blue-green--tint-6 #E5EBF2
Blue-Green Tone Stack
$blue-green #004074
$blue-green--tone-1 #13497F
$blue-green--tone-2 #26537F
$blue-green--tone-3 #395C7F
$blue-green--tone-4 #4C667F
$blue-green--tone-5 #60707F
$blue-green--tone-6 #73797F
Blue-Green Shade Stack
$blue-green #00407F
$blue-green--shade-1 #00366B
$blue-green--shade-2 #002C58
$blue-green--shade-3 #002345
$blue-green--shade-4 #001932
$blue-green--shade-5 #00101F
$blue-green--shade-6 #00060C

Blues

Color Variable Hex Code
Blue Tint Stack
$blue #0000FF
$blue--tint-1 #2626FF
$blue--tint-2 #4C4CFF
$blue--tint-3 #7272FF
$blue--tint-4 #9999FF
$blue--tint-5 #BFBFFF
$blue--tint-6 #E5E5FF
Blue Tone Stack
$blue #0000FF
$blue--tone-1 #1313EB
$blue--tone-2 #2626D8
$blue--tone-3 #3939C5
$blue--tone-4 #4C4CB2
$blue--tone-5 #60609F
$blue--tone-6 #73738C
blue Shade Stack
$blue #0000FF
$blue--shade-1 #0000D8
$blue--shade-2 #0000B2
$blue--shade-3 #00008C
$blue--shade-4 #000066
$blue--shade-5 #00003F
$blue--shade-6 #0B0618

Blue-Violets

Color Variable Hex Code
Blue-Violet Tint Stack
$blue-violet #7741F6
$blue-violet--tint-1 #8B5DF7
$blue-violet--tint-2 #9F7AF8
$blue-violet--tint-3 #B496FA
$blue-violet--tint-4 #C8B3FB
$blue-violet--tint-5 #DDCFFC
$blue-violet--tint-6 #F1ECFE
Blue-Violet Tone Stack
$blue-violet #7741F6
$blue-violet--tone-1 #784AE4
$blue-violet--tone-2 #7953D2
$blue-violet--tone-3 #7B5DC0
$blue-violet--tone-4 #7C66AF
$blue-violet--tone-5 #7D709D
$blue-violet--tone-6 #7F798B
Blue-Violet Shade Stack
$blue-violet #7741F6
$blue-violet--shade-1 #6537D1
$blue-violet--shade-2 #532DAC
$blue-violet--shade-3 #412387
$blue-violet--shade-4 #2F1A62
$blue-violet--shade-5 #1D103D
$blue-violet--shade-6 #0B0618

Violets

Color Variable Hex Code
Violet Tint Stack
$violet #EE82EE
$violet--tint-1 #F094F0
$violet--tint-2 #F3A7F3
$violet--tint-3 #F5BAF5
$violet--tint-4 #F8CDF8
$violet--tint-5 #FADFFA
$violet--tint-6 #FDF2FD
Violet Tone Stack
$violet #EE82EE
$violet--tone-1 #DD81DD
$violet--tone-2 #CD81CD
$violet--tone-3 #BC81BC
$violet--tone-4 #AC80AC
$violet--tone-5 #9B809B
$violet--tone-6 #8B808B
Violet Shade Stack
$violet #EE82EE
$violet--shade-1 #CA6ECA
$violet--shade-2 #A65BA6
$violet--shade-3 #824782
$violet--shade-4 #5F345F
$violet--shade-5 #3B203B
$violet--shade-6 #170C17

Red-Violets

Color Variable Hex Code
Red-Violet Tint Stack
$red-violet #F64177
$red-violet--tint-1 #F75D8B
$red-violet--tint-2 #F87A9F
$red-violet--tint-3 #FA96B4
$red-violet--tint-4 #FBB3C8
$red-violet--tint-5 #FCCFDD
$red-violet--tint-6 #FEECF1
Red-Violet Tone Stack
$red-violet #F64177
$red-violet--tone-1 #E44A78
$red-violet--tone-2 #D25379
$red-violet--tone-3 #C05D7B
$red-violet--tone-4 #AF667C
$red-violet--tone-5 #9D707D
$red-violet--tone-6 #8B797F
Red-Violet Shade Stack
$red-violet #F64177
$red-violet--shade-1 #D13765
$red-violet--shade-2 #AC2D53
$red-violet--shade-3 #872341
$red-violet--shade-4 #621A2F
$red-violet--shade-5 #3D101D
$red-violet--shade-6 #18060B

Grays

Color Variable Hex Code
Gray Tint Stack
$gray #808080
$gray--tint-1 #939393
$gray--tint-2 #A6A6A6
$gray--tint-3 #B9B9B9
$gray--tint-4 #CCCCCC
$gray--tint-5 #DFDFDF
$gray--tint-6 #F2F2F2
gray Shade Stack
$gray #808080
$gray--shade-1 #6C6C6C
$gray--shade-2 #595959
$gray--shade-3 #464646
$gray--shade-4 #333333
$gray--shade-5 #202020
$gray--shade-6 #0C0C0C