Material Design Colour Palette

Developer
Keith Light
Size
14,903 Kb
Views
16,192
  1. Material Design Colour Palette Previews
  2. Material Design Colour Palette HTML Codes
  3. Material Design Colour Palette CSS Codes

How do I make an material design colour palette?

Thought Id make an extended version of another pen I did, but include the full range of colours from the Google Material Design palette . What is a material design colour palette? How do you make a material design colour palette? This script and codes were developed by Keith Light on 18 November 2022, Friday.

Material Design Colour Palette Previews
IQ Test

Material Design Colour Palette - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Colour Palette</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Red */
/* Pink */
/* Purple */
/* Deep Purple */
/* Idigo */
/* Blue */
/* light Blue */
/* Cyan */
/* Teal */
/* Green */
/* Light Green */
/* Lime */
/* Yellow */
/* Amber */
/* Orange */
/* Deep Orange */
/* Brown */
/* Grey */
/* Blue Grey */
/* Alt Red */
/* Alt Pink */
/* Alt Purple */
/* Alt Deep Purple */
/* Alt Indigo */
/* Alt Blue */
/* Alt Light Blue */
/* Alt Cyan */
/* ALt Teal */
/* Alt Green */
/* Alt Light Green */
/* Alt Lime */
/* Alt Yellow */
/* Alt Amber */
/* Alt Orange */
/* Alt Deep Orange */
div:nth-child(1) { background: #FFEBEE; animation-delay: 0.05s;
}
div:nth-child(1):after { content: "#FFEBEE";
}
div:nth-child(2) { background: #FFCDD2; animation-delay: 0.1s;
}
div:nth-child(2):after { content: "#FFCDD2";
}
div:nth-child(3) { background: #EF9A9A; animation-delay: 0.15s;
}
div:nth-child(3):after { content: "#EF9A9A";
}
div:nth-child(4) { background: #E57373; animation-delay: 0.2s;
}
div:nth-child(4):after { content: "#E57373";
}
div:nth-child(5) { background: #EF5350; animation-delay: 0.25s;
}
div:nth-child(5):after { content: "#EF5350";
}
div:nth-child(6) { background: #F44336; animation-delay: 0.3s;
}
div:nth-child(6):after { content: "#F44336";
}
div:nth-child(7) { background: #E53935; animation-delay: 0.35s;
}
div:nth-child(7):after { content: "#E53935";
}
div:nth-child(8) { background: #D32F2F; animation-delay: 0.4s;
}
div:nth-child(8):after { content: "#D32F2F";
}
div:nth-child(9) { background: #C62828; animation-delay: 0.45s;
}
div:nth-child(9):after { content: "#C62828";
}
div:nth-child(10) { background: #B71C1C; animation-delay: 0.5s;
}
div:nth-child(10):after { content: "#B71C1C";
}
div:nth-child(11) { background: #FCE4EC; animation-delay: 0.55s;
}
div:nth-child(11):after { content: "#FCE4EC";
}
div:nth-child(12) { background: #F8BBD0; animation-delay: 0.6s;
}
div:nth-child(12):after { content: "#F8BBD0";
}
div:nth-child(13) { background: #F48FB1; animation-delay: 0.65s;
}
div:nth-child(13):after { content: "#F48FB1";
}
div:nth-child(14) { background: #F06292; animation-delay: 0.7s;
}
div:nth-child(14):after { content: "#F06292";
}
div:nth-child(15) { background: #EC407A; animation-delay: 0.75s;
}
div:nth-child(15):after { content: "#EC407A";
}
div:nth-child(16) { background: #E91E63; animation-delay: 0.8s;
}
div:nth-child(16):after { content: "#E91E63";
}
div:nth-child(17) { background: #D81B60; animation-delay: 0.85s;
}
div:nth-child(17):after { content: "#D81B60";
}
div:nth-child(18) { background: #C2185B; animation-delay: 0.9s;
}
div:nth-child(18):after { content: "#C2185B";
}
div:nth-child(19) { background: #AD1457; animation-delay: 0.95s;
}
div:nth-child(19):after { content: "#AD1457";
}
div:nth-child(20) { background: #880E4F; animation-delay: 1s;
}
div:nth-child(20):after { content: "#880E4F";
}
div:nth-child(21) { background: #F3E5F5; animation-delay: 1.05s;
}
div:nth-child(21):after { content: "#F3E5F5";
}
div:nth-child(22) { background: #E1BEE7; animation-delay: 1.1s;
}
div:nth-child(22):after { content: "#E1BEE7";
}
div:nth-child(23) { background: #CE93D8; animation-delay: 1.15s;
}
div:nth-child(23):after { content: "#CE93D8";
}
div:nth-child(24) { background: #BA68C8; animation-delay: 1.2s;
}
div:nth-child(24):after { content: "#BA68C8";
}
div:nth-child(25) { background: #AB47BC; animation-delay: 1.25s;
}
div:nth-child(25):after { content: "#AB47BC";
}
div:nth-child(26) { background: #9C27B0; animation-delay: 1.3s;
}
div:nth-child(26):after { content: "#9C27B0";
}
div:nth-child(27) { background: #8E24AA; animation-delay: 1.35s;
}
div:nth-child(27):after { content: "#8E24AA";
}
div:nth-child(28) { background: #7B1FA2; animation-delay: 1.4s;
}
div:nth-child(28):after { content: "#7B1FA2";
}
div:nth-child(29) { background: #6A1B9A; animation-delay: 1.45s;
}
div:nth-child(29):after { content: "#6A1B9A";
}
div:nth-child(30) { background: #4A148C; animation-delay: 1.5s;
}
div:nth-child(30):after { content: "#4A148C";
}
div:nth-child(31) { background: #EDE7F6; animation-delay: 1.55s;
}
div:nth-child(31):after { content: "#EDE7F6";
}
div:nth-child(32) { background: #D1C4E9; animation-delay: 1.6s;
}
div:nth-child(32):after { content: "#D1C4E9";
}
div:nth-child(33) { background: #B39DDB; animation-delay: 1.65s;
}
div:nth-child(33):after { content: "#B39DDB";
}
div:nth-child(34) { background: #9575CD; animation-delay: 1.7s;
}
div:nth-child(34):after { content: "#9575CD";
}
div:nth-child(35) { background: #7E57C2; animation-delay: 1.75s;
}
div:nth-child(35):after { content: "#7E57C2";
}
div:nth-child(36) { background: #673AB7; animation-delay: 1.8s;
}
div:nth-child(36):after { content: "#673AB7";
}
div:nth-child(37) { background: #5E35B1; animation-delay: 1.85s;
}
div:nth-child(37):after { content: "#5E35B1";
}
div:nth-child(38) { background: #512DA8; animation-delay: 1.9s;
}
div:nth-child(38):after { content: "#512DA8";
}
div:nth-child(39) { background: #4527A0; animation-delay: 1.95s;
}
div:nth-child(39):after { content: "#4527A0";
}
div:nth-child(40) { background: #311B92; animation-delay: 2s;
}
div:nth-child(40):after { content: "#311B92";
}
div:nth-child(41) { background: #E8EAF6; animation-delay: 2.05s;
}
div:nth-child(41):after { content: "#E8EAF6";
}
div:nth-child(42) { background: #C5CAE9; animation-delay: 2.1s;
}
div:nth-child(42):after { content: "#C5CAE9";
}
div:nth-child(43) { background: #9FA8DA; animation-delay: 2.15s;
}
div:nth-child(43):after { content: "#9FA8DA";
}
div:nth-child(44) { background: #7986CB; animation-delay: 2.2s;
}
div:nth-child(44):after { content: "#7986CB";
}
div:nth-child(45) { background: #5C6BC0; animation-delay: 2.25s;
}
div:nth-child(45):after { content: "#5C6BC0";
}
div:nth-child(46) { background: #3F51B5; animation-delay: 2.3s;
}
div:nth-child(46):after { content: "#3F51B5";
}
div:nth-child(47) { background: #3949AB; animation-delay: 2.35s;
}
div:nth-child(47):after { content: "#3949AB";
}
div:nth-child(48) { background: #303F9F; animation-delay: 2.4s;
}
div:nth-child(48):after { content: "#303F9F";
}
div:nth-child(49) { background: #283593; animation-delay: 2.45s;
}
div:nth-child(49):after { content: "#283593";
}
div:nth-child(50) { background: #1A237E; animation-delay: 2.5s;
}
div:nth-child(50):after { content: "#1A237E";
}
div:nth-child(51) { background: #E3F2FD; animation-delay: 2.55s;
}
div:nth-child(51):after { content: "#E3F2FD";
}
div:nth-child(52) { background: #BBDEFB; animation-delay: 2.6s;
}
div:nth-child(52):after { content: "#BBDEFB";
}
div:nth-child(53) { background: #90CAF9; animation-delay: 2.65s;
}
div:nth-child(53):after { content: "#90CAF9";
}
div:nth-child(54) { background: #64B5F6; animation-delay: 2.7s;
}
div:nth-child(54):after { content: "#64B5F6";
}
div:nth-child(55) { background: #42A5F5; animation-delay: 2.75s;
}
div:nth-child(55):after { content: "#42A5F5";
}
div:nth-child(56) { background: #2196F3; animation-delay: 2.8s;
}
div:nth-child(56):after { content: "#2196F3";
}
div:nth-child(57) { background: #1E88E5; animation-delay: 2.85s;
}
div:nth-child(57):after { content: "#1E88E5";
}
div:nth-child(58) { background: #1976D2; animation-delay: 2.9s;
}
div:nth-child(58):after { content: "#1976D2";
}
div:nth-child(59) { background: #1565C0; animation-delay: 2.95s;
}
div:nth-child(59):after { content: "#1565C0";
}
div:nth-child(60) { background: #0D47A1; animation-delay: 3s;
}
div:nth-child(60):after { content: "#0D47A1";
}
div:nth-child(61) { background: #E1F5FE; animation-delay: 3.05s;
}
div:nth-child(61):after { content: "#E1F5FE";
}
div:nth-child(62) { background: #B3E5FC; animation-delay: 3.1s;
}
div:nth-child(62):after { content: "#B3E5FC";
}
div:nth-child(63) { background: #81D4FA; animation-delay: 3.15s;
}
div:nth-child(63):after { content: "#81D4FA";
}
div:nth-child(64) { background: #4FC3F7; animation-delay: 3.2s;
}
div:nth-child(64):after { content: "#4FC3F7";
}
div:nth-child(65) { background: #29B6F6; animation-delay: 3.25s;
}
div:nth-child(65):after { content: "#29B6F6";
}
div:nth-child(66) { background: #03A9F4; animation-delay: 3.3s;
}
div:nth-child(66):after { content: "#03A9F4";
}
div:nth-child(67) { background: #039BE5; animation-delay: 3.35s;
}
div:nth-child(67):after { content: "#039BE5";
}
div:nth-child(68) { background: #0288D1; animation-delay: 3.4s;
}
div:nth-child(68):after { content: "#0288D1";
}
div:nth-child(69) { background: #0277BD; animation-delay: 3.45s;
}
div:nth-child(69):after { content: "#0277BD";
}
div:nth-child(70) { background: #01579B; animation-delay: 3.5s;
}
div:nth-child(70):after { content: "#01579B";
}
div:nth-child(71) { background: #E0F7FA; animation-delay: 3.55s;
}
div:nth-child(71):after { content: "#E0F7FA";
}
div:nth-child(72) { background: #B2EBF2; animation-delay: 3.6s;
}
div:nth-child(72):after { content: "#B2EBF2";
}
div:nth-child(73) { background: #80DEEA; animation-delay: 3.65s;
}
div:nth-child(73):after { content: "#80DEEA";
}
div:nth-child(74) { background: #4DD0E1; animation-delay: 3.7s;
}
div:nth-child(74):after { content: "#4DD0E1";
}
div:nth-child(75) { background: #26C6DA; animation-delay: 3.75s;
}
div:nth-child(75):after { content: "#26C6DA";
}
div:nth-child(76) { background: #00BCD4; animation-delay: 3.8s;
}
div:nth-child(76):after { content: "#00BCD4";
}
div:nth-child(77) { background: #00ACC1; animation-delay: 3.85s;
}
div:nth-child(77):after { content: "#00ACC1";
}
div:nth-child(78) { background: #0097A7; animation-delay: 3.9s;
}
div:nth-child(78):after { content: "#0097A7";
}
div:nth-child(79) { background: #00838F; animation-delay: 3.95s;
}
div:nth-child(79):after { content: "#00838F";
}
div:nth-child(80) { background: #006064; animation-delay: 4s;
}
div:nth-child(80):after { content: "#006064";
}
div:nth-child(81) { background: #E0F2F1; animation-delay: 4.05s;
}
div:nth-child(81):after { content: "#E0F2F1";
}
div:nth-child(82) { background: #B2DFDB; animation-delay: 4.1s;
}
div:nth-child(82):after { content: "#B2DFDB";
}
div:nth-child(83) { background: #80CBC4; animation-delay: 4.15s;
}
div:nth-child(83):after { content: "#80CBC4";
}
div:nth-child(84) { background: #4DB6AC; animation-delay: 4.2s;
}
div:nth-child(84):after { content: "#4DB6AC";
}
div:nth-child(85) { background: #26A69A; animation-delay: 4.25s;
}
div:nth-child(85):after { content: "#26A69A";
}
div:nth-child(86) { background: #009688; animation-delay: 4.3s;
}
div:nth-child(86):after { content: "#009688";
}
div:nth-child(87) { background: #00897B; animation-delay: 4.35s;
}
div:nth-child(87):after { content: "#00897B";
}
div:nth-child(88) { background: #00796B; animation-delay: 4.4s;
}
div:nth-child(88):after { content: "#00796B";
}
div:nth-child(89) { background: #00695C; animation-delay: 4.45s;
}
div:nth-child(89):after { content: "#00695C";
}
div:nth-child(90) { background: #004D40; animation-delay: 4.5s;
}
div:nth-child(90):after { content: "#004D40";
}
div:nth-child(91) { background: #E8F5E9; animation-delay: 4.55s;
}
div:nth-child(91):after { content: "#E8F5E9";
}
div:nth-child(92) { background: #C8E6C9; animation-delay: 4.6s;
}
div:nth-child(92):after { content: "#C8E6C9";
}
div:nth-child(93) { background: #A5D6A7; animation-delay: 4.65s;
}
div:nth-child(93):after { content: "#A5D6A7";
}
div:nth-child(94) { background: #81C784; animation-delay: 4.7s;
}
div:nth-child(94):after { content: "#81C784";
}
div:nth-child(95) { background: #66BB6A; animation-delay: 4.75s;
}
div:nth-child(95):after { content: "#66BB6A";
}
div:nth-child(96) { background: #4CAF50; animation-delay: 4.8s;
}
div:nth-child(96):after { content: "#4CAF50";
}
div:nth-child(97) { background: #43A047; animation-delay: 4.85s;
}
div:nth-child(97):after { content: "#43A047";
}
div:nth-child(98) { background: #388E3C; animation-delay: 4.9s;
}
div:nth-child(98):after { content: "#388E3C";
}
div:nth-child(99) { background: #2E7D32; animation-delay: 4.95s;
}
div:nth-child(99):after { content: "#2E7D32";
}
div:nth-child(100) { background: #1B5E20; animation-delay: 5s;
}
div:nth-child(100):after { content: "#1B5E20";
}
div:nth-child(101) { background: #F1F8E9; animation-delay: 5.05s;
}
div:nth-child(101):after { content: "#F1F8E9";
}
div:nth-child(102) { background: #DCEDC8; animation-delay: 5.1s;
}
div:nth-child(102):after { content: "#DCEDC8";
}
div:nth-child(103) { background: #C5E1A5; animation-delay: 5.15s;
}
div:nth-child(103):after { content: "#C5E1A5";
}
div:nth-child(104) { background: #AED581; animation-delay: 5.2s;
}
div:nth-child(104):after { content: "#AED581";
}
div:nth-child(105) { background: #9CCC65; animation-delay: 5.25s;
}
div:nth-child(105):after { content: "#9CCC65";
}
div:nth-child(106) { background: #8BC34A; animation-delay: 5.3s;
}
div:nth-child(106):after { content: "#8BC34A";
}
div:nth-child(107) { background: #7CB342; animation-delay: 5.35s;
}
div:nth-child(107):after { content: "#7CB342";
}
div:nth-child(108) { background: #689F38; animation-delay: 5.4s;
}
div:nth-child(108):after { content: "#689F38";
}
div:nth-child(109) { background: #558B2F; animation-delay: 5.45s;
}
div:nth-child(109):after { content: "#558B2F";
}
div:nth-child(110) { background: #33691E; animation-delay: 5.5s;
}
div:nth-child(110):after { content: "#33691E";
}
div:nth-child(111) { background: #F9FBE7; animation-delay: 5.55s;
}
div:nth-child(111):after { content: "#F9FBE7";
}
div:nth-child(112) { background: #F0F4C3; animation-delay: 5.6s;
}
div:nth-child(112):after { content: "#F0F4C3";
}
div:nth-child(113) { background: #E6EE9C; animation-delay: 5.65s;
}
div:nth-child(113):after { content: "#E6EE9C";
}
div:nth-child(114) { background: #DCE775; animation-delay: 5.7s;
}
div:nth-child(114):after { content: "#DCE775";
}
div:nth-child(115) { background: #D4E157; animation-delay: 5.75s;
}
div:nth-child(115):after { content: "#D4E157";
}
div:nth-child(116) { background: #CDDC39; animation-delay: 5.8s;
}
div:nth-child(116):after { content: "#CDDC39";
}
div:nth-child(117) { background: #C0CA33; animation-delay: 5.85s;
}
div:nth-child(117):after { content: "#C0CA33";
}
div:nth-child(118) { background: #AFB42B; animation-delay: 5.9s;
}
div:nth-child(118):after { content: "#AFB42B";
}
div:nth-child(119) { background: #9E9D24; animation-delay: 5.95s;
}
div:nth-child(119):after { content: "#9E9D24";
}
div:nth-child(120) { background: #827717; animation-delay: 6s;
}
div:nth-child(120):after { content: "#827717";
}
div:nth-child(121) { background: #FFFDE7; animation-delay: 6.05s;
}
div:nth-child(121):after { content: "#FFFDE7";
}
div:nth-child(122) { background: #FFF9C4; animation-delay: 6.1s;
}
div:nth-child(122):after { content: "#FFF9C4";
}
div:nth-child(123) { background: #FFF59D; animation-delay: 6.15s;
}
div:nth-child(123):after { content: "#FFF59D";
}
div:nth-child(124) { background: #FFF176; animation-delay: 6.2s;
}
div:nth-child(124):after { content: "#FFF176";
}
div:nth-child(125) { background: #FFEE58; animation-delay: 6.25s;
}
div:nth-child(125):after { content: "#FFEE58";
}
div:nth-child(126) { background: #FFEB3B; animation-delay: 6.3s;
}
div:nth-child(126):after { content: "#FFEB3B";
}
div:nth-child(127) { background: #FDD835; animation-delay: 6.35s;
}
div:nth-child(127):after { content: "#FDD835";
}
div:nth-child(128) { background: #FBC02D; animation-delay: 6.4s;
}
div:nth-child(128):after { content: "#FBC02D";
}
div:nth-child(129) { background: #F9A825; animation-delay: 6.45s;
}
div:nth-child(129):after { content: "#F9A825";
}
div:nth-child(130) { background: #F57F17; animation-delay: 6.5s;
}
div:nth-child(130):after { content: "#F57F17";
}
div:nth-child(131) { background: #FFF8E1; animation-delay: 6.55s;
}
div:nth-child(131):after { content: "#FFF8E1";
}
div:nth-child(132) { background: #FFECB3; animation-delay: 6.6s;
}
div:nth-child(132):after { content: "#FFECB3";
}
div:nth-child(133) { background: #FFE082; animation-delay: 6.65s;
}
div:nth-child(133):after { content: "#FFE082";
}
div:nth-child(134) { background: #FFD54F; animation-delay: 6.7s;
}
div:nth-child(134):after { content: "#FFD54F";
}
div:nth-child(135) { background: #FFCA28; animation-delay: 6.75s;
}
div:nth-child(135):after { content: "#FFCA28";
}
div:nth-child(136) { background: #FFC107; animation-delay: 6.8s;
}
div:nth-child(136):after { content: "#FFC107";
}
div:nth-child(137) { background: #FFB300; animation-delay: 6.85s;
}
div:nth-child(137):after { content: "#FFB300";
}
div:nth-child(138) { background: #FFA000; animation-delay: 6.9s;
}
div:nth-child(138):after { content: "#FFA000";
}
div:nth-child(139) { background: #FF8F00; animation-delay: 6.95s;
}
div:nth-child(139):after { content: "#FF8F00";
}
div:nth-child(140) { background: #FF6F00; animation-delay: 7s;
}
div:nth-child(140):after { content: "#FF6F00";
}
div:nth-child(141) { background: #FFF3E0; animation-delay: 7.05s;
}
div:nth-child(141):after { content: "#FFF3E0";
}
div:nth-child(142) { background: #FFE0B2; animation-delay: 7.1s;
}
div:nth-child(142):after { content: "#FFE0B2";
}
div:nth-child(143) { background: #FFCC80; animation-delay: 7.15s;
}
div:nth-child(143):after { content: "#FFCC80";
}
div:nth-child(144) { background: #FFB74D; animation-delay: 7.2s;
}
div:nth-child(144):after { content: "#FFB74D";
}
div:nth-child(145) { background: #FFA726; animation-delay: 7.25s;
}
div:nth-child(145):after { content: "#FFA726";
}
div:nth-child(146) { background: #FF9800; animation-delay: 7.3s;
}
div:nth-child(146):after { content: "#FF9800";
}
div:nth-child(147) { background: #FB8C00; animation-delay: 7.35s;
}
div:nth-child(147):after { content: "#FB8C00";
}
div:nth-child(148) { background: #F57C00; animation-delay: 7.4s;
}
div:nth-child(148):after { content: "#F57C00";
}
div:nth-child(149) { background: #EF6C00; animation-delay: 7.45s;
}
div:nth-child(149):after { content: "#EF6C00";
}
div:nth-child(150) { background: #E65100; animation-delay: 7.5s;
}
div:nth-child(150):after { content: "#E65100";
}
div:nth-child(151) { background: #FBE9E7; animation-delay: 7.55s;
}
div:nth-child(151):after { content: "#FBE9E7";
}
div:nth-child(152) { background: #FFCCBC; animation-delay: 7.6s;
}
div:nth-child(152):after { content: "#FFCCBC";
}
div:nth-child(153) { background: #FFAB91; animation-delay: 7.65s;
}
div:nth-child(153):after { content: "#FFAB91";
}
div:nth-child(154) { background: #FF8A65; animation-delay: 7.7s;
}
div:nth-child(154):after { content: "#FF8A65";
}
div:nth-child(155) { background: #FF7043; animation-delay: 7.75s;
}
div:nth-child(155):after { content: "#FF7043";
}
div:nth-child(156) { background: #FF5722; animation-delay: 7.8s;
}
div:nth-child(156):after { content: "#FF5722";
}
div:nth-child(157) { background: #F4511E; animation-delay: 7.85s;
}
div:nth-child(157):after { content: "#F4511E";
}
div:nth-child(158) { background: #E64A19; animation-delay: 7.9s;
}
div:nth-child(158):after { content: "#E64A19";
}
div:nth-child(159) { background: #D84315; animation-delay: 7.95s;
}
div:nth-child(159):after { content: "#D84315";
}
div:nth-child(160) { background: #BF360C; animation-delay: 8s;
}
div:nth-child(160):after { content: "#BF360C";
}
div:nth-child(161) { background: #EFEBE9; animation-delay: 8.05s;
}
div:nth-child(161):after { content: "#EFEBE9";
}
div:nth-child(162) { background: #D7CCC8; animation-delay: 8.1s;
}
div:nth-child(162):after { content: "#D7CCC8";
}
div:nth-child(163) { background: #BCAAA4; animation-delay: 8.15s;
}
div:nth-child(163):after { content: "#BCAAA4";
}
div:nth-child(164) { background: #A1887F; animation-delay: 8.2s;
}
div:nth-child(164):after { content: "#A1887F";
}
div:nth-child(165) { background: #8D6E63; animation-delay: 8.25s;
}
div:nth-child(165):after { content: "#8D6E63";
}
div:nth-child(166) { background: #795548; animation-delay: 8.3s;
}
div:nth-child(166):after { content: "#795548";
}
div:nth-child(167) { background: #6D4C41; animation-delay: 8.35s;
}
div:nth-child(167):after { content: "#6D4C41";
}
div:nth-child(168) { background: #5D4037; animation-delay: 8.4s;
}
div:nth-child(168):after { content: "#5D4037";
}
div:nth-child(169) { background: #4E342E; animation-delay: 8.45s;
}
div:nth-child(169):after { content: "#4E342E";
}
div:nth-child(170) { background: #3E2723; animation-delay: 8.5s;
}
div:nth-child(170):after { content: "#3E2723";
}
div:nth-child(171) { background: #FAFAFA; animation-delay: 8.55s;
}
div:nth-child(171):after { content: "#FAFAFA";
}
div:nth-child(172) { background: #F5F5F5; animation-delay: 8.6s;
}
div:nth-child(172):after { content: "#F5F5F5";
}
div:nth-child(173) { background: #EEEEEE; animation-delay: 8.65s;
}
div:nth-child(173):after { content: "#EEEEEE";
}
div:nth-child(174) { background: #E0E0E0; animation-delay: 8.7s;
}
div:nth-child(174):after { content: "#E0E0E0";
}
div:nth-child(175) { background: #BDBDBD; animation-delay: 8.75s;
}
div:nth-child(175):after { content: "#BDBDBD";
}
div:nth-child(176) { background: #9E9E9E; animation-delay: 8.8s;
}
div:nth-child(176):after { content: "#9E9E9E";
}
div:nth-child(177) { background: #757575; animation-delay: 8.85s;
}
div:nth-child(177):after { content: "#757575";
}
div:nth-child(178) { background: #616161; animation-delay: 8.9s;
}
div:nth-child(178):after { content: "#616161";
}
div:nth-child(179) { background: #424242; animation-delay: 8.95s;
}
div:nth-child(179):after { content: "#424242";
}
div:nth-child(180) { background: #212121; animation-delay: 9s;
}
div:nth-child(180):after { content: "#212121";
}
div:nth-child(181) { background: #ECEFF1; animation-delay: 9.05s;
}
div:nth-child(181):after { content: "#ECEFF1";
}
div:nth-child(182) { background: #CFD8DC; animation-delay: 9.1s;
}
div:nth-child(182):after { content: "#CFD8DC";
}
div:nth-child(183) { background: #B0BEC5; animation-delay: 9.15s;
}
div:nth-child(183):after { content: "#B0BEC5";
}
div:nth-child(184) { background: #90A4AE; animation-delay: 9.2s;
}
div:nth-child(184):after { content: "#90A4AE";
}
div:nth-child(185) { background: #78909C; animation-delay: 9.25s;
}
div:nth-child(185):after { content: "#78909C";
}
div:nth-child(186) { background: #607D8B; animation-delay: 9.3s;
}
div:nth-child(186):after { content: "#607D8B";
}
div:nth-child(187) { background: #546E7A; animation-delay: 9.35s;
}
div:nth-child(187):after { content: "#546E7A";
}
div:nth-child(188) { background: #455A64; animation-delay: 9.4s;
}
div:nth-child(188):after { content: "#455A64";
}
div:nth-child(189) { background: #37474F; animation-delay: 9.45s;
}
div:nth-child(189):after { content: "#37474F";
}
div:nth-child(190) { background: #263238; animation-delay: 9.5s;
}
div:nth-child(190):after { content: "#263238";
}
div:nth-child(191) { background: #FF8A80; animation-delay: 9.55s;
}
div:nth-child(191):after { content: "#FF8A80";
}
div:nth-child(192) { background: #FF5252; animation-delay: 9.6s;
}
div:nth-child(192):after { content: "#FF5252";
}
div:nth-child(193) { background: #FF1744; animation-delay: 9.65s;
}
div:nth-child(193):after { content: "#FF1744";
}
div:nth-child(194) { background: #D50000; animation-delay: 9.7s;
}
div:nth-child(194):after { content: "#D50000";
}
div:nth-child(195) { background: #FF80AB; animation-delay: 9.75s;
}
div:nth-child(195):after { content: "#FF80AB";
}
div:nth-child(196) { background: #FF4081; animation-delay: 9.8s;
}
div:nth-child(196):after { content: "#FF4081";
}
div:nth-child(197) { background: #F50057; animation-delay: 9.85s;
}
div:nth-child(197):after { content: "#F50057";
}
div:nth-child(198) { background: #C51162; animation-delay: 9.9s;
}
div:nth-child(198):after { content: "#C51162";
}
div:nth-child(199) { background: #EA80FC; animation-delay: 9.95s;
}
div:nth-child(199):after { content: "#EA80FC";
}
div:nth-child(200) { background: #E040FB; animation-delay: 10s;
}
div:nth-child(200):after { content: "#E040FB";
}
div:nth-child(201) { background: #D500F9; animation-delay: 10.05s;
}
div:nth-child(201):after { content: "#D500F9";
}
div:nth-child(202) { background: #AA00FF; animation-delay: 10.1s;
}
div:nth-child(202):after { content: "#AA00FF";
}
div:nth-child(203) { background: #B388FF; animation-delay: 10.15s;
}
div:nth-child(203):after { content: "#B388FF";
}
div:nth-child(204) { background: #7C4DFF; animation-delay: 10.2s;
}
div:nth-child(204):after { content: "#7C4DFF";
}
div:nth-child(205) { background: #651FFF; animation-delay: 10.25s;
}
div:nth-child(205):after { content: "#651FFF";
}
div:nth-child(206) { background: #6200EA; animation-delay: 10.3s;
}
div:nth-child(206):after { content: "#6200EA";
}
div:nth-child(207) { background: #8C9EFF; animation-delay: 10.35s;
}
div:nth-child(207):after { content: "#8C9EFF";
}
div:nth-child(208) { background: #536DFE; animation-delay: 10.4s;
}
div:nth-child(208):after { content: "#536DFE";
}
div:nth-child(209) { background: #3D5AFE; animation-delay: 10.45s;
}
div:nth-child(209):after { content: "#3D5AFE";
}
div:nth-child(210) { background: #304FFE; animation-delay: 10.5s;
}
div:nth-child(210):after { content: "#304FFE";
}
div:nth-child(211) { background: #82B1FF; animation-delay: 10.55s;
}
div:nth-child(211):after { content: "#82B1FF";
}
div:nth-child(212) { background: #448AFF; animation-delay: 10.6s;
}
div:nth-child(212):after { content: "#448AFF";
}
div:nth-child(213) { background: #2979FF; animation-delay: 10.65s;
}
div:nth-child(213):after { content: "#2979FF";
}
div:nth-child(214) { background: #2962FF; animation-delay: 10.7s;
}
div:nth-child(214):after { content: "#2962FF";
}
div:nth-child(215) { background: #80D8FF; animation-delay: 10.75s;
}
div:nth-child(215):after { content: "#80D8FF";
}
div:nth-child(216) { background: #40C4FF; animation-delay: 10.8s;
}
div:nth-child(216):after { content: "#40C4FF";
}
div:nth-child(217) { background: #00B0FF; animation-delay: 10.85s;
}
div:nth-child(217):after { content: "#00B0FF";
}
div:nth-child(218) { background: #0091EA; animation-delay: 10.9s;
}
div:nth-child(218):after { content: "#0091EA";
}
div:nth-child(219) { background: #84FFFF; animation-delay: 10.95s;
}
div:nth-child(219):after { content: "#84FFFF";
}
div:nth-child(220) { background: #18FFFF; animation-delay: 11s;
}
div:nth-child(220):after { content: "#18FFFF";
}
div:nth-child(221) { background: #00E5FF; animation-delay: 11.05s;
}
div:nth-child(221):after { content: "#00E5FF";
}
div:nth-child(222) { background: #00B8D4; animation-delay: 11.1s;
}
div:nth-child(222):after { content: "#00B8D4";
}
div:nth-child(223) { background: #A7FFEB; animation-delay: 11.15s;
}
div:nth-child(223):after { content: "#A7FFEB";
}
div:nth-child(224) { background: #64FFDA; animation-delay: 11.2s;
}
div:nth-child(224):after { content: "#64FFDA";
}
div:nth-child(225) { background: #1DE9B6; animation-delay: 11.25s;
}
div:nth-child(225):after { content: "#1DE9B6";
}
div:nth-child(226) { background: #00BFA5; animation-delay: 11.3s;
}
div:nth-child(226):after { content: "#00BFA5";
}
div:nth-child(227) { background: #B9F6CA; animation-delay: 11.35s;
}
div:nth-child(227):after { content: "#B9F6CA";
}
div:nth-child(228) { background: #69F0AE; animation-delay: 11.4s;
}
div:nth-child(228):after { content: "#69F0AE";
}
div:nth-child(229) { background: #00E676; animation-delay: 11.45s;
}
div:nth-child(229):after { content: "#00E676";
}
div:nth-child(230) { background: #00C853; animation-delay: 11.5s;
}
div:nth-child(230):after { content: "#00C853";
}
div:nth-child(231) { background: #CCFF90; animation-delay: 11.55s;
}
div:nth-child(231):after { content: "#CCFF90";
}
div:nth-child(232) { background: #B2FF59; animation-delay: 11.6s;
}
div:nth-child(232):after { content: "#B2FF59";
}
div:nth-child(233) { background: #76FF03; animation-delay: 11.65s;
}
div:nth-child(233):after { content: "#76FF03";
}
div:nth-child(234) { background: #64DD17; animation-delay: 11.7s;
}
div:nth-child(234):after { content: "#64DD17";
}
div:nth-child(235) { background: #F4FF81; animation-delay: 11.75s;
}
div:nth-child(235):after { content: "#F4FF81";
}
div:nth-child(236) { background: #EEFF41; animation-delay: 11.8s;
}
div:nth-child(236):after { content: "#EEFF41";
}
div:nth-child(237) { background: #C6FF00; animation-delay: 11.85s;
}
div:nth-child(237):after { content: "#C6FF00";
}
div:nth-child(238) { background: #AEEA00; animation-delay: 11.9s;
}
div:nth-child(238):after { content: "#AEEA00";
}
div:nth-child(239) { background: #FFFF8D; animation-delay: 11.95s;
}
div:nth-child(239):after { content: "#FFFF8D";
}
div:nth-child(240) { background: #FFFF00; animation-delay: 12s;
}
div:nth-child(240):after { content: "#FFFF00";
}
div:nth-child(241) { background: #FFEA00; animation-delay: 12.05s;
}
div:nth-child(241):after { content: "#FFEA00";
}
div:nth-child(242) { background: #FFD600; animation-delay: 12.1s;
}
div:nth-child(242):after { content: "#FFD600";
}
div:nth-child(243) { background: #FFE57F; animation-delay: 12.15s;
}
div:nth-child(243):after { content: "#FFE57F";
}
div:nth-child(244) { background: #FFD740; animation-delay: 12.2s;
}
div:nth-child(244):after { content: "#FFD740";
}
div:nth-child(245) { background: #FFC400; animation-delay: 12.25s;
}
div:nth-child(245):after { content: "#FFC400";
}
div:nth-child(246) { background: #FFAB00; animation-delay: 12.3s;
}
div:nth-child(246):after { content: "#FFAB00";
}
div:nth-child(247) { background: #FFD180; animation-delay: 12.35s;
}
div:nth-child(247):after { content: "#FFD180";
}
div:nth-child(248) { background: #FFAB40; animation-delay: 12.4s;
}
div:nth-child(248):after { content: "#FFAB40";
}
div:nth-child(249) { background: #FF9100; animation-delay: 12.45s;
}
div:nth-child(249):after { content: "#FF9100";
}
div:nth-child(250) { background: #FF6D00; animation-delay: 12.5s;
}
div:nth-child(250):after { content: "#FF6D00";
}
div:nth-child(251) { background: #FF9E80; animation-delay: 12.55s;
}
div:nth-child(251):after { content: "#FF9E80";
}
div:nth-child(252) { background: #FF6E40; animation-delay: 12.6s;
}
div:nth-child(252):after { content: "#FF6E40";
}
div:nth-child(253) { background: #FF3D00; animation-delay: 12.65s;
}
div:nth-child(253):after { content: "#FF3D00";
}
div:nth-child(254) { background: #DD2C00; animation-delay: 12.7s;
}
div:nth-child(254):after { content: "#DD2C00";
}
/* Main Styles */
* { box-sizing: border-box;
}
html { font-size: 16px;
}
body { font-family: 'Lato'; color: #fff; line-height: 1.6; font-size: 1rem;
}
div { width: 10%; height: 100px; float: left; text-align: center; position: relative; transform: scale(0); opacity: 0; animation: 1s load forwards;
}
div:hover:after { opacity: 1;
}
div:after { background: #2e2e2e; opacity: 0.5; padding: 20px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s;
}
.alt { width: 12.5%;
}
/* Keyframes */
@keyframes load { 100% { transform: scale(1); opacity: 1; }
}
/* Media Queries */
@media (max-width: 1220px) { div { width: 20%; } .alt { width: 25%; }
}
@media (max-width: 620px) { div, .alt { width: 50%; }
}
@media (max-width: 320px) { div, .alt { width: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
<div class='alt'></div>
</body>
</html>

Material Design Colour Palette - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
/* Red */
/* Pink */
/* Purple */
/* Deep Purple */
/* Idigo */
/* Blue */
/* light Blue */
/* Cyan */
/* Teal */
/* Green */
/* Light Green */
/* Lime */
/* Yellow */
/* Amber */
/* Orange */
/* Deep Orange */
/* Brown */
/* Grey */
/* Blue Grey */
/* Alt Red */
/* Alt Pink */
/* Alt Purple */
/* Alt Deep Purple */
/* Alt Indigo */
/* Alt Blue */
/* Alt Light Blue */
/* Alt Cyan */
/* ALt Teal */
/* Alt Green */
/* Alt Light Green */
/* Alt Lime */
/* Alt Yellow */
/* Alt Amber */
/* Alt Orange */
/* Alt Deep Orange */
div:nth-child(1) { background: #FFEBEE; animation-delay: 0.05s;
}
div:nth-child(1):after { content: "#FFEBEE";
}
div:nth-child(2) { background: #FFCDD2; animation-delay: 0.1s;
}
div:nth-child(2):after { content: "#FFCDD2";
}
div:nth-child(3) { background: #EF9A9A; animation-delay: 0.15s;
}
div:nth-child(3):after { content: "#EF9A9A";
}
div:nth-child(4) { background: #E57373; animation-delay: 0.2s;
}
div:nth-child(4):after { content: "#E57373";
}
div:nth-child(5) { background: #EF5350; animation-delay: 0.25s;
}
div:nth-child(5):after { content: "#EF5350";
}
div:nth-child(6) { background: #F44336; animation-delay: 0.3s;
}
div:nth-child(6):after { content: "#F44336";
}
div:nth-child(7) { background: #E53935; animation-delay: 0.35s;
}
div:nth-child(7):after { content: "#E53935";
}
div:nth-child(8) { background: #D32F2F; animation-delay: 0.4s;
}
div:nth-child(8):after { content: "#D32F2F";
}
div:nth-child(9) { background: #C62828; animation-delay: 0.45s;
}
div:nth-child(9):after { content: "#C62828";
}
div:nth-child(10) { background: #B71C1C; animation-delay: 0.5s;
}
div:nth-child(10):after { content: "#B71C1C";
}
div:nth-child(11) { background: #FCE4EC; animation-delay: 0.55s;
}
div:nth-child(11):after { content: "#FCE4EC";
}
div:nth-child(12) { background: #F8BBD0; animation-delay: 0.6s;
}
div:nth-child(12):after { content: "#F8BBD0";
}
div:nth-child(13) { background: #F48FB1; animation-delay: 0.65s;
}
div:nth-child(13):after { content: "#F48FB1";
}
div:nth-child(14) { background: #F06292; animation-delay: 0.7s;
}
div:nth-child(14):after { content: "#F06292";
}
div:nth-child(15) { background: #EC407A; animation-delay: 0.75s;
}
div:nth-child(15):after { content: "#EC407A";
}
div:nth-child(16) { background: #E91E63; animation-delay: 0.8s;
}
div:nth-child(16):after { content: "#E91E63";
}
div:nth-child(17) { background: #D81B60; animation-delay: 0.85s;
}
div:nth-child(17):after { content: "#D81B60";
}
div:nth-child(18) { background: #C2185B; animation-delay: 0.9s;
}
div:nth-child(18):after { content: "#C2185B";
}
div:nth-child(19) { background: #AD1457; animation-delay: 0.95s;
}
div:nth-child(19):after { content: "#AD1457";
}
div:nth-child(20) { background: #880E4F; animation-delay: 1s;
}
div:nth-child(20):after { content: "#880E4F";
}
div:nth-child(21) { background: #F3E5F5; animation-delay: 1.05s;
}
div:nth-child(21):after { content: "#F3E5F5";
}
div:nth-child(22) { background: #E1BEE7; animation-delay: 1.1s;
}
div:nth-child(22):after { content: "#E1BEE7";
}
div:nth-child(23) { background: #CE93D8; animation-delay: 1.15s;
}
div:nth-child(23):after { content: "#CE93D8";
}
div:nth-child(24) { background: #BA68C8; animation-delay: 1.2s;
}
div:nth-child(24):after { content: "#BA68C8";
}
div:nth-child(25) { background: #AB47BC; animation-delay: 1.25s;
}
div:nth-child(25):after { content: "#AB47BC";
}
div:nth-child(26) { background: #9C27B0; animation-delay: 1.3s;
}
div:nth-child(26):after { content: "#9C27B0";
}
div:nth-child(27) { background: #8E24AA; animation-delay: 1.35s;
}
div:nth-child(27):after { content: "#8E24AA";
}
div:nth-child(28) { background: #7B1FA2; animation-delay: 1.4s;
}
div:nth-child(28):after { content: "#7B1FA2";
}
div:nth-child(29) { background: #6A1B9A; animation-delay: 1.45s;
}
div:nth-child(29):after { content: "#6A1B9A";
}
div:nth-child(30) { background: #4A148C; animation-delay: 1.5s;
}
div:nth-child(30):after { content: "#4A148C";
}
div:nth-child(31) { background: #EDE7F6; animation-delay: 1.55s;
}
div:nth-child(31):after { content: "#EDE7F6";
}
div:nth-child(32) { background: #D1C4E9; animation-delay: 1.6s;
}
div:nth-child(32):after { content: "#D1C4E9";
}
div:nth-child(33) { background: #B39DDB; animation-delay: 1.65s;
}
div:nth-child(33):after { content: "#B39DDB";
}
div:nth-child(34) { background: #9575CD; animation-delay: 1.7s;
}
div:nth-child(34):after { content: "#9575CD";
}
div:nth-child(35) { background: #7E57C2; animation-delay: 1.75s;
}
div:nth-child(35):after { content: "#7E57C2";
}
div:nth-child(36) { background: #673AB7; animation-delay: 1.8s;
}
div:nth-child(36):after { content: "#673AB7";
}
div:nth-child(37) { background: #5E35B1; animation-delay: 1.85s;
}
div:nth-child(37):after { content: "#5E35B1";
}
div:nth-child(38) { background: #512DA8; animation-delay: 1.9s;
}
div:nth-child(38):after { content: "#512DA8";
}
div:nth-child(39) { background: #4527A0; animation-delay: 1.95s;
}
div:nth-child(39):after { content: "#4527A0";
}
div:nth-child(40) { background: #311B92; animation-delay: 2s;
}
div:nth-child(40):after { content: "#311B92";
}
div:nth-child(41) { background: #E8EAF6; animation-delay: 2.05s;
}
div:nth-child(41):after { content: "#E8EAF6";
}
div:nth-child(42) { background: #C5CAE9; animation-delay: 2.1s;
}
div:nth-child(42):after { content: "#C5CAE9";
}
div:nth-child(43) { background: #9FA8DA; animation-delay: 2.15s;
}
div:nth-child(43):after { content: "#9FA8DA";
}
div:nth-child(44) { background: #7986CB; animation-delay: 2.2s;
}
div:nth-child(44):after { content: "#7986CB";
}
div:nth-child(45) { background: #5C6BC0; animation-delay: 2.25s;
}
div:nth-child(45):after { content: "#5C6BC0";
}
div:nth-child(46) { background: #3F51B5; animation-delay: 2.3s;
}
div:nth-child(46):after { content: "#3F51B5";
}
div:nth-child(47) { background: #3949AB; animation-delay: 2.35s;
}
div:nth-child(47):after { content: "#3949AB";
}
div:nth-child(48) { background: #303F9F; animation-delay: 2.4s;
}
div:nth-child(48):after { content: "#303F9F";
}
div:nth-child(49) { background: #283593; animation-delay: 2.45s;
}
div:nth-child(49):after { content: "#283593";
}
div:nth-child(50) { background: #1A237E; animation-delay: 2.5s;
}
div:nth-child(50):after { content: "#1A237E";
}
div:nth-child(51) { background: #E3F2FD; animation-delay: 2.55s;
}
div:nth-child(51):after { content: "#E3F2FD";
}
div:nth-child(52) { background: #BBDEFB; animation-delay: 2.6s;
}
div:nth-child(52):after { content: "#BBDEFB";
}
div:nth-child(53) { background: #90CAF9; animation-delay: 2.65s;
}
div:nth-child(53):after { content: "#90CAF9";
}
div:nth-child(54) { background: #64B5F6; animation-delay: 2.7s;
}
div:nth-child(54):after { content: "#64B5F6";
}
div:nth-child(55) { background: #42A5F5; animation-delay: 2.75s;
}
div:nth-child(55):after { content: "#42A5F5";
}
div:nth-child(56) { background: #2196F3; animation-delay: 2.8s;
}
div:nth-child(56):after { content: "#2196F3";
}
div:nth-child(57) { background: #1E88E5; animation-delay: 2.85s;
}
div:nth-child(57):after { content: "#1E88E5";
}
div:nth-child(58) { background: #1976D2; animation-delay: 2.9s;
}
div:nth-child(58):after { content: "#1976D2";
}
div:nth-child(59) { background: #1565C0; animation-delay: 2.95s;
}
div:nth-child(59):after { content: "#1565C0";
}
div:nth-child(60) { background: #0D47A1; animation-delay: 3s;
}
div:nth-child(60):after { content: "#0D47A1";
}
div:nth-child(61) { background: #E1F5FE; animation-delay: 3.05s;
}
div:nth-child(61):after { content: "#E1F5FE";
}
div:nth-child(62) { background: #B3E5FC; animation-delay: 3.1s;
}
div:nth-child(62):after { content: "#B3E5FC";
}
div:nth-child(63) { background: #81D4FA; animation-delay: 3.15s;
}
div:nth-child(63):after { content: "#81D4FA";
}
div:nth-child(64) { background: #4FC3F7; animation-delay: 3.2s;
}
div:nth-child(64):after { content: "#4FC3F7";
}
div:nth-child(65) { background: #29B6F6; animation-delay: 3.25s;
}
div:nth-child(65):after { content: "#29B6F6";
}
div:nth-child(66) { background: #03A9F4; animation-delay: 3.3s;
}
div:nth-child(66):after { content: "#03A9F4";
}
div:nth-child(67) { background: #039BE5; animation-delay: 3.35s;
}
div:nth-child(67):after { content: "#039BE5";
}
div:nth-child(68) { background: #0288D1; animation-delay: 3.4s;
}
div:nth-child(68):after { content: "#0288D1";
}
div:nth-child(69) { background: #0277BD; animation-delay: 3.45s;
}
div:nth-child(69):after { content: "#0277BD";
}
div:nth-child(70) { background: #01579B; animation-delay: 3.5s;
}
div:nth-child(70):after { content: "#01579B";
}
div:nth-child(71) { background: #E0F7FA; animation-delay: 3.55s;
}
div:nth-child(71):after { content: "#E0F7FA";
}
div:nth-child(72) { background: #B2EBF2; animation-delay: 3.6s;
}
div:nth-child(72):after { content: "#B2EBF2";
}
div:nth-child(73) { background: #80DEEA; animation-delay: 3.65s;
}
div:nth-child(73):after { content: "#80DEEA";
}
div:nth-child(74) { background: #4DD0E1; animation-delay: 3.7s;
}
div:nth-child(74):after { content: "#4DD0E1";
}
div:nth-child(75) { background: #26C6DA; animation-delay: 3.75s;
}
div:nth-child(75):after { content: "#26C6DA";
}
div:nth-child(76) { background: #00BCD4; animation-delay: 3.8s;
}
div:nth-child(76):after { content: "#00BCD4";
}
div:nth-child(77) { background: #00ACC1; animation-delay: 3.85s;
}
div:nth-child(77):after { content: "#00ACC1";
}
div:nth-child(78) { background: #0097A7; animation-delay: 3.9s;
}
div:nth-child(78):after { content: "#0097A7";
}
div:nth-child(79) { background: #00838F; animation-delay: 3.95s;
}
div:nth-child(79):after { content: "#00838F";
}
div:nth-child(80) { background: #006064; animation-delay: 4s;
}
div:nth-child(80):after { content: "#006064";
}
div:nth-child(81) { background: #E0F2F1; animation-delay: 4.05s;
}
div:nth-child(81):after { content: "#E0F2F1";
}
div:nth-child(82) { background: #B2DFDB; animation-delay: 4.1s;
}
div:nth-child(82):after { content: "#B2DFDB";
}
div:nth-child(83) { background: #80CBC4; animation-delay: 4.15s;
}
div:nth-child(83):after { content: "#80CBC4";
}
div:nth-child(84) { background: #4DB6AC; animation-delay: 4.2s;
}
div:nth-child(84):after { content: "#4DB6AC";
}
div:nth-child(85) { background: #26A69A; animation-delay: 4.25s;
}
div:nth-child(85):after { content: "#26A69A";
}
div:nth-child(86) { background: #009688; animation-delay: 4.3s;
}
div:nth-child(86):after { content: "#009688";
}
div:nth-child(87) { background: #00897B; animation-delay: 4.35s;
}
div:nth-child(87):after { content: "#00897B";
}
div:nth-child(88) { background: #00796B; animation-delay: 4.4s;
}
div:nth-child(88):after { content: "#00796B";
}
div:nth-child(89) { background: #00695C; animation-delay: 4.45s;
}
div:nth-child(89):after { content: "#00695C";
}
div:nth-child(90) { background: #004D40; animation-delay: 4.5s;
}
div:nth-child(90):after { content: "#004D40";
}
div:nth-child(91) { background: #E8F5E9; animation-delay: 4.55s;
}
div:nth-child(91):after { content: "#E8F5E9";
}
div:nth-child(92) { background: #C8E6C9; animation-delay: 4.6s;
}
div:nth-child(92):after { content: "#C8E6C9";
}
div:nth-child(93) { background: #A5D6A7; animation-delay: 4.65s;
}
div:nth-child(93):after { content: "#A5D6A7";
}
div:nth-child(94) { background: #81C784; animation-delay: 4.7s;
}
div:nth-child(94):after { content: "#81C784";
}
div:nth-child(95) { background: #66BB6A; animation-delay: 4.75s;
}
div:nth-child(95):after { content: "#66BB6A";
}
div:nth-child(96) { background: #4CAF50; animation-delay: 4.8s;
}
div:nth-child(96):after { content: "#4CAF50";
}
div:nth-child(97) { background: #43A047; animation-delay: 4.85s;
}
div:nth-child(97):after { content: "#43A047";
}
div:nth-child(98) { background: #388E3C; animation-delay: 4.9s;
}
div:nth-child(98):after { content: "#388E3C";
}
div:nth-child(99) { background: #2E7D32; animation-delay: 4.95s;
}
div:nth-child(99):after { content: "#2E7D32";
}
div:nth-child(100) { background: #1B5E20; animation-delay: 5s;
}
div:nth-child(100):after { content: "#1B5E20";
}
div:nth-child(101) { background: #F1F8E9; animation-delay: 5.05s;
}
div:nth-child(101):after { content: "#F1F8E9";
}
div:nth-child(102) { background: #DCEDC8; animation-delay: 5.1s;
}
div:nth-child(102):after { content: "#DCEDC8";
}
div:nth-child(103) { background: #C5E1A5; animation-delay: 5.15s;
}
div:nth-child(103):after { content: "#C5E1A5";
}
div:nth-child(104) { background: #AED581; animation-delay: 5.2s;
}
div:nth-child(104):after { content: "#AED581";
}
div:nth-child(105) { background: #9CCC65; animation-delay: 5.25s;
}
div:nth-child(105):after { content: "#9CCC65";
}
div:nth-child(106) { background: #8BC34A; animation-delay: 5.3s;
}
div:nth-child(106):after { content: "#8BC34A";
}
div:nth-child(107) { background: #7CB342; animation-delay: 5.35s;
}
div:nth-child(107):after { content: "#7CB342";
}
div:nth-child(108) { background: #689F38; animation-delay: 5.4s;
}
div:nth-child(108):after { content: "#689F38";
}
div:nth-child(109) { background: #558B2F; animation-delay: 5.45s;
}
div:nth-child(109):after { content: "#558B2F";
}
div:nth-child(110) { background: #33691E; animation-delay: 5.5s;
}
div:nth-child(110):after { content: "#33691E";
}
div:nth-child(111) { background: #F9FBE7; animation-delay: 5.55s;
}
div:nth-child(111):after { content: "#F9FBE7";
}
div:nth-child(112) { background: #F0F4C3; animation-delay: 5.6s;
}
div:nth-child(112):after { content: "#F0F4C3";
}
div:nth-child(113) { background: #E6EE9C; animation-delay: 5.65s;
}
div:nth-child(113):after { content: "#E6EE9C";
}
div:nth-child(114) { background: #DCE775; animation-delay: 5.7s;
}
div:nth-child(114):after { content: "#DCE775";
}
div:nth-child(115) { background: #D4E157; animation-delay: 5.75s;
}
div:nth-child(115):after { content: "#D4E157";
}
div:nth-child(116) { background: #CDDC39; animation-delay: 5.8s;
}
div:nth-child(116):after { content: "#CDDC39";
}
div:nth-child(117) { background: #C0CA33; animation-delay: 5.85s;
}
div:nth-child(117):after { content: "#C0CA33";
}
div:nth-child(118) { background: #AFB42B; animation-delay: 5.9s;
}
div:nth-child(118):after { content: "#AFB42B";
}
div:nth-child(119) { background: #9E9D24; animation-delay: 5.95s;
}
div:nth-child(119):after { content: "#9E9D24";
}
div:nth-child(120) { background: #827717; animation-delay: 6s;
}
div:nth-child(120):after { content: "#827717";
}
div:nth-child(121) { background: #FFFDE7; animation-delay: 6.05s;
}
div:nth-child(121):after { content: "#FFFDE7";
}
div:nth-child(122) { background: #FFF9C4; animation-delay: 6.1s;
}
div:nth-child(122):after { content: "#FFF9C4";
}
div:nth-child(123) { background: #FFF59D; animation-delay: 6.15s;
}
div:nth-child(123):after { content: "#FFF59D";
}
div:nth-child(124) { background: #FFF176; animation-delay: 6.2s;
}
div:nth-child(124):after { content: "#FFF176";
}
div:nth-child(125) { background: #FFEE58; animation-delay: 6.25s;
}
div:nth-child(125):after { content: "#FFEE58";
}
div:nth-child(126) { background: #FFEB3B; animation-delay: 6.3s;
}
div:nth-child(126):after { content: "#FFEB3B";
}
div:nth-child(127) { background: #FDD835; animation-delay: 6.35s;
}
div:nth-child(127):after { content: "#FDD835";
}
div:nth-child(128) { background: #FBC02D; animation-delay: 6.4s;
}
div:nth-child(128):after { content: "#FBC02D";
}
div:nth-child(129) { background: #F9A825; animation-delay: 6.45s;
}
div:nth-child(129):after { content: "#F9A825";
}
div:nth-child(130) { background: #F57F17; animation-delay: 6.5s;
}
div:nth-child(130):after { content: "#F57F17";
}
div:nth-child(131) { background: #FFF8E1; animation-delay: 6.55s;
}
div:nth-child(131):after { content: "#FFF8E1";
}
div:nth-child(132) { background: #FFECB3; animation-delay: 6.6s;
}
div:nth-child(132):after { content: "#FFECB3";
}
div:nth-child(133) { background: #FFE082; animation-delay: 6.65s;
}
div:nth-child(133):after { content: "#FFE082";
}
div:nth-child(134) { background: #FFD54F; animation-delay: 6.7s;
}
div:nth-child(134):after { content: "#FFD54F";
}
div:nth-child(135) { background: #FFCA28; animation-delay: 6.75s;
}
div:nth-child(135):after { content: "#FFCA28";
}
div:nth-child(136) { background: #FFC107; animation-delay: 6.8s;
}
div:nth-child(136):after { content: "#FFC107";
}
div:nth-child(137) { background: #FFB300; animation-delay: 6.85s;
}
div:nth-child(137):after { content: "#FFB300";
}
div:nth-child(138) { background: #FFA000; animation-delay: 6.9s;
}
div:nth-child(138):after { content: "#FFA000";
}
div:nth-child(139) { background: #FF8F00; animation-delay: 6.95s;
}
div:nth-child(139):after { content: "#FF8F00";
}
div:nth-child(140) { background: #FF6F00; animation-delay: 7s;
}
div:nth-child(140):after { content: "#FF6F00";
}
div:nth-child(141) { background: #FFF3E0; animation-delay: 7.05s;
}
div:nth-child(141):after { content: "#FFF3E0";
}
div:nth-child(142) { background: #FFE0B2; animation-delay: 7.1s;
}
div:nth-child(142):after { content: "#FFE0B2";
}
div:nth-child(143) { background: #FFCC80; animation-delay: 7.15s;
}
div:nth-child(143):after { content: "#FFCC80";
}
div:nth-child(144) { background: #FFB74D; animation-delay: 7.2s;
}
div:nth-child(144):after { content: "#FFB74D";
}
div:nth-child(145) { background: #FFA726; animation-delay: 7.25s;
}
div:nth-child(145):after { content: "#FFA726";
}
div:nth-child(146) { background: #FF9800; animation-delay: 7.3s;
}
div:nth-child(146):after { content: "#FF9800";
}
div:nth-child(147) { background: #FB8C00; animation-delay: 7.35s;
}
div:nth-child(147):after { content: "#FB8C00";
}
div:nth-child(148) { background: #F57C00; animation-delay: 7.4s;
}
div:nth-child(148):after { content: "#F57C00";
}
div:nth-child(149) { background: #EF6C00; animation-delay: 7.45s;
}
div:nth-child(149):after { content: "#EF6C00";
}
div:nth-child(150) { background: #E65100; animation-delay: 7.5s;
}
div:nth-child(150):after { content: "#E65100";
}
div:nth-child(151) { background: #FBE9E7; animation-delay: 7.55s;
}
div:nth-child(151):after { content: "#FBE9E7";
}
div:nth-child(152) { background: #FFCCBC; animation-delay: 7.6s;
}
div:nth-child(152):after { content: "#FFCCBC";
}
div:nth-child(153) { background: #FFAB91; animation-delay: 7.65s;
}
div:nth-child(153):after { content: "#FFAB91";
}
div:nth-child(154) { background: #FF8A65; animation-delay: 7.7s;
}
div:nth-child(154):after { content: "#FF8A65";
}
div:nth-child(155) { background: #FF7043; animation-delay: 7.75s;
}
div:nth-child(155):after { content: "#FF7043";
}
div:nth-child(156) { background: #FF5722; animation-delay: 7.8s;
}
div:nth-child(156):after { content: "#FF5722";
}
div:nth-child(157) { background: #F4511E; animation-delay: 7.85s;
}
div:nth-child(157):after { content: "#F4511E";
}
div:nth-child(158) { background: #E64A19; animation-delay: 7.9s;
}
div:nth-child(158):after { content: "#E64A19";
}
div:nth-child(159) { background: #D84315; animation-delay: 7.95s;
}
div:nth-child(159):after { content: "#D84315";
}
div:nth-child(160) { background: #BF360C; animation-delay: 8s;
}
div:nth-child(160):after { content: "#BF360C";
}
div:nth-child(161) { background: #EFEBE9; animation-delay: 8.05s;
}
div:nth-child(161):after { content: "#EFEBE9";
}
div:nth-child(162) { background: #D7CCC8; animation-delay: 8.1s;
}
div:nth-child(162):after { content: "#D7CCC8";
}
div:nth-child(163) { background: #BCAAA4; animation-delay: 8.15s;
}
div:nth-child(163):after { content: "#BCAAA4";
}
div:nth-child(164) { background: #A1887F; animation-delay: 8.2s;
}
div:nth-child(164):after { content: "#A1887F";
}
div:nth-child(165) { background: #8D6E63; animation-delay: 8.25s;
}
div:nth-child(165):after { content: "#8D6E63";
}
div:nth-child(166) { background: #795548; animation-delay: 8.3s;
}
div:nth-child(166):after { content: "#795548";
}
div:nth-child(167) { background: #6D4C41; animation-delay: 8.35s;
}
div:nth-child(167):after { content: "#6D4C41";
}
div:nth-child(168) { background: #5D4037; animation-delay: 8.4s;
}
div:nth-child(168):after { content: "#5D4037";
}
div:nth-child(169) { background: #4E342E; animation-delay: 8.45s;
}
div:nth-child(169):after { content: "#4E342E";
}
div:nth-child(170) { background: #3E2723; animation-delay: 8.5s;
}
div:nth-child(170):after { content: "#3E2723";
}
div:nth-child(171) { background: #FAFAFA; animation-delay: 8.55s;
}
div:nth-child(171):after { content: "#FAFAFA";
}
div:nth-child(172) { background: #F5F5F5; animation-delay: 8.6s;
}
div:nth-child(172):after { content: "#F5F5F5";
}
div:nth-child(173) { background: #EEEEEE; animation-delay: 8.65s;
}
div:nth-child(173):after { content: "#EEEEEE";
}
div:nth-child(174) { background: #E0E0E0; animation-delay: 8.7s;
}
div:nth-child(174):after { content: "#E0E0E0";
}
div:nth-child(175) { background: #BDBDBD; animation-delay: 8.75s;
}
div:nth-child(175):after { content: "#BDBDBD";
}
div:nth-child(176) { background: #9E9E9E; animation-delay: 8.8s;
}
div:nth-child(176):after { content: "#9E9E9E";
}
div:nth-child(177) { background: #757575; animation-delay: 8.85s;
}
div:nth-child(177):after { content: "#757575";
}
div:nth-child(178) { background: #616161; animation-delay: 8.9s;
}
div:nth-child(178):after { content: "#616161";
}
div:nth-child(179) { background: #424242; animation-delay: 8.95s;
}
div:nth-child(179):after { content: "#424242";
}
div:nth-child(180) { background: #212121; animation-delay: 9s;
}
div:nth-child(180):after { content: "#212121";
}
div:nth-child(181) { background: #ECEFF1; animation-delay: 9.05s;
}
div:nth-child(181):after { content: "#ECEFF1";
}
div:nth-child(182) { background: #CFD8DC; animation-delay: 9.1s;
}
div:nth-child(182):after { content: "#CFD8DC";
}
div:nth-child(183) { background: #B0BEC5; animation-delay: 9.15s;
}
div:nth-child(183):after { content: "#B0BEC5";
}
div:nth-child(184) { background: #90A4AE; animation-delay: 9.2s;
}
div:nth-child(184):after { content: "#90A4AE";
}
div:nth-child(185) { background: #78909C; animation-delay: 9.25s;
}
div:nth-child(185):after { content: "#78909C";
}
div:nth-child(186) { background: #607D8B; animation-delay: 9.3s;
}
div:nth-child(186):after { content: "#607D8B";
}
div:nth-child(187) { background: #546E7A; animation-delay: 9.35s;
}
div:nth-child(187):after { content: "#546E7A";
}
div:nth-child(188) { background: #455A64; animation-delay: 9.4s;
}
div:nth-child(188):after { content: "#455A64";
}
div:nth-child(189) { background: #37474F; animation-delay: 9.45s;
}
div:nth-child(189):after { content: "#37474F";
}
div:nth-child(190) { background: #263238; animation-delay: 9.5s;
}
div:nth-child(190):after { content: "#263238";
}
div:nth-child(191) { background: #FF8A80; animation-delay: 9.55s;
}
div:nth-child(191):after { content: "#FF8A80";
}
div:nth-child(192) { background: #FF5252; animation-delay: 9.6s;
}
div:nth-child(192):after { content: "#FF5252";
}
div:nth-child(193) { background: #FF1744; animation-delay: 9.65s;
}
div:nth-child(193):after { content: "#FF1744";
}
div:nth-child(194) { background: #D50000; animation-delay: 9.7s;
}
div:nth-child(194):after { content: "#D50000";
}
div:nth-child(195) { background: #FF80AB; animation-delay: 9.75s;
}
div:nth-child(195):after { content: "#FF80AB";
}
div:nth-child(196) { background: #FF4081; animation-delay: 9.8s;
}
div:nth-child(196):after { content: "#FF4081";
}
div:nth-child(197) { background: #F50057; animation-delay: 9.85s;
}
div:nth-child(197):after { content: "#F50057";
}
div:nth-child(198) { background: #C51162; animation-delay: 9.9s;
}
div:nth-child(198):after { content: "#C51162";
}
div:nth-child(199) { background: #EA80FC; animation-delay: 9.95s;
}
div:nth-child(199):after { content: "#EA80FC";
}
div:nth-child(200) { background: #E040FB; animation-delay: 10s;
}
div:nth-child(200):after { content: "#E040FB";
}
div:nth-child(201) { background: #D500F9; animation-delay: 10.05s;
}
div:nth-child(201):after { content: "#D500F9";
}
div:nth-child(202) { background: #AA00FF; animation-delay: 10.1s;
}
div:nth-child(202):after { content: "#AA00FF";
}
div:nth-child(203) { background: #B388FF; animation-delay: 10.15s;
}
div:nth-child(203):after { content: "#B388FF";
}
div:nth-child(204) { background: #7C4DFF; animation-delay: 10.2s;
}
div:nth-child(204):after { content: "#7C4DFF";
}
div:nth-child(205) { background: #651FFF; animation-delay: 10.25s;
}
div:nth-child(205):after { content: "#651FFF";
}
div:nth-child(206) { background: #6200EA; animation-delay: 10.3s;
}
div:nth-child(206):after { content: "#6200EA";
}
div:nth-child(207) { background: #8C9EFF; animation-delay: 10.35s;
}
div:nth-child(207):after { content: "#8C9EFF";
}
div:nth-child(208) { background: #536DFE; animation-delay: 10.4s;
}
div:nth-child(208):after { content: "#536DFE";
}
div:nth-child(209) { background: #3D5AFE; animation-delay: 10.45s;
}
div:nth-child(209):after { content: "#3D5AFE";
}
div:nth-child(210) { background: #304FFE; animation-delay: 10.5s;
}
div:nth-child(210):after { content: "#304FFE";
}
div:nth-child(211) { background: #82B1FF; animation-delay: 10.55s;
}
div:nth-child(211):after { content: "#82B1FF";
}
div:nth-child(212) { background: #448AFF; animation-delay: 10.6s;
}
div:nth-child(212):after { content: "#448AFF";
}
div:nth-child(213) { background: #2979FF; animation-delay: 10.65s;
}
div:nth-child(213):after { content: "#2979FF";
}
div:nth-child(214) { background: #2962FF; animation-delay: 10.7s;
}
div:nth-child(214):after { content: "#2962FF";
}
div:nth-child(215) { background: #80D8FF; animation-delay: 10.75s;
}
div:nth-child(215):after { content: "#80D8FF";
}
div:nth-child(216) { background: #40C4FF; animation-delay: 10.8s;
}
div:nth-child(216):after { content: "#40C4FF";
}
div:nth-child(217) { background: #00B0FF; animation-delay: 10.85s;
}
div:nth-child(217):after { content: "#00B0FF";
}
div:nth-child(218) { background: #0091EA; animation-delay: 10.9s;
}
div:nth-child(218):after { content: "#0091EA";
}
div:nth-child(219) { background: #84FFFF; animation-delay: 10.95s;
}
div:nth-child(219):after { content: "#84FFFF";
}
div:nth-child(220) { background: #18FFFF; animation-delay: 11s;
}
div:nth-child(220):after { content: "#18FFFF";
}
div:nth-child(221) { background: #00E5FF; animation-delay: 11.05s;
}
div:nth-child(221):after { content: "#00E5FF";
}
div:nth-child(222) { background: #00B8D4; animation-delay: 11.1s;
}
div:nth-child(222):after { content: "#00B8D4";
}
div:nth-child(223) { background: #A7FFEB; animation-delay: 11.15s;
}
div:nth-child(223):after { content: "#A7FFEB";
}
div:nth-child(224) { background: #64FFDA; animation-delay: 11.2s;
}
div:nth-child(224):after { content: "#64FFDA";
}
div:nth-child(225) { background: #1DE9B6; animation-delay: 11.25s;
}
div:nth-child(225):after { content: "#1DE9B6";
}
div:nth-child(226) { background: #00BFA5; animation-delay: 11.3s;
}
div:nth-child(226):after { content: "#00BFA5";
}
div:nth-child(227) { background: #B9F6CA; animation-delay: 11.35s;
}
div:nth-child(227):after { content: "#B9F6CA";
}
div:nth-child(228) { background: #69F0AE; animation-delay: 11.4s;
}
div:nth-child(228):after { content: "#69F0AE";
}
div:nth-child(229) { background: #00E676; animation-delay: 11.45s;
}
div:nth-child(229):after { content: "#00E676";
}
div:nth-child(230) { background: #00C853; animation-delay: 11.5s;
}
div:nth-child(230):after { content: "#00C853";
}
div:nth-child(231) { background: #CCFF90; animation-delay: 11.55s;
}
div:nth-child(231):after { content: "#CCFF90";
}
div:nth-child(232) { background: #B2FF59; animation-delay: 11.6s;
}
div:nth-child(232):after { content: "#B2FF59";
}
div:nth-child(233) { background: #76FF03; animation-delay: 11.65s;
}
div:nth-child(233):after { content: "#76FF03";
}
div:nth-child(234) { background: #64DD17; animation-delay: 11.7s;
}
div:nth-child(234):after { content: "#64DD17";
}
div:nth-child(235) { background: #F4FF81; animation-delay: 11.75s;
}
div:nth-child(235):after { content: "#F4FF81";
}
div:nth-child(236) { background: #EEFF41; animation-delay: 11.8s;
}
div:nth-child(236):after { content: "#EEFF41";
}
div:nth-child(237) { background: #C6FF00; animation-delay: 11.85s;
}
div:nth-child(237):after { content: "#C6FF00";
}
div:nth-child(238) { background: #AEEA00; animation-delay: 11.9s;
}
div:nth-child(238):after { content: "#AEEA00";
}
div:nth-child(239) { background: #FFFF8D; animation-delay: 11.95s;
}
div:nth-child(239):after { content: "#FFFF8D";
}
div:nth-child(240) { background: #FFFF00; animation-delay: 12s;
}
div:nth-child(240):after { content: "#FFFF00";
}
div:nth-child(241) { background: #FFEA00; animation-delay: 12.05s;
}
div:nth-child(241):after { content: "#FFEA00";
}
div:nth-child(242) { background: #FFD600; animation-delay: 12.1s;
}
div:nth-child(242):after { content: "#FFD600";
}
div:nth-child(243) { background: #FFE57F; animation-delay: 12.15s;
}
div:nth-child(243):after { content: "#FFE57F";
}
div:nth-child(244) { background: #FFD740; animation-delay: 12.2s;
}
div:nth-child(244):after { content: "#FFD740";
}
div:nth-child(245) { background: #FFC400; animation-delay: 12.25s;
}
div:nth-child(245):after { content: "#FFC400";
}
div:nth-child(246) { background: #FFAB00; animation-delay: 12.3s;
}
div:nth-child(246):after { content: "#FFAB00";
}
div:nth-child(247) { background: #FFD180; animation-delay: 12.35s;
}
div:nth-child(247):after { content: "#FFD180";
}
div:nth-child(248) { background: #FFAB40; animation-delay: 12.4s;
}
div:nth-child(248):after { content: "#FFAB40";
}
div:nth-child(249) { background: #FF9100; animation-delay: 12.45s;
}
div:nth-child(249):after { content: "#FF9100";
}
div:nth-child(250) { background: #FF6D00; animation-delay: 12.5s;
}
div:nth-child(250):after { content: "#FF6D00";
}
div:nth-child(251) { background: #FF9E80; animation-delay: 12.55s;
}
div:nth-child(251):after { content: "#FF9E80";
}
div:nth-child(252) { background: #FF6E40; animation-delay: 12.6s;
}
div:nth-child(252):after { content: "#FF6E40";
}
div:nth-child(253) { background: #FF3D00; animation-delay: 12.65s;
}
div:nth-child(253):after { content: "#FF3D00";
}
div:nth-child(254) { background: #DD2C00; animation-delay: 12.7s;
}
div:nth-child(254):after { content: "#DD2C00";
}
/* Main Styles */
* { box-sizing: border-box;
}
html { font-size: 16px;
}
body { font-family: 'Lato'; color: #fff; line-height: 1.6; font-size: 1rem;
}
div { width: 10%; height: 100px; float: left; text-align: center; position: relative; transform: scale(0); opacity: 0; animation: 1s load forwards;
}
div:hover:after { opacity: 1;
}
div:after { background: #2e2e2e; opacity: 0.5; padding: 20px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s;
}
.alt { width: 12.5%;
}
/* Keyframes */
@keyframes load { 100% { transform: scale(1); opacity: 1; }
}
/* Media Queries */
@media (max-width: 1220px) { div { width: 20%; } .alt { width: 25%; }
}
@media (max-width: 620px) { div, .alt { width: 50%; }
}
@media (max-width: 320px) { div, .alt { width: 100%; }
}
Material Design Colour Palette - Script Codes
Material Design Colour Palette - Script Codes
Home Page Home
Developer Keith Light
Username keefyboooo
Uploaded November 18, 2022
Rating 3
Size 14,903 Kb
Views 16,192
Do you need developer help for Material Design Colour Palette?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keith Light (keefyboooo) Script Codes
Name
DevWars Weekly Challenge Week 8
Angled Menu
Animated Burger Menu
Material Design Buttons
Soundbar Loading Animation
DevWars weekly challenge week 1
Off Canvas Pop Out Menu
Colour Palette From Material Design
DevWars Weekly Challenge Week 3
Skills Display, using jQuery
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!