1. Welcome to PaletaColor Pro

This guide teaches you not only what each tool does, but when to use it and why it's useful in your real workflow.

Who is this app for?

PaletaColor Pro is designed to solve real color problems in different contexts:

👨‍💻 Web Developers

Generate palettes and export directly to CSS Variables, Tailwind, Material UI, Chakra UI or any framework you use. No more copying colors one by one.

🎨 UI/UX Designers

Create complete color systems and visualize them in 8 real preview views (landing, e-commerce, dashboard, mobile...) before implementing.

🏢 Brand Professionals

Generate a professional 6-page Brand Kit PDF with variations, accessibility, typography and complete system. Client-ready.

♿ Accessibility Specialists

Verify WCAG 2.1 and APCA (WCAG 3.0), simulate colorblindness in real-time, and use Magic Fix to repair issues automatically.

📊 PaletaColor Pro in numbers

17

Main tools

24

Professional calculators

10

Export frameworks

9

Educational guides

💡 First time here?

Start with the "Generator vs Explorer" section to understand the two main tools and when to use each one. Then explore the rest based on your needs.

2. Generator vs Explorer: Which to use?

The most frequent question. The answer is simple: Generator = create from scratch. Explorer = analyze and refine.

🎨

The Generator

Your starting point to create palettes from scratch. Interface with collapsible sidebar organizing all creation tools.

Use it when:

• Starting a new project
• You have a base color and need more
• Want to explore color harmonies
• Need palettes by industry or mood

🔍

The Explorer

Your lab to analyze and refine existing palettes. Immersive view with side panel of 8 specialized tools.

Use it when:

• You already have a defined palette
• Need to verify accessibility
• Want to simulate colorblindness
• Need color variations

Real use scenarios

💼 "I'm starting a new project with no defined colors"

→ Generator: Choose a harmony (complementary, analogous, triadic...) and press Space until you find something you like.

🎯 "I have the client's brand color (#3B82F6) and need matching colors"

→ Generator: Enter that color as base, choose "Complementary" or "Analogous", and harmonic colors will be created automatically.

♿ "I already have a palette but want to verify it's accessible"

→ Explorer: Contrast tab. You'll see a matrix with the WCAG ratio between ALL color pairs.

👁️ "I want to see how colorblind people will see my palette"

→ Explorer: Colorblindness tab. Simulates Protanopia, Deuteranopia, Tritanopia and Achromatopsia in real-time.

🔄 Recommended workflow

1

Generate

Create your palette

→

2

Preview

8 preview views

→

3

Verify

PaletteScore

→

4

Explore

Deep analysis

→

5

Export

Your format

💡 Useful shortcut

From the Generator, click "Open in Explorer" to pass your palette directly to analysis mode without losing anything.

3. The Palette Generator

The Generator is the heart of PaletaColor Pro. Here you create palettes from scratch with total control over every aspect of color.

🎨 The 11 Color Harmonies

Harmonies are mathematical relationships between colors on the color wheel. Each conveys something different:

🔵🟠 Complementary

What it is: Two opposite colors on the wheel (e.g., blue and orange).

Purpose: High contrast, grab attention. Ideal for CTAs.

Use it for: Landing pages, highlighted buttons, impactful designs.

🔵🔷💠 Analogous

What it is: Adjacent colors on the wheel (e.g., blue, blue-green, green).

Purpose: Soft harmony and cohesion. Colors "flow".

Use it for: Wellness apps, nature sites, calm designs.

🔴🟡🔵 Triadic

What it is: Three equidistant colors (e.g., red, yellow, blue).

Purpose: Balance with variety. Dynamic but balanced.

Use it for: Children's brands, productivity apps, energetic designs.

🔵🔵🔵 Monochromatic

What it is: One color with lightness variations.

Purpose: Elegance and sophistication. Always works.

Use it for: Luxury brands, minimalist portfolios, mandatory single color.

Also available: Split-complementary, Tetradic, Square, Double complementary, Compound, Tones, Random.

