JavaScript
const colors = [
{
name: 'Tailwind 4 Red 50',
color: 'oklch(.971 .013 17.38)',
},
{
name: 'Tailwind 4 Red 100',
color: 'oklch(.936 .032 17.717)',
},
{
name: 'Tailwind 4 Red 200',
color: 'oklch(.885 .062 18.334)',
},
{
name: 'Tailwind 4 Red 300',
color: 'oklch(.808 .114 19.571)',
},
{
name: 'Tailwind 4 Red 400',
color: 'oklch(.704 .191 22.216)',
},
{
name: 'Tailwind 4 Red 500',
color: 'oklch(.637 .237 25.331)',
},
{
name: 'Tailwind 4 Red 600',
color: 'oklch(.577 .245 27.325)',
},
{
name: 'Tailwind 4 Red 700',
color: 'oklch(.505 .213 27.518)',
},
{
name: 'Tailwind 4 Red 800',
color: 'oklch(.444 .177 26.899)',
},
{
name: 'Tailwind 4 Red 900',
color: 'oklch(.396 .141 25.723)',
},
{
name: 'Tailwind 4 Red 950',
color: 'oklch(.258 .092 26.042)',
},
{
name: 'Tailwind 4 Orange 50',
color: 'oklch(.98 .016 73.684)',
},
{
name: 'Tailwind 4 Orange 100',
color: 'oklch(.954 .038 75.164)',
},
{
name: 'Tailwind 4 Orange 200',
color: 'oklch(.901 .076 70.697)',
},
{
name: 'Tailwind 4 Orange 300',
color: 'oklch(.837 .128 66.29)',
},
{
name: 'Tailwind 4 Orange 400',
color: 'oklch(.75 .183 55.934)',
},
{
name: 'Tailwind 4 Orange 500',
color: 'oklch(.705 .213 47.604)',
},
{
name: 'Tailwind 4 Orange 600',
color: 'oklch(.646 .222 41.116)',
},
{
name: 'Tailwind 4 Orange 700',
color: 'oklch(.553 .195 38.402)',
},
{
name: 'Tailwind 4 Orange 800',
color: 'oklch(.47 .157 37.304)',
},
{
name: 'Tailwind 4 Orange 900',
color: 'oklch(.408 .123 38.172)',
},
{
name: 'Tailwind 4 Orange 950',
color: 'oklch(.266 .079 36.259)',
},
{
name: 'Tailwind 4 Amber 50',
color: 'oklch(.987 .022 95.277)',
},
{
name: 'Tailwind 4 Amber 100',
color: 'oklch(.962 .059 95.617)',
},
{
name: 'Tailwind 4 Amber 200',
color:...