Farb scheme Generator (komplementär / triadisch / analog)

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.

Anwendung

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.

Merkmale

• 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.
• Echtzeit-Updates — 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.