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 hidden or 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