Skip to content

Instantly share code, notes, and snippets.

@atadams
Created February 25, 2016 14:54
Show Gist options
  • Save atadams/6393e30a2a7558fddd06 to your computer and use it in GitHub Desktop.
Save atadams/6393e30a2a7558fddd06 to your computer and use it in GitHub Desktop.
Google Material Design Color Definitions in HSLA
// Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
// A400, A700.
// $palette-red:
$palette-red-50: hsla(351, 100%, 96%, 1);
$palette-red-100: hsla(354, 100%, 90%, 1);
$palette-red-200: hsla(0, 73%, 77%, 1);
$palette-red-300: hsla(0, 69%, 67%, 1);
$palette-red-400: hsla(1, 83%, 63%, 1);
$palette-red-500: hsla(4, 90%, 58%, 1);
$palette-red-600: hsla(1, 77%, 55%, 1);
$palette-red-700: hsla(0, 65%, 51%, 1);
$palette-red-800: hsla(0, 66%, 47%, 1);
$palette-red-900: hsla(0, 73%, 41%, 1);
$palette-red-A100: hsla(5, 100%, 75%, 1);
$palette-red-A200: hsla(0, 100%, 66%, 1);
$palette-red-A400: hsla(348, 100%, 55%, 1);
$palette-red-A700: hsla(0, 100%, 42%, 1);
// $palette-pink:
$palette-pink-50: hsla(340, 80%, 94%, 1);
$palette-pink-100: hsla(339, 81%, 85%, 1);
$palette-pink-200: hsla(340, 82%, 76%, 1);
$palette-pink-300: hsla(340, 83%, 66%, 1);
$palette-pink-400: hsla(340, 82%, 59%, 1);
$palette-pink-500: hsla(340, 82%, 52%, 1);
$palette-pink-600: hsla(338, 78%, 48%, 1);
$palette-pink-700: hsla(336, 78%, 43%, 1);
$palette-pink-800: hsla(334, 79%, 38%, 1);
$palette-pink-900: hsla(328, 81%, 29%, 1);
$palette-pink-A100: hsla(340, 100%, 75%, 1);
$palette-pink-A200: hsla(340, 100%, 63%, 1);
$palette-pink-A400: hsla(339, 100%, 48%, 1);
$palette-pink-A700: hsla(333, 84%, 42%, 1);
// $palette-purple:
$palette-purple-50: hsla(292, 44%, 93%, 1);
$palette-purple-100: hsla(291, 46%, 83%, 1);
$palette-purple-200: hsla(291, 47%, 71%, 1);
$palette-purple-300: hsla(291, 47%, 60%, 1);
$palette-purple-400: hsla(291, 47%, 51%, 1);
$palette-purple-500: hsla(291, 64%, 42%, 1);
$palette-purple-600: hsla(287, 65%, 40%, 1);
$palette-purple-700: hsla(282, 68%, 38%, 1);
$palette-purple-800: hsla(277, 70%, 35%, 1);
$palette-purple-900: hsla(267, 75%, 31%, 1);
$palette-purple-A100: hsla(291, 95%, 75%, 1);
$palette-purple-A200: hsla(291, 96%, 62%, 1);
$palette-purple-A400: hsla(291, 100%, 49%, 1);
$palette-purple-A700: hsla(280, 100%, 50%, 1);
// $palette-deep-purple:
$palette-deep-purple-50: hsla(264, 45%, 94%, 1);
$palette-deep-purple-100: hsla(261, 46%, 84%, 1);
$palette-deep-purple-200: hsla(261, 46%, 74%, 1);
$palette-deep-purple-300: hsla(262, 47%, 63%, 1);
$palette-deep-purple-400: hsla(262, 47%, 55%, 1);
$palette-deep-purple-500: hsla(262, 52%, 47%, 1);
$palette-deep-purple-600: hsla(260, 54%, 45%, 1);
$palette-deep-purple-700: hsla(258, 58%, 42%, 1);
$palette-deep-purple-800: hsla(255, 61%, 39%, 1);
$palette-deep-purple-900: hsla(251, 69%, 34%, 1);
$palette-deep-purple-A100: hsla(262, 100%, 77%, 1);
$palette-deep-purple-A200: hsla(256, 100%, 65%, 1);
$palette-deep-purple-A400: hsla(259, 100%, 56%, 1);
$palette-deep-purple-A700: hsla(265, 100%, 46%, 1);
// $palette-indigo:
$palette-indigo-50: hsla(231, 44%, 94%, 1);
$palette-indigo-100: hsla(232, 45%, 84%, 1);
$palette-indigo-200: hsla(231, 44%, 74%, 1);
$palette-indigo-300: hsla(230, 44%, 64%, 1);
$palette-indigo-400: hsla(231, 44%, 56%, 1);
$palette-indigo-500: hsla(231, 48%, 48%, 1);
$palette-indigo-600: hsla(232, 50%, 45%, 1);
$palette-indigo-700: hsla(232, 54%, 41%, 1);
$palette-indigo-800: hsla(233, 57%, 37%, 1);
$palette-indigo-900: hsla(235, 66%, 30%, 1);
$palette-indigo-A100: hsla(231, 100%, 77%, 1);
$palette-indigo-A200: hsla(231, 99%, 66%, 1);
$palette-indigo-A400: hsla(231, 99%, 62%, 1);
$palette-indigo-A700: hsla(231, 99%, 59%, 1);
// $palette-blue:
$palette-blue-50: hsla(205, 87%, 94%, 1);
$palette-blue-100: hsla(207, 89%, 86%, 1);
$palette-blue-200: hsla(207, 90%, 77%, 1);
$palette-blue-300: hsla(207, 89%, 68%, 1);
$palette-blue-400: hsla(207, 90%, 61%, 1);
$palette-blue-500: hsla(207, 90%, 54%, 1);
$palette-blue-600: hsla(208, 79%, 51%, 1);
$palette-blue-700: hsla(210, 79%, 46%, 1);
$palette-blue-800: hsla(212, 80%, 42%, 1);
$palette-blue-900: hsla(216, 85%, 34%, 1);
$palette-blue-A100: hsla(217, 100%, 75%, 1);
$palette-blue-A200: hsla(218, 100%, 63%, 1);
$palette-blue-A400: hsla(218, 100%, 58%, 1);
$palette-blue-A700: hsla(224, 100%, 58%, 1);
// $palette-light-blue:
$palette-light-blue-50: hsla(199, 94%, 94%, 1);
$palette-light-blue-100: hsla(199, 92%, 85%, 1);
$palette-light-blue-200: hsla(199, 92%, 74%, 1);
$palette-light-blue-300: hsla(199, 91%, 64%, 1);
$palette-light-blue-400: hsla(199, 92%, 56%, 1);
$palette-light-blue-500: hsla(199, 98%, 48%, 1);
$palette-light-blue-600: hsla(200, 97%, 45%, 1);
$palette-light-blue-700: hsla(201, 98%, 41%, 1);
$palette-light-blue-800: hsla(202, 98%, 37%, 1);
$palette-light-blue-900: hsla(206, 99%, 31%, 1);
$palette-light-blue-A100: hsla(198, 100%, 75%, 1);
$palette-light-blue-A200: hsla(199, 100%, 63%, 1);
$palette-light-blue-A400: hsla(199, 100%, 50%, 1);
$palette-light-blue-A700: hsla(203, 100%, 46%, 1);
// $palette-cyan:
$palette-cyan-50: hsla(187, 72%, 93%, 1);
$palette-cyan-100: hsla(187, 71%, 82%, 1);
$palette-cyan-200: hsla(187, 72%, 71%, 1);
$palette-cyan-300: hsla(187, 71%, 59%, 1);
$palette-cyan-400: hsla(187, 71%, 50%, 1);
$palette-cyan-500: hsla(187, 100%, 42%, 1);
$palette-cyan-600: hsla(187, 100%, 38%, 1);
$palette-cyan-700: hsla(186, 100%, 33%, 1);
$palette-cyan-800: hsla(185, 100%, 28%, 1);
$palette-cyan-900: hsla(182, 100%, 20%, 1);
$palette-cyan-A100: hsla(180, 100%, 76%, 1);
$palette-cyan-A200: hsla(180, 100%, 55%, 1);
$palette-cyan-A400: hsla(186, 100%, 50%, 1);
$palette-cyan-A700: hsla(188, 100%, 42%, 1);
// $palette-teal:
$palette-teal-50: hsla(177, 41%, 91%, 1);
$palette-teal-100: hsla(175, 41%, 79%, 1);
$palette-teal-200: hsla(174, 42%, 65%, 1);
$palette-teal-300: hsla(174, 42%, 51%, 1);
$palette-teal-400: hsla(174, 63%, 40%, 1);
$palette-teal-500: hsla(174, 100%, 29%, 1);
$palette-teal-600: hsla(174, 100%, 27%, 1);
$palette-teal-700: hsla(173, 100%, 24%, 1);
$palette-teal-800: hsla(173, 100%, 21%, 1);
$palette-teal-900: hsla(170, 100%, 15%, 1);
$palette-teal-A100: hsla(166, 100%, 83%, 1);
$palette-teal-A200: hsla(166, 100%, 70%, 1);
$palette-teal-A400: hsla(165, 82%, 51%, 1);
$palette-teal-A700: hsla(172, 100%, 37%, 1);
// $palette-green:
$palette-green-50: hsla(125, 39%, 94%, 1);
$palette-green-100: hsla(122, 37%, 84%, 1);
$palette-green-200: hsla(122, 37%, 74%, 1);
$palette-green-300: hsla(123, 38%, 64%, 1);
$palette-green-400: hsla(123, 38%, 57%, 1);
$palette-green-500: hsla(122, 39%, 49%, 1);
$palette-green-600: hsla(123, 41%, 45%, 1);
$palette-green-700: hsla(123, 43%, 39%, 1);
$palette-green-800: hsla(123, 46%, 34%, 1);
$palette-green-900: hsla(124, 55%, 24%, 1);
$palette-green-A100: hsla(137, 77%, 85%, 1);
$palette-green-A200: hsla(151, 82%, 68%, 1);
$palette-green-A400: hsla(151, 100%, 45%, 1);
$palette-green-A700: hsla(145, 100%, 39%, 1);
// $palette-light-green:
$palette-light-green-50: hsla(88, 52%, 94%, 1);
$palette-light-green-100: hsla(88, 51%, 86%, 1);
$palette-light-green-200: hsla(88, 50%, 76%, 1);
$palette-light-green-300: hsla(88, 50%, 67%, 1);
$palette-light-green-400: hsla(88, 50%, 60%, 1);
$palette-light-green-500: hsla(88, 50%, 53%, 1);
$palette-light-green-600: hsla(89, 46%, 48%, 1);
$palette-light-green-700: hsla(92, 48%, 42%, 1);
$palette-light-green-800: hsla(95, 49%, 36%, 1);
$palette-light-green-900: hsla(103, 56%, 26%, 1);
$palette-light-green-A100: hsla(88, 100%, 78%, 1);
$palette-light-green-A200: hsla(88, 100%, 67%, 1);
$palette-light-green-A400: hsla(93, 100%, 51%, 1);
$palette-light-green-A700: hsla(97, 81%, 48%, 1);
// $palette-lime:
$palette-lime-50: hsla(66, 71%, 95%, 1);
$palette-lime-100: hsla(65, 69%, 86%, 1);
$palette-lime-200: hsla(66, 71%, 77%, 1);
$palette-lime-300: hsla(66, 70%, 68%, 1);
$palette-lime-400: hsla(66, 70%, 61%, 1);
$palette-lime-500: hsla(66, 70%, 54%, 1);
$palette-lime-600: hsla(64, 60%, 50%, 1);
$palette-lime-700: hsla(62, 61%, 44%, 1);
$palette-lime-800: hsla(60, 63%, 38%, 1);
$palette-lime-900: hsla(54, 70%, 30%, 1);
$palette-lime-A100: hsla(65, 100%, 75%, 1);
$palette-lime-A200: hsla(65, 100%, 63%, 1);
$palette-lime-A400: hsla(73, 100%, 50%, 1);
$palette-lime-A700: hsla(75, 100%, 46%, 1);
// $palette-yellow:
$palette-yellow-50: hsla(55, 100%, 95%, 1);
$palette-yellow-100: hsla(54, 100%, 88%, 1);
$palette-yellow-200: hsla(54, 100%, 81%, 1);
$palette-yellow-300: hsla(54, 100%, 73%, 1);
$palette-yellow-400: hsla(54, 100%, 67%, 1);
$palette-yellow-500: hsla(54, 100%, 62%, 1);
$palette-yellow-600: hsla(49, 98%, 60%, 1);
$palette-yellow-700: hsla(43, 96%, 58%, 1);
$palette-yellow-800: hsla(37, 95%, 56%, 1);
$palette-yellow-900: hsla(28, 92%, 53%, 1);
$palette-yellow-A100: hsla(60, 100%, 78%, 1);
$palette-yellow-A200: hsla(60, 100%, 50%, 1);
$palette-yellow-A400: hsla(55, 100%, 50%, 1);
$palette-yellow-A700: hsla(50, 100%, 50%, 1);
// $palette-amber:
$palette-amber-50: hsla(46, 100%, 94%, 1);
$palette-amber-100: hsla(45, 100%, 85%, 1);
$palette-amber-200: hsla(45, 100%, 75%, 1);
$palette-amber-300: hsla(46, 100%, 65%, 1);
$palette-amber-400: hsla(45, 100%, 58%, 1);
$palette-amber-500: hsla(45, 100%, 51%, 1);
$palette-amber-600: hsla(42, 100%, 50%, 1);
$palette-amber-700: hsla(38, 100%, 50%, 1);
$palette-amber-800: hsla(34, 100%, 50%, 1);
$palette-amber-900: hsla(26, 100%, 50%, 1);
$palette-amber-A100: hsla(48, 100%, 75%, 1);
$palette-amber-A200: hsla(47, 100%, 63%, 1);
$palette-amber-A400: hsla(46, 100%, 50%, 1);
$palette-amber-A700: hsla(40, 100%, 50%, 1);
// $palette-orange:
$palette-orange-50: hsla(37, 100%, 94%, 1);
$palette-orange-100: hsla(36, 100%, 85%, 1);
$palette-orange-200: hsla(36, 100%, 75%, 1);
$palette-orange-300: hsla(36, 100%, 65%, 1);
$palette-orange-400: hsla(36, 100%, 57%, 1);
$palette-orange-500: hsla(36, 100%, 50%, 1);
$palette-orange-600: hsla(33, 100%, 49%, 1);
$palette-orange-700: hsla(30, 100%, 48%, 1);
$palette-orange-800: hsla(27, 100%, 47%, 1);
$palette-orange-900: hsla(21, 100%, 45%, 1);
$palette-orange-A100: hsla(38, 100%, 75%, 1);
$palette-orange-A200: hsla(34, 100%, 63%, 1);
$palette-orange-A400: hsla(34, 100%, 50%, 1);
$palette-orange-A700: hsla(26, 100%, 50%, 1);
// $palette-deep-orange:
$palette-deep-orange-50: hsla(6, 71%, 95%, 1);
$palette-deep-orange-100: hsla(14, 100%, 87%, 1);
$palette-deep-orange-200: hsla(14, 100%, 78%, 1);
$palette-deep-orange-300: hsla(14, 100%, 70%, 1);
$palette-deep-orange-400: hsla(14, 100%, 63%, 1);
$palette-deep-orange-500: hsla(14, 100%, 57%, 1);
$palette-deep-orange-600: hsla(14, 91%, 54%, 1);
$palette-deep-orange-700: hsla(14, 80%, 50%, 1);
$palette-deep-orange-800: hsla(14, 82%, 46%, 1);
$palette-deep-orange-900: hsla(14, 88%, 40%, 1);
$palette-deep-orange-A100: hsla(14, 100%, 75%, 1);
$palette-deep-orange-A200: hsla(14, 100%, 63%, 1);
$palette-deep-orange-A400: hsla(14, 100%, 50%, 1);
$palette-deep-orange-A700: hsla(12, 100%, 43%, 1);
// $palette-brown:
$palette-brown-50: hsla(20, 16%, 93%, 1);
$palette-brown-100: hsla(16, 16%, 81%, 1);
$palette-brown-200: hsla(15, 15%, 69%, 1);
$palette-brown-300: hsla(16, 15%, 56%, 1);
$palette-brown-400: hsla(16, 18%, 47%, 1);
$palette-brown-500: hsla(16, 25%, 38%, 1);
$palette-brown-600: hsla(15, 25%, 34%, 1);
$palette-brown-700: hsla(14, 26%, 29%, 1);
$palette-brown-800: hsla(11, 26%, 24%, 1);
$palette-brown-900: hsla(9, 28%, 19%, 1);
// $palette-grey:
$palette-grey-50: hsla(0, 0%, 98%, 1);
$palette-grey-100: hsla(0, 0%, 96%, 1);
$palette-grey-200: hsla(0, 0%, 93%, 1);
$palette-grey-300: hsla(0, 0%, 88%, 1);
$palette-grey-400: hsla(0, 0%, 74%, 1);
$palette-grey-500: hsla(0, 0%, 62%, 1);
$palette-grey-600: hsla(0, 0%, 46%, 1);
$palette-grey-700: hsla(0, 0%, 38%, 1);
$palette-grey-800: hsla(0, 0%, 26%, 1);
$palette-grey-900: hsla(0, 0%, 13%, 1);
// $palette-blue-grey:
$palette-blue-grey-50: hsla(204, 15%, 94%, 1);
$palette-blue-grey-100: hsla(198, 16%, 84%, 1);
$palette-blue-grey-200: hsla(200, 15%, 73%, 1);
$palette-blue-grey-300: hsla(200, 16%, 62%, 1);
$palette-blue-grey-400: hsla(200, 15%, 54%, 1);
$palette-blue-grey-500: hsla(200, 18%, 46%, 1);
$palette-blue-grey-600: hsla(199, 18%, 40%, 1);
$palette-blue-grey-700: hsla(199, 18%, 33%, 1);
$palette-blue-grey-800: hsla(200, 18%, 26%, 1);
$palette-blue-grey-900: hsla(200, 19%, 18%, 1);
$color-black: hsla(0, 0%, 0%, 1);
$color-white: hsla(0, 0%, 100%, 1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment