Add 50

Author: unchidev

index.html

@@ -213,6 +213,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
   <div class="flex">
     <!-- red -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="bg-labredlg-50 hover:bg-labredlg-100 text-white py-2 px-4 rounded">Red: 50</button>
       <button class="bg-labredlg-100 hover:bg-labredlg-200 text-white py-2 px-4 rounded">Red: 100</button>
       <button class="bg-labredlg-200 hover:bg-labredlg-300 text-white py-2 px-4 rounded">Red: 200</button>
       <button class="bg-labredlg-300 hover:bg-labredlg-400 text-white py-2 px-4 rounded">Red: 300</button>
@@ -226,6 +227,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- pink -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="bg-labpinklg-50 hover:bg-labpinklg-100 text-white py-2 px-4 rounded">Pink: 50</button>
       <button class="bg-labpinklg-100 hover:bg-labpinklg-200 text-white py-2 px-4 rounded">Pink: 100</button>
       <button class="bg-labpinklg-200 hover:bg-labpinklg-300 text-white py-2 px-4 rounded">Pink: 200</button>
       <button class="bg-labpinklg-300 hover:bg-labpinklg-400 text-white py-2 px-4 rounded">Pink: 300</button>
@@ -239,6 +241,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- yellow -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="bg-labyellowlg-50 hover:bg-labyellowlg-100 text-white py-2 px-4 rounded">Yello: 50</button>
       <button class="bg-labyellowlg-100 hover:bg-labyellowlg-200 text-white py-2 px-4 rounded">Yello: 100</button>
       <button class="bg-labyellowlg-200 hover:bg-labyellowlg-300 text-white py-2 px-4 rounded">Yello: 200</button>
       <button class="bg-labyellowlg-300 hover:bg-labyellowlg-400 text-white py-2 px-4 rounded">Yello: 300</button>
@@ -252,6 +255,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- green -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="bg-labgreenlg-50 hover:bg-labgreenlg-100 text-white py-2 px-4 rounded">Green: 50</button>
       <button class="bg-labgreenlg-100 hover:bg-labgreenlg-200 text-white py-2 px-4 rounded">Green: 100</button>
       <button class="bg-labgreenlg-200 hover:bg-labgreenlg-300 text-white py-2 px-4 rounded">Green: 200</button>
       <button class="bg-labgreenlg-300 hover:bg-labgreenlg-400 text-white py-2 px-4 rounded">Green: 300</button>
@@ -265,6 +269,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- sky -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="bg-labskylg-50 hover:bg-labskylg-100 text-white py-2 px-4 rounded">Sky: 50</button>
       <button class="bg-labskylg-100 hover:bg-labskylg-200 text-white py-2 px-4 rounded">Sky: 100</button>
       <button class="bg-labskylg-200 hover:bg-labskylg-300 text-white py-2 px-4 rounded">Sky: 200</button>
       <button class="bg-labskylg-300 hover:bg-labskylg-400 text-white py-2 px-4 rounded">Sky: 300</button>
@@ -278,6 +283,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- blue -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="bg-labbluelg-50 hover:bg-labbluelg-100 text-white py-2 px-4 rounded">Blue: 50</button>
       <button class="bg-labbluelg-100 hover:bg-labbluelg-200 text-white py-2 px-4 rounded">Blue: 100</button>
       <button class="bg-labbluelg-200 hover:bg-labbluelg-300 text-white py-2 px-4 rounded">Blue: 200</button>
       <button class="bg-labbluelg-300 hover:bg-labbluelg-400 text-white py-2 px-4 rounded">Blue: 300</button>
@@ -291,6 +297,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- purple -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="bg-labpurplelg-50 hover:bg-labpurplelg-100 text-white py-2 px-4 rounded">Purple: 50</button>
       <button class="bg-labpurplelg-100 hover:bg-labpurplelg-200 text-white py-2 px-4 rounded">Purple: 100</button>
       <button class="bg-labpurplelg-200 hover:bg-labpurplelg-300 text-white py-2 px-4 rounded">Purple: 200</button>
       <button class="bg-labpurplelg-300 hover:bg-labpurplelg-400 text-white py-2 px-4 rounded">Purple: 300</button>
@@ -304,6 +311,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- gray -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="bg-labgraylg-50 hover:bg-labgraylg-100 text-white py-2 px-4 rounded">Gray: 50</button>
       <button class="bg-labgraylg-100 hover:bg-labgraylg-200 text-white py-2 px-4 rounded">Gray: 100</button>
       <button class="bg-labgraylg-200 hover:bg-labgraylg-300 text-white py-2 px-4 rounded">Gray: 200</button>
       <button class="bg-labgraylg-300 hover:bg-labgraylg-400 text-white py-2 px-4 rounded">Gray: 300</button>
@@ -319,6 +327,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
   <div class="flex">
     <!-- red -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="border border-labred-50 text-labred-50 hover:text-white hover:bg-labred-50 py-2 px-4 rounded">Red: 50</button>
       <button class="border border-labred-100 text-labred-100 hover:text-white hover:bg-labred-100 py-2 px-4 rounded">Red: 100</button>
       <button class="border border-labred-200 text-labred-200 hover:text-white hover:bg-labred-200 py-2 px-4 rounded">Red: 200</button>
       <button class="border border-labred-300 text-labred-300 hover:text-white hover:bg-labred-300 py-2 px-4 rounded">Red: 300</button>