🎚️ HSL Fine Tuning

Each color has 3 sliders for precise control:

H - Hue 0° - 360°

Moves the color on the color wheel.

Example: Your blue is "too cold". Rotate it toward purple to warm it without changing lightness.

S - Saturation 0% - 100%

Controls color intensity (gray ↔ vivid).

Tip: Lower saturation for backgrounds, raise it for accents and CTAs.

L - Lightness 0% - 100%

Controls how light or dark it is (black ↔ white).

Tip: Dark colors for text, light for backgrounds = visual hierarchy.

🏆 PaletteScore and Magic Fix

📊

PaletteScore (0-100)

Real-time score that evaluates:

✓ WCAG contrast between colors
✓ Tonal variety (lightness difference)
✓ Saturation balance

✨

Magic Fix

If your score is low, Magic Fix automatically adjusts colors to meet WCAG AA.

Example: Yellow #FFFF00 on white = 1.07:1 (unreadable). Magic Fix darkens it to #B8860B = 4.5:1 ✓

🔒 Lock System

What's it for? When you find ONE color you like but not the others, lock it. When regenerating with Space, that color stays fixed.

Typical case: Client gives you their brand color (#1E40AF). You enter it, lock it, and regenerate until you find complementary colors.

🎭 Contextual Generation

By Mood (15 states)

Cheerful, Serene, Professional, Elegant, Energetic, Natural, Romantic, Futuristic, Vintage, Minimalist, Bold, Sophisticated, Fresh, Warm, Dramatic.

8+ curated palettes per mood

By Industry (15 sectors)

Tech, Health, Finance, Fashion, Restaurants, Education, Gaming, Real Estate, Sports, Beauty, Travel, Legal, Music, Pets, Ecology.

Optimized palettes per sector

4. The Explorer Mode

The Explorer is your analysis lab. 8 specialized tabs to refine and verify any palette.

The 8 Explorer Tabs

📋 1. Info

Color codes in all formats: HEX, RGB, HSL, HSV. Click to copy.

Use case: You're in Figma and need the exact code. Open Info, click the color, copied.

⚖️ 2. Contrast

Complete WCAG matrix: contrast ratio between EACH color pair. AA/AAA indicators.

Use case: Is your blue readable on your light gray? The matrix tells you instantly.

AA
4.5:1 normal

AA
3:1 large

AAA
7:1 normal

👁️ 3. Colorblindness

Real-time simulation of 4 colorblindness types. See exactly what they see.

Protanopia
~1% men

Deuteranopia
~6% men

Tritanopia
Very rare

Achromatopsia
Grayscale only

Use case: Red "Delete" button and green "Confirm". With Deuteranopia... they look the same! You need icons.

🎚️ 4. Adjust

4 sliders that affect the ENTIRE palette simultaneously:

Saturation
Vivid ↔ Muted

Lightness
Light ↔ Dark

Hue
Rotate wheel

Temperature
Warm ↔ Cool

Use case: Palette "too cold" for a food brand. Raise temperature and all colors warm up.

🎨 5. Variations

Generate scales of each color for complete design systems:

Tints
+ White
Backgrounds, hovers

Shades
+ Black
Text, borders

Tones
+ Gray
Neutrals

📤 6. Export

PNG, JPG, JSON, ASE (Adobe), Shareable link, QR Code.

💻 7. Code

Export to 10 frameworks:

CSS Variables SCSS Tailwind JavaScript Material UI Chakra UI Flutter SwiftUI Android XML React Native

🌈 8. Gradient

Generate automatic CSS gradients: Linear, Radial, Conic. Copy the code directly.

5. The 24 Professional Calculators

24 specialized calculators organized by the problem they solve. Find the one you need.

🔄 Format Conversion

Format Converter

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK ↔ LAB ↔ OKLCH

Case: Designer gives you RGB(59, 130, 246) but your CSS uses HEX.

Pantone/RAL Converter

Find the closest industrial code

Case: Need the Pantone for print of your digital color.

Temperature Calculator

Kelvin (1000K-15000K) to RGB/HEX

Case: Simulate candlelight (2000K) or daylight (6500K).

Grayscale Generator

3 methods: linear, perceptual, logarithmic

Case: Convert image to B/W while maintaining contrast.

♿ Accessibility

WCAG 2.1 Contrast

Exact ratio + AA/AAA compliance

Case: Is my white text readable on this blue?

APCA (WCAG 3.0)

New standard with polarity and font size

Case: More precise contrast for light text on dark.

Colorblindness Simulator

Protanopia, Deuteranopia, Tritanopia, Achromatopsia

Case: See how 8% of men perceive your design.

Colorblind Score

Is your palette distinguishable for each type?

Case: Verify your chart colors are differentiable.

Gradient Accessibility

Verify contrast in gradients

Case: Is text readable across the entire gradient?

🎨 Color Manipulation

Color Mixer

Mix two colors with custom percentage

Case: Mix blue with yellow in 70/30 ratio.

Step Interpolator

Generate N intermediate colors between two

Case: 10 steps for a color animation.

Opacity Calculator

Resulting color with transparency over background

Case: What color does 50% blue over white give?

Dark Mode Converter

Transform colors for dark mode

Case: Adapt your light palette to dark automatically.

Tints/Shades Generator

Light and dark scales of any color

Case: Create 50-900 scale of your primary color.

🔍 Analysis & Comparison

Delta E Distance

Perceptual difference between two colors

Case: Are these two blues "different enough"?

Name Identifier

From HEX to semantic name

Case: #F0F8FF → "AliceBlue", #FF6347 → "Tomato"

Luminance Calculator

Exact value (0-1) per W3C

Case: Calculate luminance for contrast formulas.

Palette Analyzer

Temperature, saturation, detected harmony

Case: Complete analysis of an existing palette.

🎯 Specialized Generation

Color Harmonies

Interactive color wheel

Case: Explore complementary, analogous, triadic...

Material Design

Complete Google-style palette (50-900)

Case: Generate Material system from a base color.

OKLCH Scales

New color space for Tailwind v4

Case: Perceptually uniform scales.

CSS Filter Generator

CSS filters to transform colors

Case: Change SVG icon color with CSS.

3D Visualizer

Interactive RGB cube and HSL/HSV cylinder

Case: Understand color spaces visually.

Contrast Grid

Contrast grid between multiple colors

Case: See all combinations of a palette.

📍 Quick access

Each calculator has its own indexable URL (e.g., /contrast-calculator). Also accessible from main menu → Calculators.

6. Image Analyzer

Extract professional palettes from any image. 5 extraction modes + draggable nodes for total control.

What's it for?

🎨

Inspiration

Nature/art photo you love → palette for your project

🏢

Brand Consistency

Client's product photos → matching colors

🔍

Competitive Analysis

Competitor images → understand their palette

🎭 The 5 Extraction Modes

🤖 Auto (Automatic)

Analyzes the image and decides which colors are most representative.

Use when: You don't know which mode to choose. Recommended starting point.

⚡ Vibrant

Prioritizes the most saturated and intense colors.

Use when: You need eye-catching colors for CTAs, buttons, accents.

Example: From a fruit market → strawberry reds, lemon yellows (not box browns).

🌫️ Muted

Prioritizes low saturation, "muted" colors.

Use when: You need backgrounds, secondary text, minimalist designs.

Example: From a beach → rock grays, sand beiges (not intense sky blue).

🌑 Dark

Prioritizes the darkest tones in the image.

Use when: Designing for dark mode, dark backgrounds, shadows.

Example: From a forest → dark shadow greens (not bright sunlit leaf green).

☀️ Light

Prioritizes the lightest tones in the image.

Use when: Designing for light mode, light backgrounds, pastel colors.

Example: From a sunset → pale pinks, soft yellows (not intense oranges).

🔴 Draggable Nodes

What are they? 5 points on your image. Each captures the color of the pixel where it's placed.

Why? The algorithm doesn't always capture the exact color you want. Drag them manually.

Use case: You upload a logo photo. The algorithm extracts the background, but you want the text color. Drag a node over the text.

🔍 Precision Magnifier

4x zoom when dragging nodes. Pixel precision.

🖼️ Social Media Collage

Composite image: photo + palette. Perfect for Instagram/Pinterest.

7. Gradient Generator

Complete suite of 3 gradient tools: Normal, Mesh, and Animated.

🌈 Normal

Linear, Radial, Conic with full control.

• 27 presets in 6 categories
• 3 color spaces (RGB, LCH, HSL)
• Interpolation/Easing
• Drag & Drop colors

✨ Mesh

Fluid "aurora" style backgrounds.

• Movable mesh points
• Blur and opacity control
• Fluid CSS/JS animation
• Random generation

🎬 Animated

Animated backgrounds for websites.

• 15 animation types
• Speed control 0.25x-3x
• Mood-based generator
• Share URL

Export

CSS SCSS SVG Tailwind PNG React Vue Svelte HTML + Keyframes

8. Export & Formats

Multiple formats to use your palettes in any professional context.

📄 Brand Kit PDF (6 pages)

Professional document ready to present to clients:

1

Overview + Typography

2

Tints & Shades

3

WCAG Matrix

4

Gradients

5

Color System

6

Type Scale

💻 10 Frameworks

CSS

Variables

SCSS

Variables

Tailwind

Config

JavaScript

Object

Material UI

Theme

Chakra UI

Theme

Flutter

Dart Color

SwiftUI

iOS/macOS

Android

XML

React Native

StyleSheet

📦 Other Formats

PNG/JPG/SVG

Images

JSON

Structured data

ASE

Adobe Swatch

Link/QR

Share

9. Accessibility

Ensure your designs are usable by everyone, including people with visual disabilities.

📊 WCAG Standards

Level	Normal text	Large text	UI/Icons
AA (minimum)	4.5:1	3:1	3:1
AAA (optimal)	7:1	4.5:1	4.5:1

👁️ Colorblindness (~8% men)

Protanopia

Reds (~1%)

Deuteranopia

Greens (~6%)

Tritanopia

Blues (rare)

Achromatopsia

Grayscale only

💡 Best Practices

• Don't use color as the only indicator of information
• Avoid problematic red-green combinations
• Ensure sufficient contrast even in grayscale
• Test with simulators before publishing
• Use icons and text in addition to color for states

10. Keyboard Shortcuts

Work faster with these shortcuts (in the Generator).

Space

Regenerate

Ctrl+S

Save

Ctrl+C

Copy

Ctrl+Z

Undo

1-9

Select

L

Lock

F

Fullscreen

E

Explorer

Esc

Close

💡 Pro tip

Hold Space and release when you see a combination you like. Locked colors will stay fixed.

🖱️ Mouse Gestures

Click

Select

Double click

Open picker

Drag

Reorder

Right click

Context menu

11. Brand Matcher

Does your palette look like a famous brand? 45+ brands in database.

Why is this useful?

⚠️ Avoid conflicts

Your palette is 87% similar to Coca-Cola? Maybe you should change it to avoid legal issues.

✓ Validate decisions

"Our palette follows the same principles as Apple" = professional justification.

📊 Present to clients

Show similarity percentages as objective data in your presentations.

🔬 Technology

Uses Delta E (ΔE) in CIELAB color space to calculate perceptual difference. ΔE < 1 = imperceptible, ΔE > 100 = completely different.

Brands included

Google Apple Microsoft Amazon Meta Netflix Spotify Airbnb Uber +35 more

12. Color System

A 5-color palette isn't enough. You need a complete system with defined roles for each color.

🎨 Color Roles

🔵 Primary

Your main color. Logo, CTAs, links, main buttons.

Usually the most saturated and recognizable color.

🟣 Secondary

Complements primary. Secondary buttons, badges, accents.

Should harmonize with primary without competing.

⚪ Neutrals (50-900)

Text, backgrounds, borders, dividers.

Complete scale from almost white (50) to almost black (900).

✅ Semantic

Success (green), Warning (yellow), Error (red), Info (blue).

Universal colors that users already understand.

🌙 Dark Mode

The system automatically generates dark mode variants:

• Inverted neutrals (dark backgrounds, light text)
• Adjusted saturation for OLED screens
• Maintained contrast ratios

13. Detail Pages

Each palette and color has its own page with detailed info and shareable URLs.

📋 Palette Page

Each saved palette gets its own URL you can share:

• Custom name - Rename your palette
• WCAG matrix - Contrast between all pairs
• Open in Generator - Continue editing
• Open in Explorer - Deep analysis
• Share - Link, QR, social media

🎨 Color Page

Each color has its own detail page with:

• All codes - HEX, RGB, HSL, HSV, CMYK, LAB, OKLCH
• Variations - Tints, shades, tones
• Harmonies - Complementary, analogous, triadic...
• Similar colors - Perceptually close colors
• Color name - Semantic name (e.g., "Ocean Blue")

14. The 8 Preview Views

See your palette in real designs before implementing. Avoid surprises.

Available Views

🌐

Landing

Hero, CTAs, features

🛒

E-commerce

Products, cart, prices

📝

Blog

Articles, typography

🖼️

Portfolio

Gallery, projects

📱

Mobile

App screens, nav

📊

Dashboard

Charts, metrics

🧩

UI Kit

Buttons, forms, cards

📈

Data Viz

Charts, graphs

💡 Why is this useful?

A palette that looks good in isolation might not work in a real design. These views help you detect issues before implementing.

15. Typography Suggestions

38+ Google Fonts suggested based on your palette's mood. Complete type scale with CSS variables.

Font Categories

Sans-serif

Inter, Roboto, Open Sans, Poppins

Serif

Playfair Display, Merriweather, Lora

Display

Bebas Neue, Oswald, Montserrat

Handwriting

Dancing Script, Pacifico, Caveat

📐 Type Scale Ratios

Minor Second

1.067

Major Second

1.125

Minor Third

1.200

Major Third

1.250

Perfect Fourth

1.333

Augmented Fourth

1.414

Perfect Fifth

1.500

Golden Ratio

1.618

📋 Export includes

CSS variables with complete type scale (xs to 5xl), line heights, and font weights ready to use.

16. Other Tools

Additional tools for specific workflows.

� Shareable URLs

Each palette encodes in the URL. Share without accounts.

Example: /palette/3B82F6-10B981-F59E0B-EF4444-8B5CF6

� QR Code

Generate QR to share palettes with mobile devices.

Perfect for presentations or printed materials.

� Smart Clipboard

One-click copy in the format you need.

HEX, RGB, HSL, CSS variables, array...

💾 Local Storage

Your palettes save automatically in the browser.

No account needed. Export/import for backup.

🌐 Internationalization

Complete interface in 2 languages:

🇪🇸 Spanish 🇬🇧 English

17. Educational Guides

9 interactive guides to learn color theory while practicing.

Available Guides

1. Complete Color Guide

Theory, spaces, harmonies

2. Color Psychology

Emotions, cultures, marketing

3. Accessibility

WCAG, APCA, colorblindness

4. Branding

Brand identity, consistency

5. UI/UX Design

Interfaces, systems, dark mode

6. Print Design

CMYK, Pantone, profiles

7. Photography

Color grading, LUTs

8. Trends 2025

Current trends, predictions

9. Tools Guide

This guide you're reading

🎮 Interactive Content

Each guide includes simulators, quizzes, code examples, and practical exercises to reinforce learning.

🚀 Ready to start?

Explore the Generator to create your first palette, or dive into the calculators for specific tasks. Everything is connected!

Complete Tools Guide

Living Document