¿Odias los anuncios? Ir Sin publicidad Hoy 

Generador de Esquema de Color (Complementario / Triádico / Análogo)

Desarrollador

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

APORTE

Proceso automático

PROD.

Lado cliente

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

Guía

Color Scheme Generator

Generate harmonious color palettes using color theory. Pick a base color and choose a harmony type — complementary, triadic, analogous, split-complementary, tetradic, or monochromatic — to instantly create a balanced palette. Visual swatches show hex, RGB, and HSL values. WCAG contrast checking ensures accessibility. Export as CSS custom properties, JSON, Tailwind config, or SCSS variables.

Cómo utilizar

Enter a base color using the color picker, hex input, RGB sliders, or HSL values — all inputs sync automatically. Select a harmony type to generate a palette of 3-6 colors based on color theory mathematics. Each color displays as a visual swatch with hex, RGB, and HSL values and a copy button. Check WCAG contrast ratios against white and black text. Export the entire palette in your preferred format.

Características

6 Harmony Types — Complementary (180°), Triadic (120°), Analogous (30°), Split-Complementary (150°/210°), Tetradic/Square (90°), and Monochromatic (saturation/lightness variations).
Multiple Color Inputs — Native color picker, hex (#RRGGBB), RGB sliders, and HSL sliders all sync in real-time. Change any input and all others update instantly.
Visual Palette Display — Large color swatches with hex, RGB, and HSL values for each color. One-click copy on any value.
WCAG Contrast Check — Each palette color shows contrast ratio against white and black text with AA/AAA pass/fail badges. Ensures your color choices meet accessibility standards.
4 Export Formats — CSS custom properties (:root variables), JSON object, Tailwind config colors, and SCSS variables. Copy the entire export block with one click.
Actualizaciones en tiempo real — Palette regenerates instantly on any input change. No generate button needed.
HSL-Based Calculations — All harmony types use mathematically correct HSL hue rotation, producing color-theory-accurate results.

Color Harmony Types

Complementary: Two colors opposite on the color wheel (180° apart). High contrast, vibrant. Best for: call-to-action elements, bold designs.
Triadic: Three colors equally spaced (120° apart). Balanced, colorful. Best for: illustrations, playful designs.
Analogous: Colors adjacent on the wheel (30° apart). Harmonious, serene. Best for: nature themes, gradients, cohesive designs.
Split-Complementary: Base color + two colors adjacent to its complement (150°/210°). Strong contrast with less tension. Best for: beginners, versatile palettes.
Tetradic/Square: Four colors at 90° intervals. Rich, diverse. Best for: complex designs with many elements.
Monochromatic: Single hue with varying saturation and lightness. Elegant, unified. Best for: minimalist designs, single-brand themes.

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

What is color harmony in design?

Color harmony refers to color combinations that are visually pleasing and balanced. These combinations are derived from the color wheel — a circular arrangement of colors based on their hue relationships. Harmonious colors create a sense of order and aesthetic appeal. The main harmony types (complementary, triadic, analogous, etc.) are based on geometric relationships on the color wheel: colors at specific angles from each other tend to look good together. Designers use these relationships to create palettes that feel intentional and cohesive rather than random.

What is WCAG contrast ratio and why does it matter?

WCAG (Web Content Accessibility Guidelines) contrast ratio measures the luminance difference between two colors — typically text and its background. A ratio of 1:1 means no contrast (same color), while 21:1 is maximum contrast (black on white). WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these ratios ensures that people with visual impairments, color blindness, or those viewing in poor lighting conditions can read your content. Many accessibility laws reference WCAG standards.

What is the difference between RGB and HSL color models?

RGB (Red, Green, Blue) defines colors by mixing light intensities — each channel ranges from 0-255. It’s how screens display color but isn’t intuitive for humans. HSL (Hue, Saturation, Lightness) is more intuitive: Hue is the color angle on the wheel (0-360°), Saturation is the color’s intensity (0-100%), and Lightness is how light or dark it is (0-100%). HSL is better for color harmony calculations because rotating the hue angle directly creates harmonious colors, while achieving the same in RGB requires complex math.

Which harmony type should I use for my design?

It depends on your goals. Complementary (2 colors) creates high contrast and energy — good for CTAs and bold statements. Analogous (3 colors) feels calm and cohesive — ideal for nature themes and serene designs. Triadic (3 colors) is balanced and vibrant — great for illustrations and playful brands. Split-complementary is a safer version of complementary with less visual tension. Monochromatic is elegant and unified — perfect for minimalist designs. Tetradic offers the most variety but requires careful balance. When in doubt, start with analogous or split-complementary — they’re the most forgiving.

¿Quieres eliminar publicidad? Adiós publicidad hoy

