Basic Controls

Master the fundamental tools for creating perfect color palettes using the main toolbar:

• HUE: Adjust the base color's position on the color wheel (0-360°), forming the foundation of your palette.
• Saturation: Control the color intensity (0-100%), ranging from a muted grayscale to a fully vibrant color.
• Lightness: Set the brightness level (0-100%), from pure black to pure white, creating tints and shades.
• Variation: Determine how much the other colors in the palette differ from the base color.

Color Block Controls

Interact with each color block for precise, individual adjustments:

• Drag Horizontally on a color block to adjust its saturation.
• Drag Vertically to change its lightness.
• Click HEX/RGB/HSL values to instantly copy them to your clipboard.
• Use Arrow Buttons (◀/▶ or ▲/▼) to rearrange the color's position within the palette.
• Double-Click any color block to set it as the new base color for the entire palette.
• Click the Lock Icon to prevent a color from being changed by sliders or generation (not available on mobile).

Advanced Variations

Fine-tune your entire palette with the advanced adjustment panel.
(Note: This feature is disabled on mobile devices to optimize performance.)

• Shade: Adjust the darkness of all colors by adding black, creating deeper tones.
• Temperature: Change the cool (blue) or warm (red) feel of the entire palette.
• Luminance: Control the brightness of all colors without changing their hue or saturation.
• Contrast: Enhance or reduce the difference between the colors in your palette.
• Blindness Type: Simulate how your palette appears to people with different types of color vision deficiency.
  • Protanopia: Red-blindness. Reds appear dark; confusion between reds, greens, and yellows.
  • Deuteranopia: Green-blindness. Greens are confused with reds; similar to Protanopia.
  • Tritanopia: Blue-yellow blindness. Blues appear greener, yellows seem violet or grey.
  • Achromatopsia: Complete color blindness. Only shades of gray are visible.
  • Protanomaly: Red-weakness. Reduced sensitivity to red light.
  • Deuteranomaly: Green-weakness. Reduced sensitivity to green light (most common CVD).
  • Tritanomaly: Blue-weakness. Reduced sensitivity to blue light.
  • Achromatomaly: Severe, incomplete color blindness affecting all three cone types.

Color Theory

Explore classic color harmony theories to create professional color schemes from the "Scheme" dropdown:

• Analogous: Colors that are adjacent on the color wheel, creating a harmonious and serene feeling.
• Monochromatic: Variations in shade, tone, and tint of a single hue, creating an elegant and cohesive look.
• Triadic: Three colors that are evenly spaced on the color wheel, offering a high-contrast yet balanced combination.
• Complementary: Two colors that are opposite each other on the color wheel, creating a strong, eye-catching contrast.
• Split Complementary: A color combined with the two colors adjacent to its complement, providing strong contrast that is softer than a pure complementary scheme.
• Tetradic (Rectangular/Square): Four colors arranged into two complementary pairs. This is the richest of all schemes and offers plenty of variation.

Sharing & Saving

Easily share your color palettes with others or save them for later:

• Copy Link: Generates a unique URL for your current palette that you can bookmark or share. Press L or use the Tools menu to copy the link.
• Export: Save your palette in various formats for seamless use in your favorite design applications.

Export Options

Seamlessly transfer your palettes to your design workflow by exporting in these formats:

• Adobe Illustrator (.ase): For use in Illustrator, Photoshop, and other Adobe Creative Cloud apps.
• GIMP Palette (.gpl): For the GNU Image Manipulation Program and other compatible open-source tools.
• Procreate Swatches (.swatches): For Procreate, the popular digital painting app for iPad.
• SVG Color Palette: A scalable vector graphic file, perfect for web design and development.
• Sketch (.sketchpalette): For the popular vector design tool for macOS.
• JSON Palette (.json): A lightweight data format for use in web applications and programming projects.

Accessibility Standards

Create accessible designs with built-in compliance tools based on WCAG 2.1 guidelines.
(Note: Real-time accessibility previews are disabled on mobile devices.)

• Contrast Ratios: Check the contrast ratio of your color against both black and white text.
• WCAG Ratings: Instantly see if your color passes 'AA' (minimum) or 'AAA' (enhanced) standards for readability.
• Color Blindness Simulator: Use the tool in the Advanced Variations panel to ensure your design is usable for everyone.

Keyboard Shortcuts

• D: Toggle Light/Dark Theme
• F: Toggle Fullscreen Mode
• H: Show/Hide Help Guide
• M: Toggle Tools Menu
• G: Generate Random Palette
• S: Cycle through color schemes
• A: Toggle Accessibility Previews
• E: Export Palette
• L: Copy Palette Link
• Cmd + Z: Undo Last Action (Mac)
• Ctrl + Z: Undo Last Action (Windows)
• Shift + Cmd + Z: Redo Last Action (Mac)
• Ctrl + Y: Redo Last Action (Windows)
• V: Toggle Advanced Variations
• ← / →: Move active color left/right
• ↑ / ↓: Navigate up/down in Tools Menu
• Enter: Activate selected tool menu item
• Esc: Close active menu/modal, deselect color, or exit fullscreen