Home Plugin documentation Hooks and functions Functions pip_get_tailwind_native_colors()

 

 

Here we go!

 

pip_get_tailwind_native_colors()

Heads up!

This article contains PHP code and is intended for developers. We offer this code as a courtesy, but don’t provide support for code customizations or 3rd party development.

TailwindCSS native colors

/**
 * TailwindCSS native colors
 *
 * @param bool $name_labels
 * @param bool $only_names
 * @param bool $name_values
 *
 * @return array|string[]
 */
function pip_get_tailwind_native_colors( $name_labels = false, $only_names = false, $name_values = false ) {
    $colors = array(
        // Gray
        'gray'   => array(
            array(
                'name'  => '100',
                'label' => 'Gray 100',
                'value' => '#F7FAFC',
            ),
            array(
                'name'  => '200',
                'label' => 'Gray 200',
                'value' => '#EDF2F7',
            ),
            array(
                'name'  => '300',
                'label' => 'Gray 300',
                'value' => '#E2E8F0',
            ),
            array(
                'name'  => '400',
                'label' => 'Gray 400',
                'value' => '#CBD5E0',
            ),
            array(
                'name'  => '500',
                'label' => 'Gray 500',
                'value' => '#A0AEC0',
            ),
            array(
                'name'  => '600',
                'label' => 'Gray 600',
                'value' => '#718096',
            ),
            array(
                'name'  => '700',
                'label' => 'Gray 700',
                'value' => '#4A5568',
            ),
            array(
                'name'  => '800',
                'label' => 'Gray 800',
                'value' => '#2D3748',
            ),
            array(
                'name'  => '900',
                'label' => 'Gray 900',
                'value' => '#1A202C',
            ),
        ),

        // Red
        'red'    => array(
            array(
                'name'  => '100',
                'label' => 'Red 100',
                'value' => '#FFF5F5',
            ),
            array(
                'name'  => '200',
                'label' => 'Red 200',
                'value' => '#FED7D7',
            ),
            array(
                'name'  => '300',
                'label' => 'Red 300',
                'value' => '#FEB2B2',
            ),
            array(
                'name'  => '400',
                'label' => 'Red 400',
                'value' => '#FC8181',
            ),
            array(
                'name'  => '500',
                'label' => 'Red 500',
                'value' => '#F56565',
            ),
            array(
                'name'  => '600',
                'label' => 'Red 600',
                'value' => '#E53E3E',
            ),
            array(
                'name'  => '700',
                'label' => 'Red 700',
                'value' => '#C53030',
            ),
            array(
                'name'  => '800',
                'label' => 'Red 800',
                'value' => '#9B2C2C',
            ),
            array(
                'name'  => '900',
                'label' => 'Red 900',
                'value' => '#742A2A',
            ),
        ),

        // Orange
        'orange' => array(
            array(
                'name'  => '100',
                'label' => 'Orange 100',
                'value' => '#FFFAF0',
            ),
            array(
                'name'  => '200',
                'label' => 'Orange 200',
                'value' => '#FEEBC8',
            ),
            array(
                'name'  => '300',
                'label' => 'Orange 300',
                'value' => '#FBD38D',
            ),
            array(
                'name'  => '400',
                'label' => 'Orange 400',
                'value' => '#F6AD55',
            ),
            array(
                'name'  => '500',
                'label' => 'Orange 500',
                'value' => '#ED8936',
            ),
            array(
                'name'  => '600',
                'label' => 'Orange 600',
                'value' => '#DD6B20',
            ),
            array(
                'name'  => '700',
                'label' => 'Orange 700',
                'value' => '#C05621',
            ),
            array(
                'name'  => '800',
                'label' => 'Orange 800',
                'value' => '#9C4221',
            ),
            array(
                'name'  => '900',
                'label' => 'Orange 900',
                'value' => '#7B341E',
            ),
        ),

        // Yellow
        'yellow' => array(
            array(
                'name'  => '100',
                'label' => 'Yellow 100',
                'value' => '#FFFFF0',
            ),
            array(
                'name'  => '200',
                'label' => 'Yellow 200',
                'value' => '#FEFCBF',
            ),
            array(
                'name'  => '300',
                'label' => 'Yellow 300',
                'value' => '#FAF089',
            ),
            array(
                'name'  => '400',
                'label' => 'Yellow 400',
                'value' => '#F6E05E',
            ),
            array(
                'name'  => '500',
                'label' => 'Yellow 500',
                'value' => '#ECC94B',
            ),
            array(
                'name'  => '600',
                'label' => 'Yellow 600',
                'value' => '#D69E2E',
            ),
            array(
                'name'  => '700',
                'label' => 'Yellow 700',
                'value' => '#B7791F',
            ),
            array(
                'name'  => '800',
                'label' => 'Yellow 800',
                'value' => '#975A16',
            ),
            array(
                'name'  => '900',
                'label' => 'Yellow 900',
                'value' => '#744210',
            ),
        ),

        // Green
        'green'  => array(
            array(
                'name'  => '100',
                'label' => 'Green 100',
                'value' => '#F0FFF4',
            ),
            array(
                'name'  => '200',
                'label' => 'Green 200',
                'value' => '#C6F6D5',
            ),
            array(
                'name'  => '300',
                'label' => 'Green 300',
                'value' => '#9AE6B4',
            ),
            array(
                'name'  => '400',
                'label' => 'Green 400',
                'value' => '#68D391',
            ),
            array(
                'name'  => '500',
                'label' => 'Green 500',
                'value' => '#48BB78',
            ),
            array(
                'name'  => '600',
                'label' => 'Green 600',
                'value' => '#38A169',
            ),
            array(
                'name'  => '700',
                'label' => 'Green 700',
                'value' => '#2F855A',
            ),
            array(
                'name'  => '800',
                'label' => 'Green 800',
                'value' => '#276749',
            ),
            array(
                'name'  => '900',
                'label' => 'Green 900',
                'value' => '#22543D',
            ),
        ),

        // Teal
        'teal'   => array(
            array(
                'name'  => '100',
                'label' => 'Teal 100',
                'value' => '#E6FFFA',
            ),
            array(
                'name'  => '200',
                'label' => 'Teal 200',
                'value' => '#B2F5EA',
            ),
            array(
                'name'  => '300',
                'label' => 'Teal 300',
                'value' => '#81E6D9',
            ),
            array(
                'name'  => '400',
                'label' => 'Teal 400',
                'value' => '#4FD1C5',
            ),
            array(
                'name'  => '500',
                'label' => 'Teal 500',
                'value' => '#38B2AC',
            ),
            array(
                'name'  => '600',
                'label' => 'Teal 600',
                'value' => '#319795',
            ),
            array(
                'name'  => '700',
                'label' => 'Teal 700',
                'value' => '#2C7A7B',
            ),
            array(
                'name'  => '800',
                'label' => 'Teal 800',
                'value' => '#285E61',
            ),
            array(
                'name'  => '900',
                'label' => 'Teal 900',
                'value' => '#234E52',
            ),
        ),

        // Blue
        'blue'   => array(
            array(
                'name'  => '100',
                'label' => 'Blue 100',
                'value' => '#EBF8FF',
            ),
            array(
                'name'  => '200',
                'label' => 'Blue 200',
                'value' => '#BEE3F8',
            ),
            array(
                'name'  => '300',
                'label' => 'Blue 300',
                'value' => '#90CDF4',
            ),
            array(
                'name'  => '400',
                'label' => 'Blue 400',
                'value' => '#63B3ED',
            ),
            array(
                'name'  => '500',
                'label' => 'Blue 500',
                'value' => '#4299E1',
            ),
            array(
                'name'  => '600',
                'label' => 'Blue 600',
                'value' => '#3182CE',
            ),
            array(
                'name'  => '700',
                'label' => 'Blue 700',
                'value' => '#2B6CB0',
            ),
            array(
                'name'  => '800',
                'label' => 'Blue 800',
                'value' => '#2C5282',
            ),
            array(
                'name'  => '900',
                'label' => 'Blue 900',
                'value' => '#2A4365',
            ),
        ),

        // Indigo
        'indigo' => array(
            array(
                'name'  => '100',
                'label' => 'Indigo 100',
                'value' => '#EBF4FF',
            ),
            array(
                'name'  => '200',
                'label' => 'Indigo 200',
                'value' => '#C3DAFE',
            ),
            array(
                'name'  => '300',
                'label' => 'Indigo 300',
                'value' => '#A3BFFA',
            ),
            array(
                'name'  => '400',
                'label' => 'Indigo 400',
                'value' => '#7F9CF5',
            ),
            array(
                'name'  => '500',
                'label' => 'Indigo 500',
                'value' => '#667EEA',
            ),
            array(
                'name'  => '600',
                'label' => 'Indigo 600',
                'value' => '#5A67D8',
            ),
            array(
                'name'  => '700',
                'label' => 'Indigo 700',
                'value' => '#4C51BF',
            ),
            array(
                'name'  => '800',
                'label' => 'Indigo 800',
                'value' => '#434190',
            ),
            array(
                'name'  => '900',
                'label' => 'Indigo 900',
                'value' => '#3C366B',
            ),
        ),

        // Purple
        'purple' => array(
            array(
                'name'  => '100',
                'label' => 'Purple 100',
                'value' => '#FAF5FF',
            ),
            array(
                'name'  => '200',
                'label' => 'Purple 200',
                'value' => '#E9D8FD',
            ),
            array(
                'name'  => '300',
                'label' => 'Purple 300',
                'value' => '#D6BCFA',
            ),
            array(
                'name'  => '400',
                'label' => 'Purple 400',
                'value' => '#B794F4',
            ),
            array(
                'name'  => '500',
                'label' => 'Purple 500',
                'value' => '#9F7AEA',
            ),
            array(
                'name'  => '600',
                'label' => 'Purple 600',
                'value' => '#805AD5',
            ),
            array(
                'name'  => '700',
                'label' => 'Purple 700',
                'value' => '#6B46C1',
            ),
            array(
                'name'  => '800',
                'label' => 'Purple 800',
                'value' => '#553C9A',
            ),
            array(
                'name'  => '900',
                'label' => 'Purple 900',
                'value' => '#44337A',
            ),
        ),

        // Pink
        'pink'   => array(
            array(
                'name'  => '100',
                'label' => 'Pink 100',
                'value' => '#FFF5F7',
            ),
            array(
                'name'  => '200',
                'label' => 'Pink 200',
                'value' => '#FED7E2',
            ),
            array(
                'name'  => '300',
                'label' => 'Pink 300',
                'value' => '#FBB6CE',
            ),
            array(
                'name'  => '400',
                'label' => 'Pink 400',
                'value' => '#F687B3',
            ),
            array(
                'name'  => '500',
                'label' => 'Pink 500',
                'value' => '#ED64A6',
            ),
            array(
                'name'  => '600',
                'label' => 'Pink 600',
                'value' => '#D53F8C',
            ),
            array(
                'name'  => '700',
                'label' => 'Pink 700',
                'value' => '#B83280',
            ),
            array(
                'name'  => '800',
                'label' => 'Pink 800',
                'value' => '#97266D',
            ),
            array(
                'name'  => '900',
                'label' => 'Pink 900',
                'value' => '#702459',
            ),
        ),
    );

    // Return names only
    if ( $only_names ) {
        foreach ( $colors as $key => $shades ) {
            foreach ( $shades as $shade ) {
                $final_array[] = $key . '-' . $shade['name'];
            }
        }

        return $final_array;
    }

    // Return associative array with name => label
    if ( $name_labels ) {
        foreach ( $colors as $key => $shades ) {
            foreach ( $shades as $shade ) {
                $final_array[ $key . '-' . $shade['name'] ] = $shade['label'];
            }
        }

        return $final_array;
    }

    // Return associative array with name => value
    if ( $name_values ) {
        foreach ( $colors as $key => $shades ) {
            foreach ( $shades as $shade ) {
                $final_array[ $key . '-' . $shade['name'] ] = $shade['value'];
            }
        }

        return $final_array;
    }

    // Un-formatted array
    return $colors;
}

You didn’t find the answer you were looking for?

or you think a specific topic deserve more informations?

 

Wave to bottom