Created
October 8, 2015 09:05
-
-
Save Phunky/3589396df866920e2aa4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Example</h1> | |
| <div class="colours"><div class="colour"><div class="base l4">base lighter #4</div><div class="base l3">base lighter #3</div><div class="base l2">base lighter #2</div><div class="base l1">base lighter #1</div><div class="base">base</div><div class="base d1">base darker #1</div><div class="base d2">base darker #2</div><div class="base d3">base darker #3</div><div class="base d4">base darker #4</div></div><div class="colour"><div class="mobilleo l4">mobilleo lighter #4</div><div class="mobilleo l3">mobilleo lighter #3</div><div class="mobilleo l2">mobilleo lighter #2</div><div class="mobilleo l1">mobilleo lighter #1</div><div class="mobilleo">mobilleo</div><div class="mobilleo d1">mobilleo darker #1</div><div class="mobilleo d2">mobilleo darker #2</div><div class="mobilleo d3">mobilleo darker #3</div><div class="mobilleo d4">mobilleo darker #4</div></div><div class="colour"><div class="x l4">x lighter #4</div><div class="x l3">x lighter #3</div><div class="x l2">x lighter #2</div><div class="x l1">x lighter #1</div><div class="x">x</div><div class="x d1">x darker #1</div><div class="x d2">x darker #2</div><div class="x d3">x darker #3</div><div class="x d4">x darker #4</div></div><div class="colour"><div class="a l4">a lighter #4</div><div class="a l3">a lighter #3</div><div class="a l2">a lighter #2</div><div class="a l1">a lighter #1</div><div class="a">a</div><div class="a d1">a darker #1</div><div class="a d2">a darker #2</div><div class="a d3">a darker #3</div><div class="a d4">a darker #4</div></div><div class="colour"><div class="b l4">b lighter #4</div><div class="b l3">b lighter #3</div><div class="b l2">b lighter #2</div><div class="b l1">b lighter #1</div><div class="b">b</div><div class="b d1">b darker #1</div><div class="b d2">b darker #2</div><div class="b d3">b darker #3</div><div class="b d4">b darker #4</div></div><div class="colour"><div class="y l4">y lighter #4</div><div class="y l3">y lighter #3</div><div class="y l2">y lighter #2</div><div class="y l1">y lighter #1</div><div class="y">y</div><div class="y d1">y darker #1</div><div class="y d2">y darker #2</div><div class="y d3">y darker #3</div><div class="y d4">y darker #4</div></div><div class="colour"><div class="white l4">white lighter #4</div><div class="white l3">white lighter #3</div><div class="white l2">white lighter #2</div><div class="white l1">white lighter #1</div><div class="white">white</div><div class="white d1">white darker #1</div><div class="white d2">white darker #2</div><div class="white d3">white darker #3</div><div class="white d4">white darker #4</div></div><div class="colour"><div class="black l4">black lighter #4</div><div class="black l3">black lighter #3</div><div class="black l2">black lighter #2</div><div class="black l1">black lighter #1</div><div class="black">black</div><div class="black d1">black darker #1</div><div class="black d2">black darker #2</div><div class="black d3">black darker #3</div><div class="black d4">black darker #4</div></div><div class="colour"><div class="blue-grey l4">blue-grey lighter #4</div><div class="blue-grey l3">blue-grey lighter #3</div><div class="blue-grey l2">blue-grey lighter #2</div><div class="blue-grey l1">blue-grey lighter #1</div><div class="blue-grey">blue-grey</div><div class="blue-grey d1">blue-grey darker #1</div><div class="blue-grey d2">blue-grey darker #2</div><div class="blue-grey d3">blue-grey darker #3</div><div class="blue-grey d4">blue-grey darker #4</div></div><div class="colour"><div class="grey l4">grey lighter #4</div><div class="grey l3">grey lighter #3</div><div class="grey l2">grey lighter #2</div><div class="grey l1">grey lighter #1</div><div class="grey">grey</div><div class="grey d1">grey darker #1</div><div class="grey d2">grey darker #2</div><div class="grey d3">grey darker #3</div><div class="grey d4">grey darker #4</div></div><div class="colour"><div class="brown l4">brown lighter #4</div><div class="brown l3">brown lighter #3</div><div class="brown l2">brown lighter #2</div><div class="brown l1">brown lighter #1</div><div class="brown">brown</div><div class="brown d1">brown darker #1</div><div class="brown d2">brown darker #2</div><div class="brown d3">brown darker #3</div><div class="brown d4">brown darker #4</div></div><div class="colour"><div class="deep-orange l4">deep-orange lighter #4</div><div class="deep-orange l3">deep-orange lighter #3</div><div class="deep-orange l2">deep-orange lighter #2</div><div class="deep-orange l1">deep-orange lighter #1</div><div class="deep-orange">deep-orange</div><div class="deep-orange d1">deep-orange darker #1</div><div class="deep-orange d2">deep-orange darker #2</div><div class="deep-orange d3">deep-orange darker #3</div><div class="deep-orange d4">deep-orange darker #4</div></div><div class="colour"><div class="orange l4">orange lighter #4</div><div class="orange l3">orange lighter #3</div><div class="orange l2">orange lighter #2</div><div class="orange l1">orange lighter #1</div><div class="orange">orange</div><div class="orange d1">orange darker #1</div><div class="orange d2">orange darker #2</div><div class="orange d3">orange darker #3</div><div class="orange d4">orange darker #4</div></div><div class="colour"><div class="amber l4">amber lighter #4</div><div class="amber l3">amber lighter #3</div><div class="amber l2">amber lighter #2</div><div class="amber l1">amber lighter #1</div><div class="amber">amber</div><div class="amber d1">amber darker #1</div><div class="amber d2">amber darker #2</div><div class="amber d3">amber darker #3</div><div class="amber d4">amber darker #4</div></div><div class="colour"><div class="yellow l4">yellow lighter #4</div><div class="yellow l3">yellow lighter #3</div><div class="yellow l2">yellow lighter #2</div><div class="yellow l1">yellow lighter #1</div><div class="yellow">yellow</div><div class="yellow d1">yellow darker #1</div><div class="yellow d2">yellow darker #2</div><div class="yellow d3">yellow darker #3</div><div class="yellow d4">yellow darker #4</div></div><div class="colour"><div class="lime l4">lime lighter #4</div><div class="lime l3">lime lighter #3</div><div class="lime l2">lime lighter #2</div><div class="lime l1">lime lighter #1</div><div class="lime">lime</div><div class="lime d1">lime darker #1</div><div class="lime d2">lime darker #2</div><div class="lime d3">lime darker #3</div><div class="lime d4">lime darker #4</div></div><div class="colour"><div class="light-green l4">light-green lighter #4</div><div class="light-green l3">light-green lighter #3</div><div class="light-green l2">light-green lighter #2</div><div class="light-green l1">light-green lighter #1</div><div class="light-green">light-green</div><div class="light-green d1">light-green darker #1</div><div class="light-green d2">light-green darker #2</div><div class="light-green d3">light-green darker #3</div><div class="light-green d4">light-green darker #4</div></div><div class="colour"><div class="green l4">green lighter #4</div><div class="green l3">green lighter #3</div><div class="green l2">green lighter #2</div><div class="green l1">green lighter #1</div><div class="green">green</div><div class="green d1">green darker #1</div><div class="green d2">green darker #2</div><div class="green d3">green darker #3</div><div class="green d4">green darker #4</div></div><div class="colour"><div class="teal l4">teal lighter #4</div><div class="teal l3">teal lighter #3</div><div class="teal l2">teal lighter #2</div><div class="teal l1">teal lighter #1</div><div class="teal">teal</div><div class="teal d1">teal darker #1</div><div class="teal d2">teal darker #2</div><div class="teal d3">teal darker #3</div><div class="teal d4">teal darker #4</div></div><div class="colour"><div class="cyan l4">cyan lighter #4</div><div class="cyan l3">cyan lighter #3</div><div class="cyan l2">cyan lighter #2</div><div class="cyan l1">cyan lighter #1</div><div class="cyan">cyan</div><div class="cyan d1">cyan darker #1</div><div class="cyan d2">cyan darker #2</div><div class="cyan d3">cyan darker #3</div><div class="cyan d4">cyan darker #4</div></div><div class="colour"><div class="light-blue l4">light-blue lighter #4</div><div class="light-blue l3">light-blue lighter #3</div><div class="light-blue l2">light-blue lighter #2</div><div class="light-blue l1">light-blue lighter #1</div><div class="light-blue">light-blue</div><div class="light-blue d1">light-blue darker #1</div><div class="light-blue d2">light-blue darker #2</div><div class="light-blue d3">light-blue darker #3</div><div class="light-blue d4">light-blue darker #4</div></div><div class="colour"><div class="blue l4">blue lighter #4</div><div class="blue l3">blue lighter #3</div><div class="blue l2">blue lighter #2</div><div class="blue l1">blue lighter #1</div><div class="blue">blue</div><div class="blue d1">blue darker #1</div><div class="blue d2">blue darker #2</div><div class="blue d3">blue darker #3</div><div class="blue d4">blue darker #4</div></div><div class="colour"><div class="indigo l4">indigo lighter #4</div><div class="indigo l3">indigo lighter #3</div><div class="indigo l2">indigo lighter #2</div><div class="indigo l1">indigo lighter #1</div><div class="indigo">indigo</div><div class="indigo d1">indigo darker #1</div><div class="indigo d2">indigo darker #2</div><div class="indigo d3">indigo darker #3</div><div class="indigo d4">indigo darker #4</div></div><div class="colour"><div class="deep-purple l4">deep-purple lighter #4</div><div class="deep-purple l3">deep-purple lighter #3</div><div class="deep-purple l2">deep-purple lighter #2</div><div class="deep-purple l1">deep-purple lighter #1</div><div class="deep-purple">deep-purple</div><div class="deep-purple d1">deep-purple darker #1</div><div class="deep-purple d2">deep-purple darker #2</div><div class="deep-purple d3">deep-purple darker #3</div><div class="deep-purple d4">deep-purple darker #4</div></div><div class="colour"><div class="purple l4">purple lighter #4</div><div class="purple l3">purple lighter #3</div><div class="purple l2">purple lighter #2</div><div class="purple l1">purple lighter #1</div><div class="purple">purple</div><div class="purple d1">purple darker #1</div><div class="purple d2">purple darker #2</div><div class="purple d3">purple darker #3</div><div class="purple d4">purple darker #4</div></div><div class="colour"><div class="pink l4">pink lighter #4</div><div class="pink l3">pink lighter #3</div><div class="pink l2">pink lighter #2</div><div class="pink l1">pink lighter #1</div><div class="pink">pink</div><div class="pink d1">pink darker #1</div><div class="pink d2">pink darker #2</div><div class="pink d3">pink darker #3</div><div class="pink d4">pink darker #4</div></div><div class="colour"><div class="red l4">red lighter #4</div><div class="red l3">red lighter #3</div><div class="red l2">red lighter #2</div><div class="red l1">red lighter #1</div><div class="red">red</div><div class="red d1">red darker #1</div><div class="red d2">red darker #2</div><div class="red d3">red darker #3</div><div class="red d4">red darker #4</div></div><div class="colour"><div class="legend l4">legend lighter #4</div><div class="legend l3">legend lighter #3</div><div class="legend l2">legend lighter #2</div><div class="legend l1">legend lighter #1</div><div class="legend">legend</div><div class="legend d1">legend darker #1</div><div class="legend d2">legend darker #2</div><div class="legend d3">legend darker #3</div><div class="legend d4">legend darker #4</div></div></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| // | |
| // Example of https://github.com/Phunky/colour/ | |
| // | |
| // | |
| // Define your colour map | |
| // | |
| $colours: ( | |
| 'base': #ECECEC, | |
| 'mobilleo': #384154, | |
| 'x': #208AE4, | |
| 'a': #F9414D, | |
| 'b': #FFDB00, | |
| 'y': #7ED321, | |
| 'legend': #99cc00, | |
| ); | |
| // | |
| // Include _colour.scss skip to line 128 for rest of example | |
| // | |
| // | |
| // Default colours based on Googles Material Design | |
| // | |
| $colours: map-merge($colours, ( | |
| 'red': #F44336, | |
| 'pink': #E91E63, | |
| 'purple': #9C27B0, | |
| 'deep-purple': #673AB7, | |
| 'indigo': #3F51B5, | |
| 'blue': #2196F3, | |
| 'light-blue': #03A9F4, | |
| 'cyan': #00BCD4, | |
| 'teal': #009688, | |
| 'green': #4CAF50, | |
| 'light-green': #8BC34A, | |
| 'lime': #CDDC39, | |
| 'yellow': #FFEB3B, | |
| 'amber': #FFC107, | |
| 'orange': #FF9800, | |
| 'deep-orange': #FF5722, | |
| 'brown': #795548, | |
| 'grey': #9E9E9E, | |
| 'blue-grey': #607D8B, | |
| 'black': #000, | |
| 'white': #fff, | |
| )); | |
| // | |
| // The only function that really matters. | |
| // | |
| @function colour($name){ | |
| $color: map-get($colours, $name); | |
| @if $color { | |
| @return $color; | |
| } | |
| @error "#{$name} is not defined in $colours."; | |
| } | |
| // | |
| // Helper functions to allow you to use the colour name with the | |
| // default sass functions. | |
| // | |
| // I would love to find away to reduce this as it feels like a lot of crud | |
| // just for the sake of it. | |
| // | |
| @function colour-darken($name, $percentage){ | |
| @return darken( colour($name), $percentage ); | |
| } | |
| @function colour-lighten($name, $percentage){ | |
| @return lighten( colour($name), $percentage ); | |
| } | |
| @function colour-saturate($name, $percentage){ | |
| @return saturate( colour($name), $percentage ); | |
| } | |
| @function colour-desaturate($name, $percentage){ | |
| @return desaturate( colour($name), $percentage ); | |
| } | |
| @function colour-adjust-hue($name, $percentage){ | |
| @return adjust-hue( colour($name), $percentage ); | |
| } | |
| @function colour-tint($name, $percentage){ | |
| @return tint( colour($name), $percentage ); | |
| } | |
| @function colour-shade($name, $percentage){ | |
| @return shade( colour($name), $percentage ); | |
| } | |
| @function colour-rgba($name, $value){ | |
| @return rgba( colour($name), $value ); | |
| } | |
| @function colour-opacity($name, $value){ | |
| @return colour-rgba($name, $value); | |
| } | |
| // | |
| // Material Design Colour Accents | |
| // http://www.google.com/design/spec/style/color.html# | |
| // We don't support the Ax00 colours atm for the sake of simplicity: em | |
| // | |
| @function colour-accent($name, $accent){ | |
| $accents: ( | |
| 50: 4, | |
| 100: 8, | |
| 200: 12, | |
| 300: 16, | |
| 400: 20, | |
| 600: 4, | |
| 700: 8, | |
| 800: 12, | |
| 900: 16 | |
| ); | |
| @if $accent < 500 { | |
| @return colour-lighten($name, map-get($accents, $accent)); | |
| } | |
| @if $accent > 500 { | |
| @return colour-darken($name, map-get($accents, $accent)); | |
| } | |
| @return colour($name); | |
| } | |
| // | |
| // Example usage | |
| // Lets build classes for every color and accent | |
| // | |
| @each $name, $value in $colours { | |
| $background: map-get($colours, $name); | |
| $color: if( lightness($background) > 50 , #000, #fff); | |
| $shade: .6; | |
| .#{$name} { | |
| padding: 1em; | |
| background-color: $background; | |
| color: colour-opacity('black', .6); | |
| } | |
| .black { | |
| color: colour-opacity('white', .6); | |
| } | |
| @for $i from 1 through 4 { | |
| $percent: $i * 4; | |
| .#{$name}.l#{$i} { | |
| background-color: lighten($background, $percent); | |
| } | |
| .#{$name}.d#{$i} { | |
| background-color: darken($background, $percent); | |
| } | |
| } | |
| } | |
| .colours { | |
| display: flex; | |
| flex-wrap: wrap; | |
| .colour { | |
| flex: 0 0 auto; | |
| width: 10%; | |
| text-align: center; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .base { | |
| padding: 1em; | |
| background-color: #ECECEC; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .base.l1 { | |
| background-color: #f6f6f6; | |
| } | |
| .base.d1 { | |
| background-color: #e2e2e2; | |
| } | |
| .base.l2 { | |
| background-color: white; | |
| } | |
| .base.d2 { | |
| background-color: #d8d8d8; | |
| } | |
| .base.l3 { | |
| background-color: white; | |
| } | |
| .base.d3 { | |
| background-color: #cdcdcd; | |
| } | |
| .base.l4 { | |
| background-color: white; | |
| } | |
| .base.d4 { | |
| background-color: #c3c3c3; | |
| } | |
| .mobilleo { | |
| padding: 1em; | |
| background-color: #384154; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .mobilleo.l1 { | |
| background-color: #404a60; | |
| } | |
| .mobilleo.d1 { | |
| background-color: #303848; | |
| } | |
| .mobilleo.l2 { | |
| background-color: #48546c; | |
| } | |
| .mobilleo.d2 { | |
| background-color: #282e3c; | |
| } | |
| .mobilleo.l3 { | |
| background-color: #505d79; | |
| } | |
| .mobilleo.d3 { | |
| background-color: #20252f; | |
| } | |
| .mobilleo.l4 { | |
| background-color: #596785; | |
| } | |
| .mobilleo.d4 { | |
| background-color: #171b23; | |
| } | |
| .x { | |
| padding: 1em; | |
| background-color: #208AE4; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .x.l1 { | |
| background-color: #3294e6; | |
| } | |
| .x.d1 { | |
| background-color: #1a7fd6; | |
| } | |
| .x.l2 { | |
| background-color: #449de8; | |
| } | |
| .x.d2 { | |
| background-color: #1875c4; | |
| } | |
| .x.l3 { | |
| background-color: #57a7eb; | |
| } | |
| .x.d3 { | |
| background-color: #156ab1; | |
| } | |
| .x.l4 { | |
| background-color: #69b0ed; | |
| } | |
| .x.d4 { | |
| background-color: #135f9f; | |
| } | |
| .a { | |
| padding: 1em; | |
| background-color: #F9414D; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .a.l1 { | |
| background-color: #fa5560; | |
| } | |
| .a.d1 { | |
| background-color: #f82d3a; | |
| } | |
| .a.l2 { | |
| background-color: #fa6972; | |
| } | |
| .a.d2 { | |
| background-color: #f81928; | |
| } | |
| .a.l3 { | |
| background-color: #fb7c85; | |
| } | |
| .a.d3 { | |
| background-color: #f50817; | |
| } | |
| .a.l4 { | |
| background-color: #fb9097; | |
| } | |
| .a.d4 { | |
| background-color: #e10715; | |
| } | |
| .b { | |
| padding: 1em; | |
| background-color: #FFDB00; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .b.l1 { | |
| background-color: #ffde14; | |
| } | |
| .b.d1 { | |
| background-color: #ebc900; | |
| } | |
| .b.l2 { | |
| background-color: #ffe129; | |
| } | |
| .b.d2 { | |
| background-color: #d6b800; | |
| } | |
| .b.l3 { | |
| background-color: #ffe43d; | |
| } | |
| .b.d3 { | |
| background-color: #c2a600; | |
| } | |
| .b.l4 { | |
| background-color: #ffe752; | |
| } | |
| .b.d4 { | |
| background-color: #ad9500; | |
| } | |
| .y { | |
| padding: 1em; | |
| background-color: #7ED321; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .y.l1 { | |
| background-color: #88de2b; | |
| } | |
| .y.d1 { | |
| background-color: #73c11e; | |
| } | |
| .y.l2 { | |
| background-color: #92e13c; | |
| } | |
| .y.d2 { | |
| background-color: #69b01b; | |
| } | |
| .y.l3 { | |
| background-color: #9ce34e; | |
| } | |
| .y.d3 { | |
| background-color: #5e9e19; | |
| } | |
| .y.l4 { | |
| background-color: #a6e660; | |
| } | |
| .y.d4 { | |
| background-color: #548c16; | |
| } | |
| .legend { | |
| padding: 1em; | |
| background-color: #99cc00; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .legend.l1 { | |
| background-color: #a8e000; | |
| } | |
| .legend.d1 { | |
| background-color: #8ab800; | |
| } | |
| .legend.l2 { | |
| background-color: #b8f500; | |
| } | |
| .legend.d2 { | |
| background-color: #7aa300; | |
| } | |
| .legend.l3 { | |
| background-color: #c2ff0a; | |
| } | |
| .legend.d3 { | |
| background-color: #6b8f00; | |
| } | |
| .legend.l4 { | |
| background-color: #c7ff1f; | |
| } | |
| .legend.d4 { | |
| background-color: #5c7a00; | |
| } | |
| .red { | |
| padding: 1em; | |
| background-color: #F44336; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .red.l1 { | |
| background-color: #f55549; | |
| } | |
| .red.d1 { | |
| background-color: #f33123; | |
| } | |
| .red.l2 { | |
| background-color: #f6675d; | |
| } | |
| .red.d2 { | |
| background-color: #f21f0f; | |
| } | |
| .red.l3 { | |
| background-color: #f77970; | |
| } | |
| .red.d3 { | |
| background-color: #e11b0c; | |
| } | |
| .red.l4 { | |
| background-color: #f88b83; | |
| } | |
| .red.d4 { | |
| background-color: #cd180b; | |
| } | |
| .pink { | |
| padding: 1em; | |
| background-color: #E91E63; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .pink.l1 { | |
| background-color: #eb3170; | |
| } | |
| .pink.d1 { | |
| background-color: #dd1659; | |
| } | |
| .pink.l2 { | |
| background-color: #ed437d; | |
| } | |
| .pink.d2 { | |
| background-color: #ca1452; | |
| } | |
| .pink.l3 { | |
| background-color: #ee568a; | |
| } | |
| .pink.d3 { | |
| background-color: #b8124a; | |
| } | |
| .pink.l4 { | |
| background-color: #f06897; | |
| } | |
| .pink.d4 { | |
| background-color: #a51043; | |
| } | |
| .purple { | |
| padding: 1em; | |
| background-color: #9C27B0; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .purple.l1 { | |
| background-color: #ab2bc1; | |
| } | |
| .purple.d1 { | |
| background-color: #8d239f; | |
| } | |
| .purple.l2 { | |
| background-color: #b92fd1; | |
| } | |
| .purple.d2 { | |
| background-color: #7e208f; | |
| } | |
| .purple.l3 { | |
| background-color: #bf40d5; | |
| } | |
| .purple.d3 { | |
| background-color: #701c7e; | |
| } | |
| .purple.l4 { | |
| background-color: #c450d8; | |
| } | |
| .purple.d4 { | |
| background-color: #61186d; | |
| } | |
| .deep-purple { | |
| padding: 1em; | |
| background-color: #673AB7; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .deep-purple.l1 { | |
| background-color: #7142c3; | |
| } | |
| .deep-purple.d1 { | |
| background-color: #5e35a8; | |
| } | |
| .deep-purple.l2 { | |
| background-color: #7c52c8; | |
| } | |
| .deep-purple.d2 { | |
| background-color: #563098; | |
| } | |
| .deep-purple.l3 { | |
| background-color: #8861cd; | |
| } | |
| .deep-purple.d3 { | |
| background-color: #4d2b89; | |
| } | |
| .deep-purple.l4 { | |
| background-color: #9471d2; | |
| } | |
| .deep-purple.d4 { | |
| background-color: #442679; | |
| } | |
| .indigo { | |
| padding: 1em; | |
| background-color: #3F51B5; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .indigo.l1 { | |
| background-color: #495bc0; | |
| } | |
| .indigo.d1 { | |
| background-color: #3a4aa6; | |
| } | |
| .indigo.l2 { | |
| background-color: #5869c5; | |
| } | |
| .indigo.d2 { | |
| background-color: #344397; | |
| } | |
| .indigo.l3 { | |
| background-color: #6776ca; | |
| } | |
| .indigo.d3 { | |
| background-color: #2f3d88; | |
| } | |
| .indigo.l4 { | |
| background-color: #7684cf; | |
| } | |
| .indigo.d4 { | |
| background-color: #2a3678; | |
| } | |
| .blue { | |
| padding: 1em; | |
| background-color: #2196F3; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .blue.l1 { | |
| background-color: #349ff4; | |
| } | |
| .blue.d1 { | |
| background-color: #0e8df2; | |
| } | |
| .blue.l2 { | |
| background-color: #48a8f5; | |
| } | |
| .blue.d2 { | |
| background-color: #0c82df; | |
| } | |
| .blue.l3 { | |
| background-color: #5bb1f6; | |
| } | |
| .blue.d3 { | |
| background-color: #0b76cc; | |
| } | |
| .blue.l4 { | |
| background-color: #6ebbf7; | |
| } | |
| .blue.d4 { | |
| background-color: #0a6bb8; | |
| } | |
| .light-blue { | |
| padding: 1em; | |
| background-color: #03A9F4; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .light-blue.l1 { | |
| background-color: #0fb2fc; | |
| } | |
| .light-blue.d1 { | |
| background-color: #039be0; | |
| } | |
| .light-blue.l2 { | |
| background-color: #23b9fc; | |
| } | |
| .light-blue.d2 { | |
| background-color: #038dcc; | |
| } | |
| .light-blue.l3 { | |
| background-color: #38bffd; | |
| } | |
| .light-blue.d3 { | |
| background-color: #027fb8; | |
| } | |
| .light-blue.l4 { | |
| background-color: #4cc6fd; | |
| } | |
| .light-blue.d4 { | |
| background-color: #0271a3; | |
| } | |
| .cyan { | |
| padding: 1em; | |
| background-color: #00BCD4; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .cyan.l1 { | |
| background-color: #00cee8; | |
| } | |
| .cyan.d1 { | |
| background-color: #00aac0; | |
| } | |
| .cyan.l2 { | |
| background-color: #00e0fd; | |
| } | |
| .cyan.d2 { | |
| background-color: #0098ab; | |
| } | |
| .cyan.l3 { | |
| background-color: #12e4ff; | |
| } | |
| .cyan.d3 { | |
| background-color: #008697; | |
| } | |
| .cyan.l4 { | |
| background-color: #27e7ff; | |
| } | |
| .cyan.d4 { | |
| background-color: #007482; | |
| } | |
| .teal { | |
| padding: 1em; | |
| background-color: #009688; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .teal.l1 { | |
| background-color: #00aa9a; | |
| } | |
| .teal.d1 { | |
| background-color: #008276; | |
| } | |
| .teal.l2 { | |
| background-color: #00bfad; | |
| } | |
| .teal.d2 { | |
| background-color: #006d63; | |
| } | |
| .teal.l3 { | |
| background-color: #00d3bf; | |
| } | |
| .teal.d3 { | |
| background-color: #005951; | |
| } | |
| .teal.l4 { | |
| background-color: #00e8d2; | |
| } | |
| .teal.d4 { | |
| background-color: #00443e; | |
| } | |
| .green { | |
| padding: 1em; | |
| background-color: #4CAF50; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .green.l1 { | |
| background-color: #59b75c; | |
| } | |
| .green.d1 { | |
| background-color: #46a149; | |
| } | |
| .green.l2 { | |
| background-color: #67bd6a; | |
| } | |
| .green.d2 { | |
| background-color: #409343; | |
| } | |
| .green.l3 { | |
| background-color: #75c378; | |
| } | |
| .green.d3 { | |
| background-color: #39843c; | |
| } | |
| .green.l4 { | |
| background-color: #83c986; | |
| } | |
| .green.d4 { | |
| background-color: #337636; | |
| } | |
| .light-green { | |
| padding: 1em; | |
| background-color: #8BC34A; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .light-green.l1 { | |
| background-color: #95c859; | |
| } | |
| .light-green.d1 { | |
| background-color: #81bb3e; | |
| } | |
| .light-green.l2 { | |
| background-color: #9fcd69; | |
| } | |
| .light-green.d2 { | |
| background-color: #76ab39; | |
| } | |
| .light-green.l3 { | |
| background-color: #a8d278; | |
| } | |
| .light-green.d3 { | |
| background-color: #6c9c34; | |
| } | |
| .light-green.l4 { | |
| background-color: #b2d787; | |
| } | |
| .light-green.d4 { | |
| background-color: #618d2f; | |
| } | |
| .lime { | |
| padding: 1em; | |
| background-color: #CDDC39; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .lime.l1 { | |
| background-color: #d1df4a; | |
| } | |
| .lime.d1 { | |
| background-color: #c9d928; | |
| } | |
| .lime.l2 { | |
| background-color: #d6e25c; | |
| } | |
| .lime.d2 { | |
| background-color: #bac923; | |
| } | |
| .lime.l3 { | |
| background-color: #dae56d; | |
| } | |
| .lime.d3 { | |
| background-color: #a9b720; | |
| } | |
| .lime.l4 { | |
| background-color: #dfe87e; | |
| } | |
| .lime.d4 { | |
| background-color: #99a61d; | |
| } | |
| .yellow { | |
| padding: 1em; | |
| background-color: #FFEB3B; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .yellow.l1 { | |
| background-color: #ffed4f; | |
| } | |
| .yellow.d1 { | |
| background-color: #ffe927; | |
| } | |
| .yellow.l2 { | |
| background-color: #ffef64; | |
| } | |
| .yellow.d2 { | |
| background-color: #ffe712; | |
| } | |
| .yellow.l3 { | |
| background-color: #fff178; | |
| } | |
| .yellow.d3 { | |
| background-color: #fde300; | |
| } | |
| .yellow.l4 { | |
| background-color: #fff38d; | |
| } | |
| .yellow.d4 { | |
| background-color: #e8d100; | |
| } | |
| .amber { | |
| padding: 1em; | |
| background-color: #FFC107; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .amber.l1 { | |
| background-color: #ffc61b; | |
| } | |
| .amber.d1 { | |
| background-color: #f2b500; | |
| } | |
| .amber.l2 { | |
| background-color: #ffcb30; | |
| } | |
| .amber.d2 { | |
| background-color: #dda600; | |
| } | |
| .amber.l3 { | |
| background-color: #ffd044; | |
| } | |
| .amber.d3 { | |
| background-color: #c99700; | |
| } | |
| .amber.l4 { | |
| background-color: #ffd559; | |
| } | |
| .amber.d4 { | |
| background-color: #b48700; | |
| } | |
| .orange { | |
| padding: 1em; | |
| background-color: #FF9800; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .orange.l1 { | |
| background-color: #ffa014; | |
| } | |
| .orange.d1 { | |
| background-color: #eb8c00; | |
| } | |
| .orange.l2 { | |
| background-color: #ffa829; | |
| } | |
| .orange.d2 { | |
| background-color: #d68000; | |
| } | |
| .orange.l3 { | |
| background-color: #ffb13d; | |
| } | |
| .orange.d3 { | |
| background-color: #c27400; | |
| } | |
| .orange.l4 { | |
| background-color: #ffb952; | |
| } | |
| .orange.d4 { | |
| background-color: #ad6700; | |
| } | |
| .deep-orange { | |
| padding: 1em; | |
| background-color: #FF5722; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .deep-orange.l1 { | |
| background-color: #ff6736; | |
| } | |
| .deep-orange.d1 { | |
| background-color: #ff470e; | |
| } | |
| .deep-orange.l2 { | |
| background-color: #ff764b; | |
| } | |
| .deep-orange.d2 { | |
| background-color: #f83c00; | |
| } | |
| .deep-orange.l3 { | |
| background-color: #ff865f; | |
| } | |
| .deep-orange.d3 { | |
| background-color: #e43700; | |
| } | |
| .deep-orange.l4 { | |
| background-color: #ff9574; | |
| } | |
| .deep-orange.d4 { | |
| background-color: #cf3200; | |
| } | |
| .brown { | |
| padding: 1em; | |
| background-color: #795548; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .brown.l1 { | |
| background-color: #865e50; | |
| } | |
| .brown.d1 { | |
| background-color: #6c4c40; | |
| } | |
| .brown.l2 { | |
| background-color: #936757; | |
| } | |
| .brown.d2 { | |
| background-color: #5f4339; | |
| } | |
| .brown.l3 { | |
| background-color: #9f705f; | |
| } | |
| .brown.d3 { | |
| background-color: #533a31; | |
| } | |
| .brown.l4 { | |
| background-color: #a77b6b; | |
| } | |
| .brown.d4 { | |
| background-color: #46312a; | |
| } | |
| .grey { | |
| padding: 1em; | |
| background-color: #9E9E9E; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .grey.l1 { | |
| background-color: #a8a8a8; | |
| } | |
| .grey.d1 { | |
| background-color: #949494; | |
| } | |
| .grey.l2 { | |
| background-color: #b2b2b2; | |
| } | |
| .grey.d2 { | |
| background-color: #8a8a8a; | |
| } | |
| .grey.l3 { | |
| background-color: #bdbdbd; | |
| } | |
| .grey.d3 { | |
| background-color: #7f7f7f; | |
| } | |
| .grey.l4 { | |
| background-color: #c7c7c7; | |
| } | |
| .grey.d4 { | |
| background-color: #757575; | |
| } | |
| .blue-grey { | |
| padding: 1em; | |
| background-color: #607D8B; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .blue-grey.l1 { | |
| background-color: #688897; | |
| } | |
| .blue-grey.d1 { | |
| background-color: #58727f; | |
| } | |
| .blue-grey.l2 { | |
| background-color: #74919f; | |
| } | |
| .blue-grey.d2 { | |
| background-color: #4f6773; | |
| } | |
| .blue-grey.l3 { | |
| background-color: #819ba8; | |
| } | |
| .blue-grey.d3 { | |
| background-color: #475c67; | |
| } | |
| .blue-grey.l4 { | |
| background-color: #8da4b0; | |
| } | |
| .blue-grey.d4 { | |
| background-color: #3f525b; | |
| } | |
| .black { | |
| padding: 1em; | |
| background-color: #000; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .black.l1 { | |
| background-color: #0a0a0a; | |
| } | |
| .black.d1 { | |
| background-color: black; | |
| } | |
| .black.l2 { | |
| background-color: #141414; | |
| } | |
| .black.d2 { | |
| background-color: black; | |
| } | |
| .black.l3 { | |
| background-color: #1f1f1f; | |
| } | |
| .black.d3 { | |
| background-color: black; | |
| } | |
| .black.l4 { | |
| background-color: #292929; | |
| } | |
| .black.d4 { | |
| background-color: black; | |
| } | |
| .white { | |
| padding: 1em; | |
| background-color: #fff; | |
| color: rgba(0, 0, 0, 0.6); | |
| } | |
| .black { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| .white.l1 { | |
| background-color: white; | |
| } | |
| .white.d1 { | |
| background-color: whitesmoke; | |
| } | |
| .white.l2 { | |
| background-color: white; | |
| } | |
| .white.d2 { | |
| background-color: #ebebeb; | |
| } | |
| .white.l3 { | |
| background-color: white; | |
| } | |
| .white.d3 { | |
| background-color: #e0e0e0; | |
| } | |
| .white.l4 { | |
| background-color: white; | |
| } | |
| .white.d4 { | |
| background-color: #d6d6d6; | |
| } | |
| .colours { | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| .colours .colour { | |
| flex: 0 0 auto; | |
| width: 10%; | |
| text-align: center; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Example</h1> | |
| <div class="colours"><div class="colour"><div class="base l4">base lighter #4</div><div class="base l3">base lighter #3</div><div class="base l2">base lighter #2</div><div class="base l1">base lighter #1</div><div class="base">base</div><div class="base d1">base darker #1</div><div class="base d2">base darker #2</div><div class="base d3">base darker #3</div><div class="base d4">base darker #4</div></div><div class="colour"><div class="mobilleo l4">mobilleo lighter #4</div><div class="mobilleo l3">mobilleo lighter #3</div><div class="mobilleo l2">mobilleo lighter #2</div><div class="mobilleo l1">mobilleo lighter #1</div><div class="mobilleo">mobilleo</div><div class="mobilleo d1">mobilleo darker #1</div><div class="mobilleo d2">mobilleo darker #2</div><div class="mobilleo d3">mobilleo darker #3</div><div class="mobilleo d4">mobilleo darker #4</div></div><div class="colour"><div class="x l4">x lighter #4</div><div class="x l3">x lighter #3</div><div class="x l2">x lighter #2</div><div class="x l1">x lighter #1</div><div class="x">x</div><div class="x d1">x darker #1</div><div class="x d2">x darker #2</div><div class="x d3">x darker #3</div><div class="x d4">x darker #4</div></div><div class="colour"><div class="a l4">a lighter #4</div><div class="a l3">a lighter #3</div><div class="a l2">a lighter #2</div><div class="a l1">a lighter #1</div><div class="a">a</div><div class="a d1">a darker #1</div><div class="a d2">a darker #2</div><div class="a d3">a darker #3</div><div class="a d4">a darker #4</div></div><div class="colour"><div class="b l4">b lighter #4</div><div class="b l3">b lighter #3</div><div class="b l2">b lighter #2</div><div class="b l1">b lighter #1</div><div class="b">b</div><div class="b d1">b darker #1</div><div class="b d2">b darker #2</div><div class="b d3">b darker #3</div><div class="b d4">b darker #4</div></div><div class="colour"><div class="y l4">y lighter #4</div><div class="y l3">y lighter #3</div><div class="y l2">y lighter #2</div><div class="y l1">y lighter #1</div><div class="y">y</div><div class="y d1">y darker #1</div><div class="y d2">y darker #2</div><div class="y d3">y darker #3</div><div class="y d4">y darker #4</div></div><div class="colour"><div class="white l4">white lighter #4</div><div class="white l3">white lighter #3</div><div class="white l2">white lighter #2</div><div class="white l1">white lighter #1</div><div class="white">white</div><div class="white d1">white darker #1</div><div class="white d2">white darker #2</div><div class="white d3">white darker #3</div><div class="white d4">white darker #4</div></div><div class="colour"><div class="black l4">black lighter #4</div><div class="black l3">black lighter #3</div><div class="black l2">black lighter #2</div><div class="black l1">black lighter #1</div><div class="black">black</div><div class="black d1">black darker #1</div><div class="black d2">black darker #2</div><div class="black d3">black darker #3</div><div class="black d4">black darker #4</div></div><div class="colour"><div class="blue-grey l4">blue-grey lighter #4</div><div class="blue-grey l3">blue-grey lighter #3</div><div class="blue-grey l2">blue-grey lighter #2</div><div class="blue-grey l1">blue-grey lighter #1</div><div class="blue-grey">blue-grey</div><div class="blue-grey d1">blue-grey darker #1</div><div class="blue-grey d2">blue-grey darker #2</div><div class="blue-grey d3">blue-grey darker #3</div><div class="blue-grey d4">blue-grey darker #4</div></div><div class="colour"><div class="grey l4">grey lighter #4</div><div class="grey l3">grey lighter #3</div><div class="grey l2">grey lighter #2</div><div class="grey l1">grey lighter #1</div><div class="grey">grey</div><div class="grey d1">grey darker #1</div><div class="grey d2">grey darker #2</div><div class="grey d3">grey darker #3</div><div class="grey d4">grey darker #4</div></div><div class="colour"><div class="brown l4">brown lighter #4</div><div class="brown l3">brown lighter #3</div><div class="brown l2">brown lighter #2</div><div class="brown l1">brown lighter #1</div><div class="brown">brown</div><div class="brown d1">brown darker #1</div><div class="brown d2">brown darker #2</div><div class="brown d3">brown darker #3</div><div class="brown d4">brown darker #4</div></div><div class="colour"><div class="deep-orange l4">deep-orange lighter #4</div><div class="deep-orange l3">deep-orange lighter #3</div><div class="deep-orange l2">deep-orange lighter #2</div><div class="deep-orange l1">deep-orange lighter #1</div><div class="deep-orange">deep-orange</div><div class="deep-orange d1">deep-orange darker #1</div><div class="deep-orange d2">deep-orange darker #2</div><div class="deep-orange d3">deep-orange darker #3</div><div class="deep-orange d4">deep-orange darker #4</div></div><div class="colour"><div class="orange l4">orange lighter #4</div><div class="orange l3">orange lighter #3</div><div class="orange l2">orange lighter #2</div><div class="orange l1">orange lighter #1</div><div class="orange">orange</div><div class="orange d1">orange darker #1</div><div class="orange d2">orange darker #2</div><div class="orange d3">orange darker #3</div><div class="orange d4">orange darker #4</div></div><div class="colour"><div class="amber l4">amber lighter #4</div><div class="amber l3">amber lighter #3</div><div class="amber l2">amber lighter #2</div><div class="amber l1">amber lighter #1</div><div class="amber">amber</div><div class="amber d1">amber darker #1</div><div class="amber d2">amber darker #2</div><div class="amber d3">amber darker #3</div><div class="amber d4">amber darker #4</div></div><div class="colour"><div class="yellow l4">yellow lighter #4</div><div class="yellow l3">yellow lighter #3</div><div class="yellow l2">yellow lighter #2</div><div class="yellow l1">yellow lighter #1</div><div class="yellow">yellow</div><div class="yellow d1">yellow darker #1</div><div class="yellow d2">yellow darker #2</div><div class="yellow d3">yellow darker #3</div><div class="yellow d4">yellow darker #4</div></div><div class="colour"><div class="lime l4">lime lighter #4</div><div class="lime l3">lime lighter #3</div><div class="lime l2">lime lighter #2</div><div class="lime l1">lime lighter #1</div><div class="lime">lime</div><div class="lime d1">lime darker #1</div><div class="lime d2">lime darker #2</div><div class="lime d3">lime darker #3</div><div class="lime d4">lime darker #4</div></div><div class="colour"><div class="light-green l4">light-green lighter #4</div><div class="light-green l3">light-green lighter #3</div><div class="light-green l2">light-green lighter #2</div><div class="light-green l1">light-green lighter #1</div><div class="light-green">light-green</div><div class="light-green d1">light-green darker #1</div><div class="light-green d2">light-green darker #2</div><div class="light-green d3">light-green darker #3</div><div class="light-green d4">light-green darker #4</div></div><div class="colour"><div class="green l4">green lighter #4</div><div class="green l3">green lighter #3</div><div class="green l2">green lighter #2</div><div class="green l1">green lighter #1</div><div class="green">green</div><div class="green d1">green darker #1</div><div class="green d2">green darker #2</div><div class="green d3">green darker #3</div><div class="green d4">green darker #4</div></div><div class="colour"><div class="teal l4">teal lighter #4</div><div class="teal l3">teal lighter #3</div><div class="teal l2">teal lighter #2</div><div class="teal l1">teal lighter #1</div><div class="teal">teal</div><div class="teal d1">teal darker #1</div><div class="teal d2">teal darker #2</div><div class="teal d3">teal darker #3</div><div class="teal d4">teal darker #4</div></div><div class="colour"><div class="cyan l4">cyan lighter #4</div><div class="cyan l3">cyan lighter #3</div><div class="cyan l2">cyan lighter #2</div><div class="cyan l1">cyan lighter #1</div><div class="cyan">cyan</div><div class="cyan d1">cyan darker #1</div><div class="cyan d2">cyan darker #2</div><div class="cyan d3">cyan darker #3</div><div class="cyan d4">cyan darker #4</div></div><div class="colour"><div class="light-blue l4">light-blue lighter #4</div><div class="light-blue l3">light-blue lighter #3</div><div class="light-blue l2">light-blue lighter #2</div><div class="light-blue l1">light-blue lighter #1</div><div class="light-blue">light-blue</div><div class="light-blue d1">light-blue darker #1</div><div class="light-blue d2">light-blue darker #2</div><div class="light-blue d3">light-blue darker #3</div><div class="light-blue d4">light-blue darker #4</div></div><div class="colour"><div class="blue l4">blue lighter #4</div><div class="blue l3">blue lighter #3</div><div class="blue l2">blue lighter #2</div><div class="blue l1">blue lighter #1</div><div class="blue">blue</div><div class="blue d1">blue darker #1</div><div class="blue d2">blue darker #2</div><div class="blue d3">blue darker #3</div><div class="blue d4">blue darker #4</div></div><div class="colour"><div class="indigo l4">indigo lighter #4</div><div class="indigo l3">indigo lighter #3</div><div class="indigo l2">indigo lighter #2</div><div class="indigo l1">indigo lighter #1</div><div class="indigo">indigo</div><div class="indigo d1">indigo darker #1</div><div class="indigo d2">indigo darker #2</div><div class="indigo d3">indigo darker #3</div><div class="indigo d4">indigo darker #4</div></div><div class="colour"><div class="deep-purple l4">deep-purple lighter #4</div><div class="deep-purple l3">deep-purple lighter #3</div><div class="deep-purple l2">deep-purple lighter #2</div><div class="deep-purple l1">deep-purple lighter #1</div><div class="deep-purple">deep-purple</div><div class="deep-purple d1">deep-purple darker #1</div><div class="deep-purple d2">deep-purple darker #2</div><div class="deep-purple d3">deep-purple darker #3</div><div class="deep-purple d4">deep-purple darker #4</div></div><div class="colour"><div class="purple l4">purple lighter #4</div><div class="purple l3">purple lighter #3</div><div class="purple l2">purple lighter #2</div><div class="purple l1">purple lighter #1</div><div class="purple">purple</div><div class="purple d1">purple darker #1</div><div class="purple d2">purple darker #2</div><div class="purple d3">purple darker #3</div><div class="purple d4">purple darker #4</div></div><div class="colour"><div class="pink l4">pink lighter #4</div><div class="pink l3">pink lighter #3</div><div class="pink l2">pink lighter #2</div><div class="pink l1">pink lighter #1</div><div class="pink">pink</div><div class="pink d1">pink darker #1</div><div class="pink d2">pink darker #2</div><div class="pink d3">pink darker #3</div><div class="pink d4">pink darker #4</div></div><div class="colour"><div class="red l4">red lighter #4</div><div class="red l3">red lighter #3</div><div class="red l2">red lighter #2</div><div class="red l1">red lighter #1</div><div class="red">red</div><div class="red d1">red darker #1</div><div class="red d2">red darker #2</div><div class="red d3">red darker #3</div><div class="red d4">red darker #4</div></div><div class="colour"><div class="legend l4">legend lighter #4</div><div class="legend l3">legend lighter #3</div><div class="legend l2">legend lighter #2</div><div class="legend l1">legend lighter #1</div><div class="legend">legend</div><div class="legend d1">legend darker #1</div><div class="legend d2">legend darker #2</div><div class="legend d3">legend darker #3</div><div class="legend d4">legend darker #4</div></div></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment