feat: add Pastel color toolkit and update grid layout

- Added Pastel tool card with color palette icon
- Updated grid to 3-column layout (responsive)
- Removed "More tools coming soon..." message
- Updated README with Pastel tool description

Pastel features:
- Color manipulation and format conversion
- Palette generation with multiple harmony types
- Accessibility testing (WCAG, color blindness)
- Supports hex, RGB, HSL, Lab, OkLab, and more

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

README.md

@@ -133,6 +133,7 @@ Tailwind CSS 4 uses a new CSS-first configuration approach:
 
 - **Vert** - Privacy-focused file converter (images, audio, documents)
 - **Paint** - Browser-based image editor
+- **Pastel** - Modern color manipulation toolkit with palette generation and accessibility testing
 
 ## CI/CD Pipeline
 

components/ToolsGrid.tsx

@@ -26,6 +26,20 @@ const tools = [
       </svg>
     ),
   },
+  {
+    title: 'Pastel',
+    description: 'Modern color manipulation toolkit with palette generation, accessibility testing, and format conversion. Supports hex, RGB, HSL, Lab, and more.',
+    url: 'https://pastel.kit.pivoine.art',
+    gradient: 'gradient-purple-blue',
+    icon: (
+      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+        <circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
+        <circle cx="15" cy="8.5" r="1.5" fill="currentColor" />
+        <circle cx="8.5" cy="15" r="1.5" fill="currentColor" />
+      </svg>
+    ),
+  },
 ];
 
 export default function ToolsGrid() {
@@ -49,7 +63,7 @@ export default function ToolsGrid() {
         </motion.div>
 
         {/* Tools grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {tools.map((tool, index) => (
             <ToolCard
               key={tool.title}
@@ -62,19 +76,6 @@ export default function ToolsGrid() {
             />
           ))}
         </div>
-
-        {/* Coming soon hint */}
-        <motion.div
-          className="mt-16 text-center"
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6, delay: 0.4 }}
-        >
-          <p className="text-gray-500 text-sm">
-            More tools coming soon...
-          </p>
-        </motion.div>
       </div>
     </section>
   );