Support project
1PiRdutMwncxkjp8quxQiF1qFUBGBjwhfg

Color schemes

Usage

.text-{color}
.bg-{color}
.border-{color}

&.{target}-{color}-minus-{1to5}
&.{target}-{color}-base
&.{target}-{color}-plus-{1to4}
&.{target}-{color}-accent-{1to4}

Side note(s)

You can define a color anywhere, like so: <div class="bg-cyan"><div class="child"></div></div>, then add class ".bg-cyan-minus-3" on .child to make it brighter

Red

  • #fde0dc
    .minus-5
  • #f9bdbb
    .minus-4
  • #f69988
    .minus-3
  • #f36c60
    .minus-2
  • #e84e40
    .minus-1
  • #e51c23
    .base
  • #dd191d
    .plus-1
  • #d01716
    .plus-2
  • #c41411
    .plus-3
  • #b0120a
    .plus-4
  • #ff7997
    .accent-1
  • #ff5177
    .accent-2
  • #ff2d6f
    .accent-3
  • #e00032
    .accent-4

Pink

  • #fce4ec
    .minus-5
  • #f8bbd0
    .minus-4
  • #f48fb1
    .minus-3
  • #f06292
    .minus-2
  • #ec407a
    .minus-1
  • #e91e63
    .base
  • #d81b60
    .plus-1
  • #c2185b
    .plus-2
  • #ad1457
    .plus-3
  • #880e4f
    .plus-4
  • #ff80ab
    .accent-1
  • #ff4081
    .accent-2
  • #f50057
    .accent-3
  • #c51162
    .accent-4

Purple

  • #f3e5f5
    .minus-5
  • #e1bee7
    .minus-4
  • #ce93d8
    .minus-3
  • #ba68c8
    .minus-2
  • #ab47bc
    .minus-1
  • #9c27b0
    .base
  • #8e24aa
    .plus-1
  • #7b1fa2
    .plus-2
  • #6a1b9a
    .plus-3
  • #4a148c
    .plus-4
  • #ea80fc
    .accent-1
  • #e040fb
    .accent-2
  • #d500f9
    .accent-3
  • #aa00ff
    .accent-4

Deep-purple

  • #ede7f6
    .minus-5
  • #d1c4e9
    .minus-4
  • #b39ddb
    .minus-3
  • #9575cd
    .minus-2
  • #7e57c2
    .minus-1
  • #673ab7
    .base
  • #5e35b1
    .plus-1
  • #512da8
    .plus-2
  • #4527a0
    .plus-3
  • #311b92
    .plus-4
  • #b388ff
    .accent-1
  • #7c4dff
    .accent-2
  • #651fff
    .accent-3
  • #6200ea
    .accent-4

Indigo

  • #e8eaf6
    .minus-5
  • #c5cae9
    .minus-4
  • #9fa8da
    .minus-3
  • #7986cb
    .minus-2
  • #5c6bc0
    .minus-1
  • #3f51b5
    .base
  • #3949ab
    .plus-1
  • #303f9f
    .plus-2
  • #283593
    .plus-3
  • #1a237e
    .plus-4
  • #8c9eff
    .accent-1
  • #536dfe
    .accent-2
  • #536dfe
    .accent-3
  • #304ffe
    .accent-4

Blue

  • #e7e9fd
    .minus-5
  • #d0d9ff
    .minus-4
  • #afbfff
    .minus-3
  • #91a7ff
    .minus-2
  • #738ffe
    .minus-1
  • #5677fc
    .base
  • #4e6cef
    .plus-1
  • #455ede
    .plus-2
  • #3b50ce
    .plus-3
  • #2a36b1
    .plus-4
  • #a6baff
    .accent-1
  • #6889ff
    .accent-2
  • #4d73ff
    .accent-3
  • #4d69ff
    .accent-4

Light-blue

  • #e1f5fe
    .minus-5
  • #b3e5fc
    .minus-4
  • #81d4fa
    .minus-3
  • #4fc3f7
    .minus-2
  • #29b6f6
    .minus-1
  • #03a9f4
    .base
  • #039be5
    .plus-1
  • #0288d1
    .plus-2
  • #0277bd
    .plus-3
  • #01579b
    .plus-4
  • #80d8ff
    .accent-1
  • #40c4ff
    .accent-2
  • #00b0ff
    .accent-3
  • #0091ea
    .accent-4

Cyan

  • #e0f7fa
    .minus-5
  • #b2ebf2
    .minus-4
  • #80deea
    .minus-3
  • #4dd0e1
    .minus-2
  • #26c6da
    .minus-1
  • #00bcd4
    .base
  • #00acc1
    .plus-1
  • #0097a7
    .plus-2
  • #00838f
    .plus-3
  • #006064
    .plus-4
  • #84ffff
    .accent-1
  • #18ffff
    .accent-2
  • #00e5ff
    .accent-3
  • #00b8d4
    .accent-4

Teal

  • #e0f2f1
    .minus-5
  • #b2dfdb
    .minus-4
  • #80cbc4
    .minus-3
  • #4db6ac
    .minus-2
  • #26a69a
    .minus-1
  • #009688
    .base
  • #00897b
    .plus-1
  • #00796b
    .plus-2
  • #00695c
    .plus-3
  • #004d40
    .plus-4
  • #a7ffeb
    .accent-1
  • #64ffda
    .accent-2
  • #1de9b6
    .accent-3
  • #00bfa5
    .accent-4

