Site: https://mosestyle.github.io/color-studio/

Color Studio

An interactive color palette generator built with React. Generate balanced color palettes, search by color name or hex code, filter by categories, and more.

Features

Color Palette Generator

• Five equal-width color columns spanning the full height of the screen
• Spacebar triggers random color palette generation
• Color hex codes and names displayed at the bottom of each column
• Balanced palette generation with 3 dark colors, 1 neutral, and 1 accent color

Lock System

• Lock buttons at the top of each column
• Locked colors remain unchanged when generating new palettes
• Adaptive icon colors based on contrast ratios
• Semi-transparent background for better visibility

Color Interaction

• On-hover control panels for each color column
• Copy current color functionality
• Color shades display showing 9 variations (darker to lighter)
• Click on any shade to copy its hex value

Search & Filtering

• Search by color name or hex code
• Filter by predefined categories (Nature, Technology, Food, Fashion, Art)
• Real-time results as you type
• Clear search option with one click

Getting Started

Prerequisites

• Node.js (v14.0.0 or higher)
• npm (v6.0.0 or higher)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/color-studio.git
cd color-studio