@@ -332,6 +341,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- pink -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="border border-labpink-50 text-labpink-50 hover:text-white hover:bg-labpink-50 py-2 px-4 rounded">Pink: 50</button>
       <button class="border border-labpink-100 text-labpink-100 hover:text-white hover:bg-labpink-100 py-2 px-4 rounded">Pink: 100</button>
       <button class="border border-labpink-200 text-labpink-200 hover:text-white hover:bg-labpink-200 py-2 px-4 rounded">Pink: 200</button>
       <button class="border border-labpink-300 text-labpink-300 hover:text-white hover:bg-labpink-300 py-2 px-4 rounded">Pink: 300</button>
@@ -345,6 +355,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- yellow -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="border border-labyellow-50 text-labyellow-50 hover:text-white hover:bg-labyellow-50 py-2 px-4 rounded">Yellow: 50</button>
       <button class="border border-labyellow-100 text-labyellow-100 hover:text-white hover:bg-labyellow-100 py-2 px-4 rounded">Yellow: 100</button>
       <button class="border border-labyellow-200 text-labyellow-200 hover:text-white hover:bg-labyellow-200 py-2 px-4 rounded">Yellow: 200</button>
       <button class="border border-labyellow-300 text-labyellow-300 hover:text-white hover:bg-labyellow-300 py-2 px-4 rounded">Yellow: 300</button>
@@ -358,6 +369,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- green -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="border border-labgreen-50 text-labgreen-50 hover:text-white hover:bg-labgreen-50 py-2 px-4 rounded">Green: 50</button>
       <button class="border border-labgreen-100 text-labgreen-100 hover:text-white hover:bg-labgreen-100 py-2 px-4 rounded">Green: 100</button>
       <button class="border border-labgreen-200 text-labgreen-200 hover:text-white hover:bg-labgreen-200 py-2 px-4 rounded">Green: 200</button>
       <button class="border border-labgreen-300 text-labgreen-300 hover:text-white hover:bg-labgreen-300 py-2 px-4 rounded">Green: 300</button>
@@ -371,6 +383,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- sky -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="border border-labsky-50 text-labsky-50 hover:text-white hover:bg-labsky-50 py-2 px-4 rounded">Sky: 50</button>
       <button class="border border-labsky-100 text-labsky-100 hover:text-white hover:bg-labsky-100 py-2 px-4 rounded">Sky: 100</button>
       <button class="border border-labsky-200 text-labsky-200 hover:text-white hover:bg-labsky-200 py-2 px-4 rounded">Sky: 200</button>
       <button class="border border-labsky-300 text-labsky-300 hover:text-white hover:bg-labsky-300 py-2 px-4 rounded">Sky: 300</button>
@@ -384,6 +397,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- blue -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="border border-labblue-50 text-labblue-50 hover:text-white hover:bg-labblue-50 py-2 px-4 rounded">Blue: 50</button>
       <button class="border border-labblue-100 text-labblue-100 hover:text-white hover:bg-labblue-100 py-2 px-4 rounded">Blue: 100</button>
       <button class="border border-labblue-200 text-labblue-200 hover:text-white hover:bg-labblue-200 py-2 px-4 rounded">Blue: 200</button>
       <button class="border border-labblue-300 text-labblue-300 hover:text-white hover:bg-labblue-300 py-2 px-4 rounded">Blue: 300</button>
@@ -397,6 +411,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- purple -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="border border-labpurple-50 text-labpurple-50 hover:text-white hover:bg-labpurple-50 py-2 px-4 rounded">Purple: 50</button>
       <button class="border border-labpurple-100 text-labpurple-100 hover:text-white hover:bg-labpurple-100 py-2 px-4 rounded">Purple: 100</button>
       <button class="border border-labpurple-200 text-labpurple-200 hover:text-white hover:bg-labpurple-200 py-2 px-4 rounded">Purple: 200</button>
       <button class="border border-labpurple-300 text-labpurple-300 hover:text-white hover:bg-labpurple-300 py-2 px-4 rounded">Purple: 300</button>
@@ -410,6 +425,7 @@ <h1 class="text-3xl p-4  text-labgray-900">Tailwind + CIELAB </h1>
 
     <!-- gray -->
     <div class="flex flex-col space-y-2 p-4">
+      <button class="border border-labgray-50 text-labgray-50 hover:text-white hover:bg-labgray-50 py-2 px-4 rounded">Gray: 50</button>
       <button class="border border-labgray-100 text-labgray-100 hover:text-white hover:bg-labgray-100 py-2 px-4 rounded">Gray: 100</button>
       <button class="border border-labgray-200 text-labgray-200 hover:text-white hover:bg-labgray-200 py-2 px-4 rounded">Gray: 200</button>
       <button class="border border-labgray-300 text-labgray-300 hover:text-white hover:bg-labgray-300 py-2 px-4 rounded">Gray: 300</button>