Palette Lab (PaletteLab)

7,900+ Original Color Palettes, Palette Search Engine & WCAG Contrast Tools

Discover & Generate Accessible Color Palettes for Web, Mobile & Print

Welcome to PaletteLab, an open digital color laboratory created for designers, UI/UX engineers, and creative directors. Explore over 7,900 mathematically curated color combinations, extract harmonious hex palettes from photography, audit text contrast against WCAG 2.1 AA/AAA accessibility standards, and export tokens directly to Tailwind CSS, CSS Custom Properties, and Figma.

Comprehensive Color Engineering & Design Guides

1. The 60-30-10 Rule in Interface & Brand Design

The 60-30-10 rule is a timeless architectural and visual balance formula used to build cohesive color schemes. 60% of your composition forms the dominant foundation (backgrounds, canvas areas, and wide surfaces). 30% provides structural contrast (cards, navigation sidebars, typography, and borders). The remaining 10% serves as an energetic accent reserved strictly for high-priority interactive calls to action, badges, and alerts.

2. Understanding WCAG 2.1 & 2.2 Color Contrast Requirements

Digital accessibility ensures that content can be clearly read and navigated by everyone, including users with visual impairments or color vision deficiencies. Under Web Content Accessibility Guidelines (WCAG 2.1):

  • Level AA (Minimum Contrast): Requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt / 24px or 14pt bold). Active user interface components and graphical objects must achieve at least 3:1 against adjacent background colors.
  • Level AAA (Enhanced Contrast): Requires an enhanced ratio of at least 7:1 for regular text and 4.5:1 for large text.

PaletteLab calculates relative luminance using exact sRGB linear expansion algorithms: L = 0.2126 * R + 0.7152 * G + 0.0722 * B, guaranteeing compliant contrast pairings across all palettes.

3. Geometric Color Harmony Systems

Effective color combinations rely on mathematical relationships across the standard 360-degree color wheel:

  • Complementary: Colors positioned directly opposite (180 degrees) on the color wheel. Produces high visual tension and maximum contrast.
  • Analogous: Hues that sit side-by-side (typically within 30 to 45 degrees). Delivers serene, cohesive, and naturally calming visual rhythm.
  • Triadic: Three colors equally spaced at 120 degrees around the wheel. Offers vibrant balance while retaining diverse chromatic interest.
  • Split-Complementary: A base color paired with the two hues adjacent to its direct complement, yielding high contrast with reduced visual friction.
  • Monochromatic: Variations in lightness, shade, and saturation derived from a single pure hue. Ideal for clean, minimalist software UI.

4. Photo Color Extraction & Dominant Hue Clustering

Extracting colors from real-world photography brings organic authenticity to digital branding. PaletteLab's image extraction engine uses k-means spatial quantization to isolate dominant, vibrant, pastel, shadow, and highlight tones, allowing creators to translate real-world scenes into functional five-color design palettes with a single upload.

Suite of Professional Color Tools

Photo Color Extractor

Upload any image or photograph to automatically extract vibrant, muted, dark, and light harmonic palettes with precision eyedropper loupe.

Open Extractor →

WCAG 2.1 Contrast Matrix

Test every background and foreground combination across an interactive 5x5 matrix with instant AA and AAA pass/fail compliance audits.

Check Contrast →

Color Blindness Simulator

Simulate how your color palette appears under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia to verify universal readability.

Run Simulator →

CSS & Mesh Gradient Studio

Generate linear, radial, and multi-point mesh gradients with customizable rotation angles, easing stops, and one-click CSS code export.

Create Gradients →

UI Component Mockup Studio

Preview how your chosen 5-color palette looks across realistic SaaS dashboards, mobile widgets, buttons, navigation bars, and cards.

Preview UI →

Design System & Brand Tokens

Export tokens in Tailwind CSS v3 & v4 theme configs, CSS Custom Properties, SCSS map, SVG swatch cards, and JSON formats.

Export Tokens →

Curated Palette Categories

Browse thousands of palettes organized by mood, aesthetics, and design theme:

Pastel & Soft Neon & Cyberpunk Earthy & Botanical Luxury & Editorial Minimalist Neutral Warm Sunset Oceanic & Cool Vintage & Retro 70s Dark Mode SaaS

Frequently Asked Questions

Are PaletteLab color palettes free for commercial use?

Yes. All palettes on PaletteLab are 100% free for use in commercial web applications, mobile apps, graphic design, marketing collaterals, and print merchandise with no royalties or attribution required.

How does the spacebar generator work?

Press the Spacebar on your keyboard to instantly compute and rotate color harmonies across the 360-degree color wheel. Click the lock icon on individual hex shades you wish to retain, and subsequent spacebar presses will harmonize complementary tones around your locked colors.

Can I export palettes to Tailwind CSS?

Yes. Every palette detail page and generator tool includes one-click export to Tailwind CSS v3 config objects, Tailwind CSS v4 @theme directives, CSS Custom Properties (:root variables), and SCSS syntax.