Add Color Utility tool with conversion + picker tabs

README.md

@@ -4,7 +4,7 @@ A comprehensive suite of developer tools built with React, Vite, and TypeScript.
 
 ## Features
 
-QuickDevTools provides 10 essential developer tools in a single, fast, and privacy-focused application.
+QuickDevTools provides 11 essential developer tools in a single, fast, and privacy-focused application.
 
 ### 1. Config Formatter
 - **Auto-detection**: Automatically detects JSON or YAML format
@@ -30,6 +30,13 @@ QuickDevTools provides 10 essential developer tools in a single, fast, and priva
   - `Esc` to edit
 - **GitHub-style**: Matches GitHub's diff visualization
 
+### 4. Image Beautifier
+- **Background Options**: Solid colors or gradients
+- **Customizable**: Border radius, padding, gradient rotation
+- **Live Preview**: Real-time preview of beautified images
+- **Download**: Export beautified images as PNG
+- **Perfect for Social Media**: Ideal for sharing screenshots on X, LinkedIn, etc.
+
 ### 5. Regex Checker
 - **Pattern Testing**: Test regular expressions against any text
 - **Flag Support**: All regex flags (g, i, m, s, u, y) with descriptions
@@ -72,12 +79,10 @@ QuickDevTools provides 10 essential developer tools in a single, fast, and priva
 - **Validation**: Validate URL format and structure
 - **Visual Breakdown**: Clear visual representation of URL parts
 
-### 11. Image Beautifier
-- **Background Options**: Solid colors or gradients
-- **Customizable**: Border radius, padding, gradient rotation
-- **Live Preview**: Real-time preview of beautified images
-- **Download**: Export beautified images as PNG
-- **Perfect for Social Media**: Ideal for sharing screenshots on X, LinkedIn, etc.
+### 11. Color Utility
+- **Automatic Conversion**: Paste HEX, RGB(A), or HSL(A) and instantly see all formats
+- **Color Picker**: Visually pick a color and preview the converted values
+- **Copy Ready**: One-click copy for each supported format
 
 ## Tech Stack
 
@@ -160,6 +165,7 @@ The built files will be in the `dist` directory.
 - `Ctrl/Cmd + 8`: Switch to UUID/Hash Generator
 - `Ctrl/Cmd + 9`: Switch to URL Inspector
 - `Ctrl/Cmd + 0`: Switch to Image Beautifier
+- Color Utility: Accessible from the sidebar (no keyboard shortcut since Ctrl/Cmd + 0-9 are already assigned)
 - `Ctrl + Enter` (Git Diff): Compare texts
 - `Esc` (Git Diff): Return to edit mode
 
@@ -193,6 +199,8 @@ quickdevtools/
 │   │   │   └── UrlInspector.tsx
 │   │   ├── ImageBeautifier/      # Screenshot beautification tool
 │   │   │   └── ImageBeautifier.tsx
+│   │   ├── ColorUtility/         # Color converter and picker tool
+│   │   │   └── ColorUtility.tsx
 │   │   └── Sidebar/              # Navigation sidebar component
 │   │       └── Sidebar.tsx
 │   ├── context/                  # React context providers

src/App.tsx

@@ -11,6 +11,7 @@ import { TimestampConverter } from './components/TimestampConverter/TimestampCon
 import { UuidHashGenerator } from './components/UuidHashGenerator/UuidHashGenerator';
 import { TextCaseConverter } from './components/TextCaseConverter/TextCaseConverter';
 import { UrlInspector } from './components/UrlInspector/UrlInspector';
+import { ColorUtility } from './components/ColorUtility/ColorUtility';
 import type { ToolType } from './types';
 
 function AppContent() {
@@ -61,6 +62,8 @@ function AppContent() {
         return <TextCaseConverter />;
       case 'url':
         return <UrlInspector />;
+      case 'color':
+        return <ColorUtility />;
       default:
         return <ConfigFormatter />;
     }