Home Plugin documentation Hooks and functions Filters pip/tailwind/native_colors
pip/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.
This filter allows you to customize TailwindCSS Native colors dropdown
<?php
add_filter( 'pip/tailwind/native_colors', function( $colors ) {
return array(
// Gray
'gray' => array(
array(
'name' => '50',
'label' => __( 'Gray 50', 'pilopress' ),
'value' => '#f9fafb',
),
array(
'name' => '100',
'label' => __( 'Gray 100', 'pilopress' ),
'value' => '#f3f4f6',
),
array(
'name' => '200',
'label' => __( 'Gray 200', 'pilopress' ),
'value' => '#e5e7eb',
),
array(
'name' => '300',
'label' => __( 'Gray 300', 'pilopress' ),
'value' => '#d1d5db',
),
array(
'name' => '400',
'label' => __( 'Gray 400', 'pilopress' ),
'value' => '#9ca3af',
),
array(
'name' => '500',
'label' => __( 'Gray 500', 'pilopress' ),
'value' => '#6b7280',
),
array(
'name' => '600',
'label' => __( 'Gray 600', 'pilopress' ),
'value' => '#4b5563',
),
array(
'name' => '700',
'label' => __( 'Gray 700', 'pilopress' ),
'value' => '#374151',
),
array(
'name' => '800',
'label' => __( 'Gray 800', 'pilopress' ),
'value' => '#1f2937',
),
array(
'name' => '900',
'label' => __( 'Gray 900', 'pilopress' ),
'value' => '#111827',
),
),
// Red
'red' => array(
array(
'name' => '50',
'label' => __( 'Red 50', 'pilopress' ),
'value' => '#fef2f2',
),
array(
'name' => '100',
'label' => __( 'Red 100', 'pilopress' ),
'value' => '#fee2e2',
),
array(
'name' => '200',
'label' => __( 'Red 200', 'pilopress' ),
'value' => '#fecaca',
),
array(
'name' => '300',
'label' => __( 'Red 300', 'pilopress' ),
'value' => '#fca5a5',
),
array(
'name' => '400',
'label' => __( 'Red 400', 'pilopress' ),
'value' => '#f87171',
),
array(
'name' => '500',
'label' => __( 'Red 500', 'pilopress' ),
'value' => '#ef4444',
),
array(
'name' => '600',
'label' => __( 'Red 600', 'pilopress' ),
'value' => '#dc2626',
),
array(
'name' => '700',
'label' => __( 'Red 700', 'pilopress' ),
'value' => '#b91c1c',
),
array(
'name' => '800',
'label' => __( 'Red 800', 'pilopress' ),
'value' => '#991b1b',
),
array(
'name' => '900',
'label' => __( 'Red 900', 'pilopress' ),
'value' => '#7f1d1d',
),
),
// Yellow
'yellow' => array(
array(
'name' => '50',
'label' => __( 'Yellow 50', 'pilopress' ),
'value' => '#fffbeb',
),
array(
'name' => '100',
'label' => __( 'Yellow 100', 'pilopress' ),
'value' => '#fef3c7',
),
array(
'name' => '200',
'label' => __( 'Yellow 200', 'pilopress' ),
'value' => '#fde68a',
),
array(
'name' => '300',
'label' => __( 'Yellow 300', 'pilopress' ),
'value' => '#fcd34d',
),
array(
'name' => '400',
'label' => __( 'Yellow 400', 'pilopress' ),
'value' => '#fbbf24',
),
array(
'name' => '500',
'label' => __( 'Yellow 500', 'pilopress' ),
'value' => '#f59e0b',
),
array(
'name' => '600',
'label' => __( 'Yellow 600', 'pilopress' ),
'value' => '#d97706',
),
array(
'name' => '700',
'label' => __( 'Yellow 700', 'pilopress' ),
'value' => '#b45309',
),
array(
'name' => '800',
'label' => __( 'Yellow 800', 'pilopress' ),
'value' => '#92400e',
),
array(
'name' => '900',
'label' => __( 'Yellow 900', 'pilopress' ),
'value' => '#78350f',
),
),
// Green
'green' => array(
array(
'name' => '50',
'label' => __( 'Green 50', 'pilopress' ),
'value' => '#ecfdf5',
),
array(
'name' => '100',
'label' => __( 'Green 100', 'pilopress' ),
'value' => '#d1fae5',
),
array(
'name' => '200',
'label' => __( 'Green 200', 'pilopress' ),
'value' => '#a7f3d0',
),
array(
'name' => '300',
'label' => __( 'Green 300', 'pilopress' ),
'value' => '#ee7b7',
),
array(
'name' => '400',
'label' => __( 'Green 400', 'pilopress' ),
'value' => '#34d399',
),
array(
'name' => '500',
'label' => __( 'Green 500', 'pilopress' ),
'value' => '#10b981',
),
array(
'name' => '600',
'label' => __( 'Green 600', 'pilopress' ),
'value' => '#059669',
),
array(
'name' => '700',
'label' => __( 'Green 700', 'pilopress' ),
'value' => '#047857',
),
array(
'name' => '800',
'label' => __( 'Green 800', 'pilopress' ),
'value' => '#065f46',
),
array(
'name' => '900',
'label' => __( 'Green 900', 'pilopress' ),
'value' => '#064e3b',
),
),
// Blue
'blue' => array(
array(
'name' => '50',
'label' => __( 'Blue 50', 'pilopress' ),
'value' => '#eff6ff',
),
array(
'name' => '100',
'label' => __( 'Blue 100', 'pilopress' ),
'value' => '#dbeafe',
),
array(
'name' => '200',
'label' => __( 'Blue 200', 'pilopress' ),
'value' => '#bfdbfe',
),
array(
'name' => '300',
'label' => __( 'Blue 300', 'pilopress' ),
'value' => '#93c5fd',
),
array(
'name' => '400',
'label' => __( 'Blue 400', 'pilopress' ),
'value' => '#60a5fa',
),
array(
'name' => '500',
'label' => __( 'Blue 500', 'pilopress' ),
'value' => '#3b82f6',
),
array(
'name' => '600',
'label' => __( 'Blue 600', 'pilopress' ),
'value' => '#2563eb',
),
array(
'name' => '700',
'label' => __( 'Blue 700', 'pilopress' ),
'value' => '#1d4ed8',
),
array(
'name' => '800',
'label' => __( 'Blue 800', 'pilopress' ),
'value' => '#1e40af',
),
array(
'name' => '900',
'label' => __( 'Blue 900', 'pilopress' ),
'value' => '#1e3a8a',
),
),
// Indigo
'indigo' => array(
array(
'name' => '50',
'label' => __( 'Indigo 50', 'pilopress' ),
'value' => '#eef2ff',
),
array(
'name' => '100',
'label' => __( 'Indigo 100', 'pilopress' ),
'value' => '#e0e7ff',
),
array(
'name' => '200',
'label' => __( 'Indigo 200', 'pilopress' ),
'value' => '#c7d2fe',
),
array(
'name' => '300',
'label' => __( 'Indigo 300', 'pilopress' ),
'value' => '#a5b4fc',
),
array(
'name' => '400',
'label' => __( 'Indigo 400', 'pilopress' ),
'value' => '#818cf8',
),
array(
'name' => '500',
'label' => __( 'Indigo 500', 'pilopress' ),
'value' => '#6366f1',
),
array(
'name' => '600',
'label' => __( 'Indigo 600', 'pilopress' ),
'value' => '#4f46e5',
),
array(
'name' => '700',
'label' => __( 'Indigo 700', 'pilopress' ),
'value' => '#4338ca',
),
array(
'name' => '800',
'label' => __( 'Indigo 800', 'pilopress' ),
'value' => '#3730a3',
),
array(
'name' => '900',
'label' => __( 'Indigo 900', 'pilopress' ),
'value' => '#312e81',
),
),
// Purple
'purple' => array(
array(
'name' => '50',
'label' => __( 'Purple 50', 'pilopress' ),
'value' => '#f5f3ff',
),
array(
'name' => '100',
'label' => __( 'Purple 100', 'pilopress' ),
'value' => '#ede9fe',
),
array(
'name' => '200',
'label' => __( 'Purple 200', 'pilopress' ),
'value' => '#ddd6fe',
),
array(
'name' => '300',
'label' => __( 'Purple 300', 'pilopress' ),
'value' => '#c4b5fd',
),
array(
'name' => '400',
'label' => __( 'Purple 400', 'pilopress' ),
'value' => '#a78bfa',
),
array(
'name' => '500',
'label' => __( 'Purple 500', 'pilopress' ),
'value' => '#8b5cf6',
),
array(
'name' => '600',
'label' => __( 'Purple 600', 'pilopress' ),
'value' => '#7c3aed',
),
array(
'name' => '700',
'label' => __( 'Purple 700', 'pilopress' ),
'value' => '#6d28d9',
),
array(
'name' => '800',
'label' => __( 'Purple 800', 'pilopress' ),
'value' => '#5b21b6',
),
array(
'name' => '900',
'label' => __( 'Purple 900', 'pilopress' ),
'value' => '#4c1d95',
),
),
// Pink
'pink' => array(
array(
'name' => '50',
'label' => __( 'Pink 50', 'pilopress' ),
'value' => '#fdf2f8',
),
array(
'name' => '100',
'label' => __( 'Pink 100', 'pilopress' ),
'value' => '#fce7f3',
),
array(
'name' => '200',
'label' => __( 'Pink 200', 'pilopress' ),
'value' => '#fbcfe8',
),
array(
'name' => '300',
'label' => __( 'Pink 300', 'pilopress' ),
'value' => '#f9a8d4',
),
array(
'name' => '400',
'label' => __( 'Pink 400', 'pilopress' ),
'value' => '#f472b6',
),
array(
'name' => '500',
'label' => __( 'Pink 500', 'pilopress' ),
'value' => '#ec4899',
),
array(
'name' => '600',
'label' => __( 'Pink 600', 'pilopress' ),
'value' => '#db2777',
),
array(
'name' => '700',
'label' => __( 'Pink 700', 'pilopress' ),
'value' => '#be185d',
),
array(
'name' => '800',
'label' => __( 'Pink 800', 'pilopress' ),
'value' => '#9d174d',
),
array(
'name' => '900',
'label' => __( 'Pink 900', 'pilopress' ),
'value' => '#831843',
),
),
);
} );
Our home port
15 Rue Cavenne, 69007 Lyon
And from everywhere in the world thanks to Hangout and Skype !
Useful links