Pro Palette Picker

Pro Palette Picker is a responsive, web-based tool designed for designers and developers to rapidly generate, visualize, and manage color schemes. It combines an intuitive user interface with algorithmic generation to create cohesive 5-color palettes tailored to specific aesthetic needs.

---

🚀 Key Features

1. Advanced Color Generation Modes

The application supports multiple algorithms for color generation to suit different design moods:

• Random Mode: Generates colors across the full RGB spectrum (0-255).
• Pastel Mode: Constrains RGB values to the upper range (127-255) to produce soft, light, and desaturated tones.
• Dark Mode: Constrains RGB values to the lower range (10-90) to produce deep, rich, and high-contrast dark backgrounds.

2. Intelligent Contrast Adaptation (Accessibility)

To ensure readability, the application dynamically adjusts the text color (Black or White) of labels and buttons based on the background color's brightness. This is calculated using the relative luminance formula, ensuring WCAG-compliant contrast levels.

3. Workflow Tools

• Color Locking: Users can "lock" specific colors they like (using the 🔒 icon) preventing them from changing during the next generation cycle.
• One-Click Copy: Clicking on the Hex/RGB code instantly copies the value to the clipboard.
• Custom Labels: Input fields allow users to assign semantic names (e.g., "Primary," "Hero Background") to colors.

4. Interactive & Responsive

• Animation Mode: An automated mode that cycles through new palettes every 1.5 seconds for rapid brainstorming.
• Keyboard Shortcuts: Press Spacebar to instantly generate a new palette.
• Mobile-First Design: The layout automatically adjusts from a horizontal row layout to a vertical stack on devices smaller than 768px.

---

🧠 Core Logic & Algorithms

Luminance Calculation

The application determines the perceived brightness of a color to decide whether to overlay white or black text. It uses the standard coefficients for sRGB:

// Function: setTextColor in script.js
const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;

if (luminance > 128) {
    // Bright background -> Use Black Text
    text.style.color = 'black';
} else {
    // Dark background -> Use White Text
    text.style.color = 'white';
}

Constraint-Based Generation

The generator modifies the random range based on the selected mode:

• Pastel Logic: Offsets the random value by +127 to ensure high brightness.

  r = Math.floor(Math.random() * 128) + 127;

• Dark Logic: Limits the random multiplier to 80 and adds a small base (10) to avoid pure black.

  r = Math.floor(Math.random() * 80) + 10;

  

🛠️ Technical Stack

• Frontend Structure: HTML5
• Styling: CSS3 (Flexbox for layout, Media Queries for responsiveness, Transitions for smooth UI updates)
• Logic: Vanilla JavaScript (ES6+)
  • DOM Manipulation (document.querySelectorAll, classList)
  • Clipboard API (navigator.clipboard.writeText)
  • Event Handling (keydown, click)
• Icons: Font Awesome 6.4.0

📖 Usage Guide

1. Generate: Click the "Generate" button or press Spacebar.
2. Mode: Select "Pastel", "Dark", or "Random" from the dropdown to guide the algorithm.
3. Lock: Click the open lock icon to secure a color you want to keep.
4. Copy: Click the RGB text to copy the color code.
5. Animate: Click "Start Animation" to see a slideshow of palettes.

👤 Author

Himmat Mundhe