Color Studio Pro

A modern, all-in-one suite for color generation, contrast checking, and design inspiration.

✨ Features

Color Studio Pro is designed to streamline your color workflow with professional tools, focusing heavily on accessibility and practical use cases.

🎨 Color Generator

• Generate a full 10-step shade palette (50 to 900) from any base HEX color.
• View quick color harmonies (Complementary, Analogous, Triadic, Split).
• Export the generated palette as CSS variables, Tailwind CSS configuration, SCSS variables, or JSON.

✅ Accessibility & Checker

• Live Contrast Checker for any Foreground (Text) and Background color combination.
• Instantly see WCAG compliance for AA (Normal & Large Text) and AAA (Normal & Large Text).
• Smart Suggestions propose accessible color pairs if your current selection fails contrast checks.
• Color Blindness Simulation (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) to test your palette's visual impact.

🧪 Advanced Tools

• Color Mixer: Interpolate seamlessly between two colors across multiple steps.
• Gradient Builder: Create linear gradients with customizable start/end colors and angles, with instant CSS code copying.
• Design Inspiration: Curated graphic design palettes (e.g., Monochromatic, Pastel, Neon) based on your current base color.
• Color Details Modal: See detailed color information in HEX, RGB, HSL, and CMYK formats.

🚀 Tech Stack

This project is built using modern front-end technologies:

• Framework: React
• Build Tool: Vite
• Styling: Tailwind CSS v4 with @tailwindcss/vite plugin.
• Icons: Lucide React
• Deployment: GitHub Pages

⚙️ Installation and Setup

Prerequisites

• Node.js (version 20.19.0 or higher, as required by Vite v7)
• npm (or yarn/pnpm)

Steps

1. Clone the repository:

   git clone [https://github.com/ranjan-builds/color-studio.git](https://github.com/ranjan-builds/color-studio.git)
   cd color-studio

2. Install dependencies:

   npm install

3. Run in development mode:

   npm run dev

   The application will be available at the address shown in your terminal.

📦 Building and Deployment

The project is configured to deploy to GitHub Pages under the specified homepage.

1. Build the production bundle:

   npm run build

2. Deploy to GitHub Pages:

   npm run deploy

   Note: The vite.config.js sets the base: '/color-studio/' for deployment to the ranjan-builds.github.io/color-studio path.

👤 Developed by

Ranjan Builds - GitHub Profile

---

This README was generated based on the project's source code and configuration files.