Green

  • #d0f8ce
    .minus-5
  • #a3e9a4
    .minus-4
  • #72d572
    .minus-3
  • #42bd41
    .minus-2
  • #2baf2b
    .minus-1
  • #259b24
    .base
  • #0a8f08
    .plus-1
  • #0a7e07
    .plus-2
  • #056f00
    .plus-3
  • #0d5302
    .plus-4
  • #a2f78d
    .accent-1
  • #5af158
    .accent-2
  • #14e715
    .accent-3
  • #12c700
    .accent-4

Light-green

  • #f1f8e9
    .minus-5
  • #dcedc8
    .minus-4
  • #c5e1a5
    .minus-3
  • #aed581
    .minus-2
  • #9ccc65
    .minus-1
  • #8bc34a
    .base
  • #7cb342
    .plus-1
  • #689f38
    .plus-2
  • #558b2f
    .plus-3
  • #33691e
    .plus-4
  • #ccff90
    .accent-1
  • #b2ff59
    .accent-2
  • #76ff03
    .accent-3
  • #64dd17
    .accent-4

Lime

  • #f9fbe7
    .minus-5
  • #f0f4c3
    .minus-4
  • #e6ee9c
    .minus-3
  • #dce775
    .minus-2
  • #d4e157
    .minus-1
  • #cddc39
    .base
  • #c0ca33
    .plus-1
  • #afb42b
    .plus-2
  • #9e9d24
    .plus-3
  • #827717
    .plus-4
  • #f4ff81
    .accent-1
  • #eeff41
    .accent-2
  • #c6ff00
    .accent-3
  • #aeea00
    .accent-4

Yellow

  • #fffde7
    .minus-5
  • #fff9c4
    .minus-4
  • #fff59d
    .minus-3
  • #fff176
    .minus-2
  • #ffee58
    .minus-1
  • #ffeb3b
    .base
  • #fdd835
    .plus-1
  • #fbc02d
    .plus-2
  • #f9a825
    .plus-3
  • #f57f17
    .plus-4
  • #ffff8d
    .accent-1
  • #ffff00
    .accent-2
  • #ffea00
    .accent-3
  • #ffd600
    .accent-4

Amber

  • #fff8e1
    .minus-5
  • #ffecb3
    .minus-4
  • #ffe082
    .minus-3
  • #ffd54f
    .minus-2
  • #ffca28
    .minus-1
  • #ffc107
    .base
  • #ffb300
    .plus-1
  • #ffa000
    .plus-2
  • #ff8f00
    .plus-3
  • #ff6f00
    .plus-4
  • #ffe57f
    .accent-1
  • #ffd740
    .accent-2
  • #ffc400
    .accent-3
  • #ffab00
    .accent-4

Orange

  • #fff3e0
    .minus-5
  • #ffe0b2
    .minus-4
  • #ffcc80
    .minus-3
  • #ffb74d
    .minus-2
  • #ffa726
    .minus-1
  • #ff9800
    .base
  • #fb8c00
    .plus-1
  • #f57c00
    .plus-2
  • #ef6c00
    .plus-3
  • #e65100
    .plus-4
  • #ffd180
    .accent-1
  • #ffab40
    .accent-2
  • #ff9100
    .accent-3
  • #ff6d00
    .accent-4

Deep-orange

  • #fbe9e7
    .minus-5
  • #ffccbc
    .minus-4
  • #ffab91
    .minus-3
  • #ff8a65
    .minus-2
  • #ff7043
    .minus-1
  • #ff5722
    .base
  • #f4511e
    .plus-1
  • #e64a19
    .plus-2
  • #d84315
    .plus-3
  • #bf360c
    .plus-4
  • #ff9e80
    .accent-1
  • #ff6e40
    .accent-2
  • #ff3d00
    .accent-3
  • #dd2c00
    .accent-4

Brown

  • #efebe9
    .minus-5
  • #d7ccc8
    .minus-4
  • #bcaaa4
    .minus-3
  • #a1887f
    .minus-2
  • #8d6e63
    .minus-1
  • #795548
    .base
  • #6d4c41
    .plus-1
  • #5d4037
    .plus-2
  • #4e342e
    .plus-3
  • #3e2723
    .plus-4
  • #d7ccc8
    .accent-1
  • #bcaaa4
    .accent-2
  • #a1887f
    .accent-3
  • #8d6e63
    .accent-4

Grey

  • #fafafa
    .minus-5
  • #f5f5f5
    .minus-4
  • #eeeeee
    .minus-3
  • #e0e0e0
    .minus-2
  • #bdbdbd
    .minus-1
  • #9e9e9e
    .base
  • #757575
    .plus-1
  • #616161
    .plus-2
  • #424242
    .plus-3
  • #212121
    .plus-4
  • #f5f5f5
    .accent-1
  • #eeeeee
    .accent-2
  • #e0e0e0
    .accent-3
  • #bdbdbd
    .accent-4

Blue-grey

  • #eceff1
    .minus-5
  • #cfd8dc
    .minus-4
  • #b0bec5
    .minus-3
  • #90a4ae
    .minus-2
  • #78909c
    .minus-1
  • #607d8b
    .base
  • #546e7a
    .plus-1
  • #455a64
    .plus-2
  • #37474f
    .plus-3
  • #263238
    .plus-4
  • #cfd8dc
    .accent-1
  • #b0bec5
    .accent-2
  • #90a4ae
    .accent-3
  • #78909c
    .accent-4
Leaf CSS Framework by @kortekim inspired by Google's Material Design