Skip to content

Instantly share code, notes, and snippets.

@trulysinclair
Created August 14, 2017 20:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trulysinclair/5cb447f42f3ecf706efe72a66bc1b904 to your computer and use it in GitHub Desktop.
Save trulysinclair/5cb447f42f3ecf706efe72a66bc1b904 to your computer and use it in GitHub Desktop.
Use any Material Design color with a simple function and maps
$colors: (
red:
(
base: #f44336,
lighten-5: #ffebee,
lighten-4: #ffcdd2,
lighten-3: #ef9a9a,
lighten-2: #e57373,
lighten-1: #ef5350,
darken-1: #e53935,
darken-2: #d32f2f,
darken-3: #c62828,
darken-4: #b71c1c,
accent-1: #ff8a80,
accent-2: #ff5252,
accent-3: #ff1744,
accent-4: #d50000
),
pink:
(
base: #e91e63,
lighten-5: #fce4ec,
lighten-4: #f8bbd0,
lighten-3: #f48fb1,
lighten-2: #f06292,
lighten-1: #ec407a,
darken-1: #d81b60,
darken-2: #c2185b,
darken-3: #ad1457,
darken-4: #880e4f,
accent-1: #ff80ab,
accent-2: #ff4081,
accent-3: #f50057,
accent-4: #c51162
),
purple:
(
base: #9c27b0,
lighten-5: #f3e5f5,
lighten-4: #e1bee7,
lighten-3: #ce93d8,
lighten-2: #ba68c8,
lighten-1: #ab47bc,
darken-1: #8e24aa,
darken-2: #7b1fa2,
darken-3: #6a1b9a,
darken-4: #4a148c,
accent-1: #ea80fc,
accent-2: #e040fb,
accent-3: #d500f9,
accent-4: #aa00ff
),
deep-purple:
(
base: #673ab7,
lighten-5: #ede7f6,
lighten-4: #d1c4e9,
lighten-3: #b39ddb,
lighten-2: #9575cd,
lighten-1: #7e57c2,
darken-1: #5e35b1,
darken-2: #512da8,
darken-3: #4527a0,
darken-4: #311b92,
accent-1: #b388ff,
accent-2: #7c4dff,
accent-3: #651fff,
accent-4: #6200ea
),
indigo:
(
base: #3f51b5,
lighten-5: #e8eaf6,
lighten-4: #c5cae9,
lighten-3: #9fa8da,
lighten-2: #7986cb,
lighten-1: #5c6bc0,
darken-1: #3949ab,
darken-2: #303f9f,
darken-3: #283593,
darken-4: #1a237e,
accent-1: #8c9eff,
accent-2: #536dfe,
accent-3: #3d5afe,
accent-4: #304ffe
),
blue:
(
base: #2196f3,
lighten-5: #e3f2fd,
lighten-4: #bbdefb,
lighten-3: #90caf9,
lighten-2: #64b5f6,
lighten-1: #42a5f5,
darken-1: #1e88e5,
darken-2: #1976d2,
darken-3: #1565c0,
darken-4: #0d47a1,
accent-1: #82b1ff,
accent-2: #448aff,
accent-3: #2979ff,
accent-4: #2962ff
),
light-blue:
(
base: #03a9f4,
lighten-5: #e1f5fe,
lighten-4: #b3e5fc,
lighten-3: #81d4fa,
lighten-2: #4fc3f7,
lighten-1: #29b6f6,
darken-1: #039be5,
darken-2: #0288d1,
darken-3: #0277bd,
darken-4: #01579b,
accent-1: #80d8ff,
accent-2: #40c4ff,
accent-3: #00b0ff,
accent-4: #0091ea
),
cyan:
(
base: #00bcd4,
lighten-5: #e0f7fa,
lighten-4: #b2ebf2,
lighten-3: #80deea,
lighten-2: #4dd0e1,
lighten-1: #26c6da,
darken-1: #00acc1,
darken-2: #0097a7,
darken-3: #00838f,
darken-4: #006064,
accent-1: #84ffff,
accent-2: #18ffff,
accent-3: #00e5ff,
accent-4: #00b8d4
),
teal:
(
base: #009688,
lighten-5: #e0f2f1,
lighten-4: #b2dfdb,
lighten-3: #80cbc4,
lighten-2: #4db6ac,
lighten-1: #26a69a,
darken-1: #00897b,
darken-2: #00796b,
darken-3: #00695c,
darken-4: #004d40,
accent-1: #a7ffeb,
accent-2: #64ffda,
accent-3: #1de9b6,
accent-4: #00bfa5
),
green:
(
base: #4caf50,
lighten-5: #e8f5e9,
lighten-4: #c8e6c9,
lighten-3: #a5d6a7,
lighten-2: #81c784,
lighten-1: #66bb6a,
darken-1: #43a047,
darken-2: #388e3c,
darken-3: #2e7d32,
darken-4: #1b5e20,
accent-1: #b9f6ca,
accent-2: #69f0ae,
accent-3: #00e676,
accent-4: #00c853
),
light-green:
(
base: #8bc34a,
lighten-5: #f1f8e9,
lighten-4: #dcedc8,
lighten-3: #c5e1a5,
lighten-2: #aed581,
lighten-1: #9ccc65,
darken-1: #7cb342,
darken-2: #689f38,
darken-3: #558b2f,
darken-4: #33691e,
accent-1: #ccff90,
accent-2: #b2ff59,
accent-3: #76ff03,
accent-4: #64dd17
),
lime:
(
base: #cddc39,
lighten-5: #f9fbe7,
lighten-4: #f0f4c3,
lighten-3: #e6ee9c,
lighten-2: #dce775,
lighten-1: #d4e157,
darken-1: #c0ca33,
darken-2: #afb42b,
darken-3: #9e9d24,
darken-4: #827717,
accent-1: #f4ff81,
accent-2: #eeff41,
accent-3: #c6ff00,
accent-4: #aeea00
),
yellow:
(
base: #ffeb3b,
lighten-5: #fffde7,
lighten-4: #fff9c4,
lighten-3: #fff59d,
lighten-2: #fff176,
lighten-1: #ffee58,
darken-1: #fdd835,
darken-2: #fbc02d,
darken-3: #f9a825,
darken-4: #f57f17,
accent-1: #ffff8d,
accent-2: #ffff00,
accent-3: #ffea00,
accent-4: #ffd600
),
amber:
(
base: #ffc107,
lighten-5: #fff8e1,
lighten-4: #ffecb3,
lighten-3: #ffe082,
lighten-2: #ffd54f,
lighten-1: #ffca28,
darken-1: #ffb300,
darken-2: #ffa000,
darken-3: #ff8f00,
darken-4: #ff6f00,
accent-1: #ffe57f,
accent-2: #ffd740,
accent-3: #ffc400,
accent-4: #ffab00
),
orange:
(
base: #ff9800,
lighten-5: #fff3e0,
lighten-4: #ffe0b2,
lighten-3: #ffcc80,
lighten-2: #ffb74d,
lighten-1: #ffa726,
darken-1: #fb8c00,
darken-2: #f57c00,
darken-3: #ef6c00,
darken-4: #e65100,
accent-1: #ffd180,
accent-2: #ffab40,
accent-3: #ff9100,
accent-4: #ff6d00
),
deep-orange:
(
base: #ff5722,
lighten-5: #fbe9e7,
lighten-4: #ffccbc,
lighten-3: #ffab91,
lighten-2: #ff8a65,
lighten-1: #ff7043,
darken-1: #f4511e,
darken-2: #e64a19,
darken-3: #d84315,
darken-4: #bf360c,
accent-1: #ff9e80,
accent-2: #ff6e40,
accent-3: #ff3d00,
accent-4: #dd2c00
),
brown:
(
base: #795548,
lighten-5: #efebe9,
lighten-4: #d7ccc8,
lighten-3: #bcaaa4,
lighten-2: #a1887f,
lighten-1: #8d6e63,
darken-1: #6d4c41,
darken-2: #5d4037,
darken-3: #4e342e,
darken-4: #3e2723
),
blue-grey:
(
base: #607d8b,
lighten-5: #eceff1,
lighten-4: #cfd8dc,
lighten-3: #b0bec5,
lighten-2: #90a4ae,
lighten-1: #78909c,
darken-1: #546e7a,
darken-2: #455a64,
darken-3: #37474f,
darken-4: #263238
),
grey:
(
base: #9e9e9e,
lighten-5: #fafafa,
lighten-4: #f5f5f5,
lighten-3: #eeeeee,
lighten-2: #e0e0e0,
lighten-1: #bdbdbd,
darken-1: #757575,
darken-2: #616161,
darken-3: #424242,
darken-4: #212121
),
shades: (black: #000000, white: #ffffff, transparent: transparent)
);
// Uncomment the code below to iterate through all colors
// and export them to a file during compilation
// @each $color_name, $color in $colors {
// @each $color_type, $color_value in $color {
// @if $color_type == "base" {
// .#{$color_name} {
// background-color: $color_value !important;
// }
// .#{$color_name}-text {
// color: $color_value !important;
// }
// } @else if $color_name != "shades" {
// .#{$color_name}.#{$color_type} {
// background-color: $color_value !important;
// }
// .#{$color_name}-text.text-#{$color_type} {
// color: $color_value !important;
// }
// } @else {
// .#{$color_name} {
// background-color: $color_value !important;
// }
// .#{$color_name}-text {
// color: $color_value !important;
// }
// }
// }
// }
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
@function color($color, $variant:null) {
@if map-has-key($colors, $color) {
@if ($variant != null) {
@return map-get(map-get($colors, $color), $variant);
} @else {
@return map-get($colors, $color);
}
}
@warn "Unknown `#{$color}` in $colors.";
@return null;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment