Skip to content

Instantly share code, notes, and snippets.

@fran-diaz
Last active November 4, 2021 08:16
Show Gist options
  • Save fran-diaz/fd9655ee840408aadb28 to your computer and use it in GitHub Desktop.
Save fran-diaz/fd9655ee840408aadb28 to your computer and use it in GitHub Desktop.
Material Design Colors for PHP, usefull to play with material design color scheme in your projects.
<?php
/**
* Material Design Colors for PHP, usefull to play with material design color scheme in your projects.
*
* @author Fran Díaz <fran.diaz.gonzalez@gmail.com>
* @github https://github.com/fran-diaz
*/
$material_design_colors = array(
'red' => array(
'50' => '#ffebee',
'100' => '#ffcdd2',
'200' => '#ef9a9a',
'300' => '#e57373',
'400' => '#ef5350',
'500' => '#f44336',
'600' => '#e53935',
'700' => '#d32f2f',
'800' => '#c62828',
'900' => '#b71c1c',
'A100' => '#ff8a80',
'A200' => '#ff5252',
'A400' => '#ff1744',
'A700' => '#d50000'
),
'pink' => array(
'50' => '#fce4ec',
'100' => '#f8bbd0',
'200' => '#f48fb1',
'300' => '#f06292',
'400' => '#ec407a',
'500' => '#e91e63',
'600' => '#d81b60',
'700' => '#c2185b',
'800' => '#ad1457',
'900' => '#880e4f',
'A100' => '#ff80ab',
'A200' => '#ff4081',
'A400' => '#f50057',
'A700' => '#c51162'
),
'purple' => array(
'50' => '#f3e5f5',
'100' => '#e1bee7',
'200' => '#ce93d8',
'300' => '#ba68c8',
'400' => '#ab47bc',
'500' => '#9c27b0',
'600' => '#8e24aa',
'700' => '#7b1fa2',
'800' => '#6a1b9a',
'900' => '#4a148c',
'A100' => '#ea80fc',
'A200' => '#e040fb',
'A400' => '#d500f9',
'A700' => '#aa00ff'
),
'deep-purple' => array(
'50' => '#ede7f6',
'100' => '#d1c4e9',
'200' => '#b39ddb',
'300' => '#9575cd',
'400' => '#7e57c2',
'500' => '#673ab7',
'600' => '#5e35b1',
'700' => '#512da8',
'800' => '#4527a0',
'900' => '#311b92',
'A100' => '#b388ff',
'A200' => '#7c4dff',
'A400' => '#651fff',
'A700' => '#6200ea'
),
'indigo' => array(
'50' => '#e8eaf6',
'100' => '#c5cae9',
'200' => '#9fa8da',
'300' => '#7986cb',
'400' => '#5c6bc0',
'500' => '#3f51b5',
'600' => '#3949ab',
'700' => '#303f9f',
'800' => '#283593',
'900' => '#1a237e',
'A100' => '#8c9eff',
'A200' => '#536dfe',
'A400' => '#3d5afe',
'A700' => '#304ffe'
),
'blue' => array(
'50' => '#e3f2fd',
'100' => '#bbdefb',
'200' => '#90caf9',
'300' => '#64b5f6',
'400' => '#42a5f5',
'500' => '#2196f3',
'600' => '#1e88e5',
'700' => '#1976d2',
'800' => '#1565c0',
'900' => '#0d47a1',
'A100' => '#82b1ff',
'A200' => '#448aff',
'A400' => '#2979ff',
'A700' => '#2962ff'
),
'light-blue' => array(
'50' => '#e1f5fe',
'100' => '#b3e5fc',
'200' => '#81d4fa',
'300' => '#4fc3f7',
'400' => '#29b6f6',
'500' => '#03a9f4',
'600' => '#039be5',
'700' => '#0288d1',
'800' => '#0277bd',
'900' => '#01579b',
'A100' => '#80d8ff',
'A200' => '#40c4ff',
'A400' => '#00b0ff',
'A700' => '#0091ea'
),
'cyan' => array(
'50' => '#e0f7fa',
'100' => '#b2ebf2',
'200' => '#80deea',
'300' => '#4dd0e1',
'400' => '#26c6da',
'500' => '#00bcd4',
'600' => '#00acc1',
'700' => '#0097a7',
'800' => '#00838f',
'900' => '#006064',
'A100' => '#84ffff',
'A200' => '#18ffff',
'A400' => '#00e5ff',
'A700' => '#00b8d4'
),
'teal' => array(
'50' => '#e0f2f1',
'100' => '#b2dfdb',
'200' => '#80cbc4',
'300' => '#4db6ac',
'400' => '#26a69a',
'500' => '#009688',
'600' => '#00897b',
'700' => '#00796b',
'800' => '#00695c',
'900' => '#004d40',
'A100' => '#a7ffeb',
'A200' => '#64ffda',
'A400' => '#1de9b6',
'A700' => '#00bfa5'
),
'green' => array(
'50' => '#e8f5e9',
'100' => '#c8e6c9',
'200' => '#a5d6a7',
'300' => '#81c784',
'400' => '#66bb6a',
'500' => '#4caf50',
'600' => '#43a047',
'700' => '#388e3c',
'800' => '#2e7d32',
'900' => '#1b5e20',
'A100' => '#b9f6ca',
'A200' => '#69f0ae',
'A400' => '#00e676',
'A700' => '#00c853'
),
'light-green' => array(
'50' => '#f1f8e9',
'100' => '#dcedc8',
'200' => '#c5e1a5',
'300' => '#aed581',
'400' => '#9ccc65',
'500' => '#8bc34a',
'600' => '#7cb342',
'700' => '#689f38',
'800' => '#558b2f',
'900' => '#33691e',
'A100' => '#ccff90',
'A200' => '#b2ff59',
'A400' => '#76ff03',
'A700' => '#64dd17'
),
'lime' => array(
'50' => '#f9fbe7',
'100' => '#f0f4c3',
'200' => '#e6ee9c',
'300' => '#dce775',
'400' => '#d4e157',
'500' => '#cddc39',
'600' => '#c0ca33',
'700' => '#afb42b',
'800' => '#9e9d24',
'900' => '#827717',
'A100' => '#f4ff81',
'A200' => '#eeff41',
'A400' => '#c6ff00',
'A700' => '#aeea00'
),
'yellow' => array(
'50' => '#fffde7',
'100' => '#fff9c4',
'200' => '#fff59d',
'300' => '#fff176',
'400' => '#ffee58',
'500' => '#ffeb3b',
'600' => '#fdd835',
'700' => '#fbc02d',
'800' => '#f9a825',
'900' => '#f57f17',
'A100' => '#ffff8d',
'A200' => '#ffff00',
'A400' => '#ffea00',
'A700' => '#ffd600'
),
'amber' => array(
'50' => '#fff8e1',
'100' => '#ffecb3',
'200' => '#ffe082',
'300' => '#ffd54f',
'400' => '#ffca28',
'500' => '#ffc107',
'600' => '#ffb300',
'700' => '#ffa000',
'800' => '#ff8f00',
'900' => '#ff6f00',
'A100' => '#ffe57f',
'A200' => '#ffd740',
'A400' => '#ffc400',
'A700' => '#ffab00'
),
'orange' => array(
'50' => '#fff3e0',
'100' => '#ffe0b2',
'200' => '#ffcc80',
'300' => '#ffb74d',
'400' => '#ffa726',
'500' => '#ff9800',
'600' => '#fb8c00',
'700' => '#f57c00',
'800' => '#ef6c00',
'900' => '#e65100',
'A100' => '#ffd180',
'A200' => '#ffab40',
'A400' => '#ff9100',
'A700' => '#ff6d00'
),
'deep-orange' => array(
'50' => '#fbe9e7',
'100' => '#ffccbc',
'200' => '#ffab91',
'300' => '#ff8a65',
'400' => '#ff7043',
'500' => '#ff5722',
'600' => '#f4511e',
'700' => '#e64a19',
'800' => '#d84315',
'900' => '#bf360c',
'A100' => '#ff9e80',
'A200' => '#ff6e40',
'A400' => '#ff3d00',
'A700' => '#dd2c00'
),
'brown' => array(
'50' => '#efebe9',
'100' => '#d7ccc8',
'200' => '#bcaaa4',
'300' => '#a1887f',
'400' => '#8d6e63',
'500' => '#795548',
'600' => '#6d4c41',
'700' => '#5d4037',
'800' => '#4e342e',
'900' => '#3e2723'
),
'grey' => array(
'50' => '#fafafa',
'100' => '#f5f5f5',
'200' => '#eeeeee',
'300' => '#e0e0e0',
'400' => '#bdbdbd',
'500' => '#9e9e9e',
'600' => '#757575',
'700' => '#616161',
'800' => '#424242',
'900' => '#212121'
),
'blue-grey' => array(
'50' => '#eceff1',
'100' => '#cfd8dc',
'200' => '#b0bec5',
'300' => '#90a4ae',
'400' => '#78909c',
'500' => '#607d8b',
'600' => '#546e7a',
'700' => '#455a64',
'800' => '#37474f',
'900' => '#263238'
),
'black' => '#000000',
'white' => '#ffffff'
);
function getColor($primary_color = 'red',$level = '500'){
global $material_design_colors;
return $material_design_colors[$primary_color][$level];
}
function getColorClasses(){
global $material_design_colors;
$classes = [];
foreach( $material_design_colors as $color => $levels ) {
foreach( $levels as $level => $value ) {
$classes[] = $color.$level;
}
}
return $classes;
}
function gen_scss_classes(){
global $material_design_colors;
ob_start();
foreach( $material_design_colors as $color => $levels ) {
if( is_array( $levels ) ){
echo '$'.$color.': '.$levels['500'].';'."\n";
echo '.'.$color.'{color: $'.$color.';}'."\n";
echo '.'.$color.'_bg{background: $'.$color.';}'."\n";
echo '.'.$color.'_border{border-color: $'.$color.';}'."\n";
foreach( $levels as $level => $value ) {
echo '$'.$color.$level.': '.$value.';'."\n";
echo '.'.$color.$level.'{color: $'.$color.$level.';}'."\n";
echo '.'.$color.$level.'_bg{background: $'.$color.$level.';}'."\n";
echo '.'.$color.$level.'_border{border-color: $'.$color.$level.';}'."\n";
}
} else {
echo '$'.$color.': '.$levels.';'."\n";
echo '.'.$color.'{color: $'.$color.';}'."\n";
echo '.'.$color.'_bg{background: $'.$color.';}'."\n";
echo '.'.$color.'_border{border-color: $'.$color.';}'."\n";
}
}
$html = ob_get_contents();
ob_end_clean();
return $html;
}
@ldiebold
Copy link

This is awesome, thankyou!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment