Skip to content

Revise README for improved clarity and detail #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codewithdhruba01 merged 1 commit into from
Aug 25, 2026
Merged

Revise README for improved clarity and detail #9

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 61 additions & 102 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,86 +2,60 @@

![Banner](public/colorkit-cover.png)

A professional, feature-rich color picker and analysis tool built with Next.js 13, TypeScript, and Tailwind CSS. Extract colors from images, generate color palettes, analyze accessibility, and explore color theory with an elegant, animated interface.

## Key Highlights

### Homepage Experience
- **Animated Dark Gradient Background**: Beautiful gradient transitions from orange to slate to cyan
- **Capsule-Style Navigation**: Modern glassmorphism navbar with rounded full design
- **Instant Color Picker Card**: Pick colors directly from homepage with:
- Upload image mode with auto-extraction
- Manual color picker mode
- Real-time HEX and RGB display

## Tech Stack

- **Framework**: Next.js 13 (App Router)
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: Radix UI (via shadcn/ui)
- **Icons**: Lucide React
- **Notifications**: Sonner
- **State Management**: Zustand
- **Smooth Scrolling**: Lenis

## Features

### Color Picking Tools
- **Image Color Extraction**: Upload images and extract dominant color palettes
- **Click-to-Pick**: Click anywhere on an uploaded image to pick specific colors
- **Manual Color Picker**: Interactive color picker with RGB and HSL sliders
- **Native Color Input**: Browser native color picker for quick selection
ColorKit is a premium, all-in-one color management platform designed to elevate your creative workflow. Whether you're extracting the perfect shade from an image, generating harmonious palettes, or ensuring your designs meet global accessibility standards, ColorKit provides a seamless, highly visual experience.

### Color Conversion Formats
Built for designers, developers, and creative minds, it allows you to explore the depths of color theory, test real-time contrast, and manage your color assets with an elegant, animated interface that inspires creativity at every click.

#### Technical Formats
**HEX, RGB, HSL, HSV, CMYK**
## Key Features

#### Practical Formats
- CSS RGB/HSL
- Android Color Format
- Swift UIColor
- Multiple export formats
### Advanced Color Picking Tools
- **Image Color Extraction**: Upload images and instantly extract dominant color palettes using a k-means clustering algorithm.
- **Click-to-Pick**: Interactively click anywhere on an uploaded image to pick precise pixel colors.
- **Manual Color Picker**: Highly interactive visual color picker with RGB and HSL sliders.
- **Native Color Input**: Quick access to the browser's native color picker.
- **Instant Color Picker Component**: Pick colors directly from the homepage seamlessly.

### Color Variations
- **Shades**: Generate darker variations by adding black
- **Tints**: Generate lighter variations by adding white
- **Tones**: Generate muted variations by adding gray
### Comprehensive Color Formats & Conversions
- **Technical Formats**: Live conversion between **HEX, RGB, HSL, HSV, and CMYK**.
- **Practical Formats**: Support for CSS RGB/HSL, Android Color Format, Swift UIColor.
- **Easy Export**: One-click copy-to-clipboard functionality for all formats.

### Color Combinations
- **Complementary**: Colors opposite on the color wheel
- **Analogous**: Adjacent colors on the color wheel
- **Triadic**: Three evenly-spaced colors
- **Tetradic**: Four evenly-spaced colors (square)
### Accessibility & Contrast Checker
- **WCAG Compliance**: Built-in checker for WCAG AA (4.5:1) and AAA (7:1) contrast standards.
- **Real-time Preview**: Test text legibility on colored backgrounds.
- **Smart Recommendations**: Pass/fail feedback and actionable accessibility insights.
- **Color Blindness Simulator**: Simulate how colors appear to people with Protanopia, Deuteranopia, and Tritanopia.

### Contrast Checker
- WCAG AA compliance checking
- WCAG AAA compliance checking
- Test text on colored backgrounds
- Accessibility recommendations
### Color Theory & Palettes
- **Harmonious Combinations**: Generate Complementary, Analogous, Triadic, and Tetradic schemes.
- **Color Variations**: Easily generate shades (adding black), tints (adding white), and tones (adding gray).
- **Curated Palettes & Gradients**: Explore and manage beautiful pre-designed color palettes and gradients.

### Color Analysis
- Color name identification
- Hue, saturation, and lightness values
- Brightness calculation
- Temperature (warm/cool)
- Vibrancy levels
- Mood and best use recommendations

### Color Blindness Simulator
Simulate how colors appear to people with:
- Protanopia (red-blindness)
- Deuteranopia (green-blindness)
- Tritanopia (blue-blindness)

- Color name identification based on hex codes.
- Breakdown of Hue, Saturation, Lightness, and Brightness.
- Temperature analysis (warm/cool) and vibrancy levels.
- Mood associations and best use-case recommendations.

### Beautiful UI/UX
- Animated gradient backgrounds
- Smooth transitions and hover effects
- Responsive design
- Modern glassmorphism effects
- Professional color scheme
- **Modern Aesthetics**: Animated dark gradient backgrounds, modern glassmorphism navbar, and capsule-style designs.
- **Smooth Interactions**: Framer Motion powered transitions, hover effects, and Lenis smooth scrolling.
- **Responsive Layout**: Fully optimized for mobile, tablet, and desktop devices.
- **Dark Mode**: Beautiful dark theme integration.

## Tech Stack & Architecture

- **Framework**: Next.js 13+ (App Router)
- **Language**: TypeScript (Strict typing for robustness)
- **Styling**: Tailwind CSS & Tailwind-Animate
- **UI Components**: Radix UI (via shadcn/ui) for accessible primitives
- **Animations**: Framer Motion
- **State Management**: Zustand for clean, global state handling
- **Authentication**: Clerk
- **Database/Backend**: Supabase
- **Icons**: Lucide React
- **Notifications**: Sonner (Toast notifications)
- **Smooth Scrolling**: Lenis

## Getting Started

Expand All @@ -94,7 +68,7 @@ Simulate how colors appear to people with:
1. Clone the repository:
```bash
git clone https://github.com/codewithdhruba01/ColorPicker.git
cd colorpicker
cd ColorPicker
```

2. Install dependencies:
Expand All @@ -107,46 +81,31 @@ npm install
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser
4. Open [http://localhost:3000](http://localhost:3000) in your browser.

### Build for Production

```bash
npm run build
npm run start
npm start
```

## Key Features Explained

### Image Color Extraction
The app uses HTML5 Canvas API to analyze uploaded images and extract dominant colors using a k-means clustering algorithm. Users can:
- Upload any image format
- Extract up to 8 dominant colors
- Click specific pixels to pick exact colors

### Color Conversion
Comprehensive color format conversion including:
- HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK
- Accurate conversion algorithms
- Copy-to-clipboard functionality

### Accessibility Testing
Built-in WCAG compliance checker:
- Calculates contrast ratios
- Tests against AA (4.5:1) and AAA (7:1) standards
- Shows text on background previews
- Provides pass/fail recommendations

### Color Theory Tools
Generate harmonious color schemes based on color theory:
- Complementary
- Analogous
- Triadic
- Tetradic
---

## Reflections on the Project

Analyzing **ColorKit** reveals a meticulously crafted application that stands out for several reasons:

1. **Focus on Accessibility**: Beyond just picking colors, the inclusion of a robust Contrast Checker and Color Blindness Simulator demonstrates a deep understanding of modern web development standards. It encourages designers to create inclusive digital experiences.
2. **Exceptional User Experience**: The integration of `framer-motion` for micro-interactions and `lenis` for smooth scrolling creates a highly polished, "premium" feel. The glassmorphism UI and animated gradient backgrounds make the app visually stunning without compromising performance.
3. **Solid Technical Foundation**: Utilizing Next.js App Router along with TypeScript and Zustand ensures that the application is scalable, maintainable, and type-safe. The modular component structure (`components/color-picker`, `components/home`, etc.) reflects excellent separation of concerns.
4. **Comprehensive Tooling**: Integrating advanced algorithms like K-means clustering for image color extraction directly in the browser using the HTML5 Canvas API showcases a high level of technical competency.
5. **Modern Authentication & Data**: The groundwork laid with `Clerk` and `Supabase` indicates that the app is built to be a fully-fledged SaaS product, capable of saving user preferences, palettes, and historical data.

ColorKit is not just a utility; it is a comprehensive suite for color management that perfectly balances aesthetic appeal with technical depth.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.
Contributions are welcome! Please feel free to submit a Pull Request or open an Issue for any bugs or feature requests.

## License

Expand Down
Loading