Coolors

Fast color palette generator for designers and developers. Create, explore, and customize beautiful color schemes in seconds with an intuitive interface.

Features

Palette Generation

• Super Fast Generator: Press spacebar to generate palettes
• Smart Colors: AI-powered harmonious combinations
• Lock Colors: Keep favorites while generating
• Adjust Individual Colors: Fine-tune hue, saturation, brightness
• Color Temperature: Warm/cool adjustments
• Accessibility Check: WCAG contrast ratios
• Export Formats: Multiple export options

Color Tools

• Color Picker: Extract from images
• Gradient Maker: Create smooth gradients
• Contrast Checker: Verify accessibility
• Color Converter: HEX, RGB, HSL, CMYK
• Image Picker: Generate from photos
• Collage Maker: Visualize palettes
• Gradient Palette: Shades and tints

Exploration

• Trending Palettes: Popular color schemes
• Explore: Browse millions of palettes
• Collections: Curated color schemes
• Search: Find palettes by color or keyword
• Tags: Browse by mood or theme

Quick Start

Generate Palette

1. Visit coolors.co/generate
2. Press spacebar to generate
3. Click colors to lock favorites
4. Press spacebar again
5. Adjust individual colors as needed
6. Export when satisfied

From Image

1. Upload image
2. Click "Generate from image"
3. Select number of colors
4. Adjust extracted palette
5. Export color scheme

Export Options

For Developers

/* CSS */
:root {
  --color-1: #264653;
  --color-2: #2A9D8F;
  --color-3: #E9C46A;
  --color-4: #F4A261;
  --color-5: #E76F51;
}

// SCSS
$color-1: #264653;
$color-2: #2A9D8F;
$color-3: #E9C46A;
$color-4: #F4A261;
$color-5: #E76F51;

// JSON
{
  "colors": [
    "#264653",
    "#2A9D8F",
    "#E9C46A",
    "#F4A261",
    "#E76F51"
  ]
}

For Designers

• Adobe (ASE, ACO)
• Sketch
• Figma
• SVG
• PNG
• PDF
• SCSS/Less
• XML

Other Formats

• Image (PNG, SVG)
• PDF document
• Code (CSS, SCSS, JSON)
• URL (shareable link)

Advanced Features

Accessibility

• Contrast Checker: Test text readability
• WCAG Compliance: AA and AAA ratings
• Suggestions: Improve contrast automatically
• Visual Simulation: Colorblind modes

Adjustments

• Hue Shift: Change color angle
• Saturation: Intensity adjustment
• Brightness: Lightness control
• Temperature: Warm/cool bias
• Individual Control: Per-color tweaking

Organization

• Save Palettes: Store favorites
• Collections: Organize by project
• Share: Unique URLs for each palette
• History: Access recent palettes

Use Cases

Web Design

• Brand color schemes
• UI component colors
• Theme creation
• Call-to-action colors
• Background combinations

Branding

• Logo color selection
• Brand identity development
• Style guide creation
• Marketing materials
• Product packaging

Development

• CSS variables setup
• Theme system design
• Color token generation
• Design system foundation
• Component styling

Illustration

• Art color planning
• Mood creation
• Seasonal themes
• Complementary schemes
• Analogous combinations

Keyboard Shortcuts

• Spacebar: Generate new palette
• C: Copy current color
• H: Toggle hex values
• Arrow Keys: Navigate colors
• Alt + Click: Lock color
• Shift + Click: Adjust color
• E: Export palette

Color Harmony Rules

Complementary

Opposite colors on color wheel (high contrast)

Analogous

Adjacent colors on wheel (harmonious)

Triadic

Three evenly spaced colors (vibrant)

Split-Complementary

Base color + two adjacent to complement

Monochromatic

Variations of single hue (sophisticated)

Pricing

Free

• Generate unlimited palettes
• Explore public palettes
• Basic export formats
• Save limited palettes

Pro ($3/month)

• Unlimited saved palettes
• Advanced export formats
• Ad-free experience
• Color visualizer tools
• Priority support

Browser Extension

Features

• Pick colors from any webpage
• Generate palettes instantly
• Copy color codes quickly
• Available for Chrome & Firefox

iOS App

• Generate on the go
• Camera color picker
• Sync with web account
• Share palettes
• Offline access

API Access

// Generate palette programmatically
fetch('https://www.colr.org/json/color/random')
  .then(response => response.json())
  .then(data => console.log(data.colors));

Note: Coolors doesn't have official API, but various color APIs exist.

Tips & Tricks

Starting Points

• Upload brand logo to extract colors
• Use photos for inspiration
• Start with one color and build around it
• Explore trending palettes
• Copy from nature photos

Fine-Tuning

• Lock 2-3 colors, generate rest
• Adjust brightness for depth
• Check contrast for text/background
• Use different saturations for hierarchy
• Test in grayscale

Accessibility

• Maintain 4.5:1 contrast for body text
• 3:1 minimum for large text
• Test with colorblind simulation
• Don't rely solely on color for information

Organization

• Name palettes descriptively
• Tag by project or mood
• Create collections for clients
• Export early and often

Integration Workflow

Design Process

1. Generate initial palette
2. Export to Figma/Sketch
3. Create color styles/variables
4. Apply to design
5. Test accessibility
6. Refine and export code

Development Handoff

/* Export as CSS custom properties */
:root {
  --primary: #264653;
  --secondary: #2A9D8F;
  --accent: #E9C46A;
  --warning: #F4A261;
  --danger: #E76F51;
}

Best For

• Quick palette ideation
• Non-designers needing color schemes
• Developers creating themes
• Brand identity exploration
• UI/UX color selection
• Presentation color planning
• Art and illustration prep

Alternatives

• Adobe Color: More professional features
• Paletton: Theory-based generation
• ColorHunt: Curated palettes
• Huemint: AI-powered generation

Coolors is the fastest, most intuitive color palette generator available. Its simplicity and speed make it perfect for both designers and developers who need beautiful color schemes quickly.