Last active
July 6, 2018 01:33
-
-
Save derekbtw/0c65dc25b065c014d5c4e88d849d3540 to your computer and use it in GitHub Desktop.
Material color palette variables - Stylus (https://material.io/design/color/the-color-system.html#tools-for-picking-colors)
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
// Red | |
//---------------------------------------- | |
$red-50 = #ffebee | |
$red-100 = #ffcdd2 | |
$red-200 = #ef9a9a | |
$red-300 = #e57373 | |
$red-400 = #ef5350 | |
$red-500 = #f44336 | |
$red-600 = #e53935 | |
$red-700 = #d32f2f | |
$red-800 = #c62828 | |
$red-900 = #b71c1c | |
$red-a100 = #ff8a80 | |
$red-a200 = #ff5252 | |
$red-a400 = #ff1744 | |
$red-a700 = #d50000 | |
$red = $red-500 | |
$red--light = $red-400 | |
$red--lighter = $red-300 | |
$red--lightest = $red-200 | |
$red--dark = $red-600 | |
$red--darker = $red-700 | |
$red--darkest = $red-800 | |
// Pink | |
//---------------------------------------- | |
$pink-50 = #fce4ec | |
$pink-100 = #f8bbd0 | |
$pink-200 = #f48fb1 | |
$pink-300 = #f06292 | |
$pink-400 = #ec407a | |
$pink-500 = #e91e63 | |
$pink-600 = #d81b60 | |
$pink-700 = #c2185b | |
$pink-800 = #ad1457 | |
$pink-900 = #880e4f | |
$pink-a100 = #ff80ab | |
$pink-a200 = #ff4081 | |
$pink-a400 = #f50057 | |
$pink-a700 = #c51162 | |
$pink = $pink-500 | |
$pink--light = $pink-400 | |
$pink--lighter = $pink-300 | |
$pink--lightest = $pink-200 | |
$pink--dark = $pink-600 | |
$pink--darker = $pink-700 | |
$pink--darkest = $pink-800 | |
// Purple | |
//---------------------------------------- | |
$purple-50 = #f3e5f5 | |
$purple-100 = #e1bee7 | |
$purple-200 = #ce93d8 | |
$purple-300 = #ba68c8 | |
$purple-400 = #ab47bc | |
$purple-500 = #9c27b0 | |
$purple-600 = #8e24aa | |
$purple-700 = #7b1fa2 | |
$purple-800 = #6a1b9a | |
$purple-900 = #4a148c | |
$purple-a100 = #ea80fc | |
$purple-a200 = #e040fb | |
$purple-a400 = #d500f9 | |
$purple-a700 = #aa00ff | |
$purple = $purple-500 | |
$purple--light = $purple-400 | |
$purple--lighter = $purple-300 | |
$purple--lightest = $purple-200 | |
$purple--dark = $purple-600 | |
$purple--darker = $purple-700 | |
$purple--darkest = $purple-800 | |
// Deep Purple | |
//---------------------------------------- | |
$deep-purple-50 = #ede7f6 | |
$deep-purple-100 = #d1c4e9 | |
$deep-purple-200 = #b39ddb | |
$deep-purple-300 = #9575cd | |
$deep-purple-400 = #7e57c2 | |
$deep-purple-500 = #673ab7 | |
$deep-purple-600 = #5e35b1 | |
$deep-purple-700 = #512da8 | |
$deep-purple-800 = #4527a0 | |
$deep-purple-900 = #311b92 | |
$deep-purple-a100 = #b388ff | |
$deep-purple-a200 = #7c4dff | |
$deep-purple-a400 = #651fff | |
$deep-purple-a700 = #6200ea | |
$deep-purple = $deep-purple-500 | |
$deep-purple--light = $deep-purple-400 | |
$deep-purple--lighter = $deep-purple-300 | |
$deep-purple--lightest = $deep-purple-200 | |
$deep-purple--dark = $deep-purple-600 | |
$deep-purple--darker = $deep-purple-700 | |
$deep-purple--darkest = $deep-purple-800 | |
// Indigo | |
//---------------------------------------- | |
$indigo-50 = #e8eaf6 | |
$indigo-100 = #c5cae9 | |
$indigo-200 = #9fa8da | |
$indigo-300 = #7986cb | |
$indigo-400 = #5c6bc0 | |
$indigo-500 = #3f51b5 | |
$indigo-600 = #3949ab | |
$indigo-700 = #303f9f | |
$indigo-800 = #283593 | |
$indigo-900 = #1a237e | |
$indigo-a100 = #8c9eff | |
$indigo-a200 = #536dfe | |
$indigo-a400 = #3d5afe | |
$indigo-a700 = #304ffe | |
$indigo = $indigo-500 | |
$indigo--light = $indigo-400 | |
$indigo--lighter = $indigo-300 | |
$indigo--lightest = $indigo-200 | |
$indigo--dark = $indigo-600 | |
$indigo--darker = $indigo-700 | |
$indigo--darkest = $indigo-800 | |
// Blue | |
//---------------------------------------- | |
$blue-50 = #e3f2fd | |
$blue-100 = #bbdefb | |
$blue-200 = #90caf9 | |
$blue-300 = #64b5f6 | |
$blue-400 = #42a5f5 | |
$blue-500 = #2196f3 | |
$blue-600 = #1e88e5 | |
$blue-700 = #1976d2 | |
$blue-800 = #1565c0 | |
$blue-900 = #0d47a1 | |
$blue-a100 = #82b1ff | |
$blue-a200 = #448aff | |
$blue-a400 = #2979ff | |
$blue-a700 = #2962ff | |
$blue = $blue-500 | |
$blue--light = $blue-400 | |
$blue--lighter = $blue-300 | |
$blue--lightest = $blue-200 | |
$blue--dark = $blue-600 | |
$blue--darker = $blue-700 | |
$blue--darkest = $blue-800 | |
// Light Blue | |
//---------------------------------------- | |
$light-blue-50 = #e1f5fe | |
$light-blue-100 = #b3e5fc | |
$light-blue-200 = #81d4fa | |
$light-blue-300 = #4fc3f7 | |
$light-blue-400 = #29b6f6 | |
$light-blue-500 = #03a9f4 | |
$light-blue-600 = #039be5 | |
$light-blue-700 = #0288d1 | |
$light-blue-800 = #0277bd | |
$light-blue-900 = #01579b | |
$light-blue-a100 = #80d8ff | |
$light-blue-a200 = #40c4ff | |
$light-blue-a400 = #00b0ff | |
$light-blue-a700 = #0091ea | |
$light-blue = $light-blue-500 | |
$light-blue--light = $light-blue-400 | |
$light-blue--lighter = $light-blue-300 | |
$light-blue--lightest = $light-blue-200 | |
$light-blue--dark = $light-blue-600 | |
$light-blue--darker = $light-blue-700 | |
$light-blue--darkest = $light-blue-800 | |
// Cyan | |
//---------------------------------------- | |
$cyan-50 = #e0f7fa | |
$cyan-100 = #b2ebf2 | |
$cyan-200 = #80deea | |
$cyan-300 = #4dd0e1 | |
$cyan-400 = #26c6da | |
$cyan-500 = #00bcd4 | |
$cyan-600 = #00acc1 | |
$cyan-700 = #0097a7 | |
$cyan-800 = #00838f | |
$cyan-900 = #006064 | |
$cyan-a100 = #84ffff | |
$cyan-a200 = #18ffff | |
$cyan-a400 = #00e5ff | |
$cyan-a700 = #00b8d4 | |
$cyan = $cyan-500 | |
$cyan--light = $cyan-400 | |
$cyan--lighter = $cyan-300 | |
$cyan--lightest = $cyan-200 | |
$cyan--dark = $cyan-600 | |
$cyan--darker = $cyan-700 | |
$cyan--darkest = $cyan-800 | |
// Teal | |
//---------------------------------------- | |
$teal-50 = #e0f2f1 | |
$teal-100 = #b2dfdb | |
$teal-200 = #80cbc4 | |
$teal-300 = #4db6ac | |
$teal-400 = #26a69a | |
$teal-500 = #009688 | |
$teal-600 = #00897b | |
$teal-700 = #00796b | |
$teal-800 = #00695c | |
$teal-900 = #004d40 | |
$teal-a100 = #a7ffeb | |
$teal-a200 = #64ffda | |
$teal-a400 = #1de9b6 | |
$teal-a700 = #00bfa5 | |
$teal = $teal-500 | |
$teal--light = $teal-400 | |
$teal--lighter = $teal-300 | |
$teal--lightest = $teal-200 | |
$teal--dark = $teal-600 | |
$teal--darker = $teal-700 | |
$teal--darkest = $teal-800 | |
// Green | |
//---------------------------------------- | |
$green-50 = #e8f5e9 | |
$green-100 = #c8e6c9 | |
$green-200 = #a5d6a7 | |
$green-300 = #81c784 | |
$green-400 = #66bb6a | |
$green-500 = #4caf50 | |
$green-600 = #43a047 | |
$green-700 = #388e3c | |
$green-800 = #2e7d32 | |
$green-900 = #1b5e20 | |
$green-a100 = #b9f6ca | |
$green-a200 = #69f0ae | |
$green-a400 = #00e676 | |
$green-a700 = #00c853 | |
$green = $green-500 | |
$green--light = $green-400 | |
$green--lighter = $green-300 | |
$green--lightest = $green-200 | |
$green--dark = $green-600 | |
$green--darker = $green-700 | |
$green--darkest = $green-800 | |
// Light Green | |
//---------------------------------------- | |
$light-green-50 = #f1f8e9 | |
$light-green-100 = #dcedc8 | |
$light-green-200 = #c5e1a5 | |
$light-green-300 = #aed581 | |
$light-green-400 = #9ccc65 | |
$light-green-500 = #8bc34a | |
$light-green-600 = #7cb342 | |
$light-green-700 = #689f38 | |
$light-green-800 = #558b2f | |
$light-green-900 = #33691e | |
$light-green-a100 = #ccff90 | |
$light-green-a200 = #b2ff59 | |
$light-green-a400 = #76ff03 | |
$light-green-a700 = #64dd17 | |
$light-green = $light-green-500 | |
$light-green--light = $light-green-400 | |
$light-green--lighter = $light-green-300 | |
$light-green--lightest = $light-green-200 | |
$light-green--dark = $light-green-600 | |
$light-green--darker = $light-green-700 | |
$light-green--darkest = $light-green-800 | |
// Lime | |
//---------------------------------------- | |
$lime-50 = #f9fbe7 | |
$lime-100 = #f0f4c3 | |
$lime-200 = #e6ee9c | |
$lime-300 = #dce775 | |
$lime-400 = #d4e157 | |
$lime-500 = #cddc39 | |
$lime-600 = #c0ca33 | |
$lime-700 = #afb42b | |
$lime-800 = #9e9d24 | |
$lime-900 = #827717 | |
$lime-a100 = #f4ff81 | |
$lime-a200 = #eeff41 | |
$lime-a400 = #c6ff00 | |
$lime-a700 = #aeea00 | |
$lime = $lime-500 | |
$lime--light = $lime-400 | |
$lime--lighter = $lime-300 | |
$lime--lightest = $lime-200 | |
$lime--dark = $lime-600 | |
$lime--darker = $lime-700 | |
$lime--darkest = $lime-800 | |
// Yellow | |
//---------------------------------------- | |
$yellow-50 = #fffde7 | |
$yellow-100 = #fff9c4 | |
$yellow-200 = #fff59d | |
$yellow-300 = #fff176 | |
$yellow-400 = #ffee58 | |
$yellow-500 = #ffeb3b | |
$yellow-600 = #fdd835 | |
$yellow-700 = #fbc02d | |
$yellow-800 = #f9a825 | |
$yellow-900 = #f57f17 | |
$yellow-a100 = #ffff8d | |
$yellow-a200 = #ffff00 | |
$yellow-a400 = #ffea00 | |
$yellow-a700 = #ffd600 | |
$yellow = $yellow-500 | |
$yellow--light = $yellow-400 | |
$yellow--lighter = $yellow-300 | |
$yellow--lightest = $yellow-200 | |
$yellow--dark = $yellow-600 | |
$yellow--darker = $yellow-700 | |
$yellow--darkest = $yellow-800 | |
// Amber | |
//---------------------------------------- | |
$amber-50 = #fff8e1 | |
$amber-100 = #ffecb3 | |
$amber-200 = #ffe082 | |
$amber-300 = #ffd54f | |
$amber-400 = #ffca28 | |
$amber-500 = #ffc107 | |
$amber-600 = #ffb300 | |
$amber-700 = #ffa000 | |
$amber-800 = #ff8f00 | |
$amber-900 = #ff6f00 | |
$amber-a100 = #ffe57f | |
$amber-a200 = #ffd740 | |
$amber-a400 = #ffc400 | |
$amber-a700 = #ffab00 | |
$amber = $amber-500 | |
$amber--light = $amber-400 | |
$amber--lighter = $amber-300 | |
$amber--lightest = $amber-200 | |
$amber--dark = $amber-600 | |
$amber--darker = $amber-700 | |
$amber--darkest = $amber-800 | |
// Orange | |
//---------------------------------------- | |
$orange-50 = #fff3e0 | |
$orange-100 = #ffe0b2 | |
$orange-200 = #ffcc80 | |
$orange-300 = #ffb74d | |
$orange-400 = #ffa726 | |
$orange-500 = #ff9800 | |
$orange-600 = #fb8c00 | |
$orange-700 = #f57c00 | |
$orange-800 = #ef6c00 | |
$orange-900 = #e65100 | |
$orange-a100 = #ffd180 | |
$orange-a200 = #ffab40 | |
$orange-a400 = #ff9100 | |
$orange-a700 = #ff6d00 | |
$orange = $orange-500 | |
$orange--light = $orange-400 | |
$orange--lighter = $orange-300 | |
$orange--lightest = $orange-200 | |
$orange--dark = $orange-600 | |
$orange--darker = $orange-700 | |
$orange--darkest = $orange-800 | |
// Deep Orange | |
//---------------------------------------- | |
$deep-orange-50 = #fbe9e7 | |
$deep-orange-100 = #ffccbc | |
$deep-orange-200 = #ffab91 | |
$deep-orange-300 = #ff8a65 | |
$deep-orange-400 = #ff7043 | |
$deep-orange-500 = #ff5722 | |
$deep-orange-600 = #f4511e | |
$deep-orange-700 = #e64a19 | |
$deep-orange-800 = #d84315 | |
$deep-orange-900 = #bf360c | |
$deep-orange-a100 = #ff9e80 | |
$deep-orange-a200 = #ff6e40 | |
$deep-orange-a400 = #ff3d00 | |
$deep-orange-a700 = #dd2c00 | |
$deep-orange = $deep-orange-500 | |
$deep-orange--light = $deep-orange-400 | |
$deep-orange--lighter = $deep-orange-300 | |
$deep-orange--lightest = $deep-orange-200 | |
$deep-orange--dark = $deep-orange-600 | |
$deep-orange--darker = $deep-orange-700 | |
$deep-orange--darkest = $deep-orange-800 | |
// Brown | |
//---------------------------------------- | |
$brown-50 = #efebe9 | |
$brown-100 = #d7ccc8 | |
$brown-200 = #bcaaa4 | |
$brown-300 = #a1887f | |
$brown-400 = #8d6e63 | |
$brown-500 = #795548 | |
$brown-600 = #6d4c41 | |
$brown-700 = #5d4037 | |
$brown-800 = #4e342e | |
$brown-900 = #3e2723 | |
$brown = $brown-500 | |
$brown--light = $brown-400 | |
$brown--lighter = $brown-300 | |
$brown--lightest = $brown-200 | |
$brown--dark = $brown-600 | |
$brown--darker = $brown-700 | |
$brown--darkest = $brown-800 | |
// Gray | |
//---------------------------------------- | |
$gray-50 = #fafafa | |
$gray-100 = #f5f5f5 | |
$gray-200 = #eeeeee | |
$gray-300 = #e0e0e0 | |
$gray-400 = #bdbdbd | |
$gray-500 = #9e9e9e | |
$gray-600 = #757575 | |
$gray-700 = #616161 | |
$gray-800 = #424242 | |
$gray-900 = #212121 | |
$gray = $gray-500 | |
$gray--light = $gray-400 | |
$gray--lighter = $gray-300 | |
$gray--lightest = $gray-200 | |
$gray--dark = $gray-600 | |
$gray--darker = $gray-700 | |
$gray--darkest = $gray-800 | |
// Blue Gray | |
//---------------------------------------- | |
$blue-gray-50 = #eceff1 | |
$blue-gray-100 = #cfd8dc | |
$blue-gray-200 = #b0bec5 | |
$blue-gray-300 = #90a4ae | |
$blue-gray-400 = #78909c | |
$blue-gray-500 = #607d8b | |
$blue-gray-600 = #546e7a | |
$blue-gray-700 = #455a64 | |
$blue-gray-800 = #37474f | |
$blue-gray-900 = #263238 | |
$blue-gray = $blue-gray-500 | |
$blue-gray--light = $blue-gray-400 | |
$blue-gray--lighter = $blue-gray-300 | |
$blue-gray--lightest = $blue-gray-200 | |
$blue-gray--dark = $blue-gray-600 | |
$blue-gray--darker = $blue-gray-700 | |
$blue-gray--darkest = $blue-gray-800 | |
// Base Colors | |
//---------------------------------------- | |
$black = #000000 | |
$white = #ffffff |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment