Generador de Tonos de Color

A Shade Generator is a foundational design utility that creates a series of darker variations (shades) of a base color. While Tints are created by adding white, Shades are created by adding black. Shades are critical for creating depth, shadows, and hover states that feel grounded and professional. Using an automated generator ensures a mathematically "Clean" progression, avoiding the common mistake of shifting the core color's identity as it gets darker.

The generation engine calculates shades using the HSL (Hue, Saturation, Lightness) color model:

1. Hue Anchoring: The tool keeps the "Hue" (the specific color on the 360° wheel) locked to your input.
2. Saturation Correction: Deep shades often look "Muddy" if saturation isn't adjusted. The engine applies a logarithmic scale to saturation to ensure the dark colors remain vibrant and "Rich."
3. Lightness Diminishing: The tool calculates a linear or curved descent from your base lightness toward 0% (Pure Black). It typically provides 5-10 distinct steps.
4. Color Space Mapping: Every step is instantly converted into Hex, RGB, and HSL formats.
5. Hierarchy Validation: The tool allows you to preview how these shades work as borders or text on various background tones.

The History of Shades and Traditional Art

The term "Shade" comes from 18th-century painting techniques, where a "Chiaroscuro" (Light-Dark) effect was used to create 3D realism on a flat canvas.

Artists like Caravaggio and Rembrandt mastered the art of mixing pure pigments with Lamp Black or Ivory Black to create the illusion of depth. In the digital era, this practice was standardized by Ivan Sutherland (inventor of Computer Graphics) to simulate light and shadow in 3D models. Today, UI Designers use shade generators to build "Elevation" systems like those found in Material Design.

Technical Comparison: Shades vs. Shadows vs. Tints

Choosing the right "Darkening" method depends on your UI goals.

Feature	Shade (This Tool)	Shadow (Box Shadow)	Tint (Tints)
Logic	Color + Black	Color + Opacity + Offset	Color + White
Visual Goal	Richness / Tone	Depth / Elevation	Lightness / Calm
Common Use	Text / UI Borders	Buttons / Modals	Backgrounds / Tattoos
Solidness	100% Opaque	Transparent	100% Opaque
Unit	Hex/RGB	CSS Property	Hex/RGB

By using a dedicated Shade Generator, you ensure your Design System has enough depth to handle complex layouts.

Security and Accessibility Considerations

Darker colors provide excellent contrast, but they come with unique usability challenges:

• The "Black" Trap: Using Pure Black (#000000) for text on a white background can cause "Visual Vibrations" for some readers. Professional designers often use a very dark shade of Blue or Gray (e.g., #1a1a1a) created with this tool instead.
• Accessibility (AA/AAA): Shades almost always pass WCAG Contrast Checks on light backgrounds, but they can be difficult to distinguish from each other on low-quality OLED or LCD screens. Ensure your shade steps have at least a 10% lightness difference.
• Dynamic Themes: Shades are the backbone of "Dark Mode" development. You can use this tool to find the "Reverse" of your light theme colors.
• Client-Side Privacy: To maintain your absolute Data Privacy, the entire shade calculation logic happens locally in your browser. Your confidential brand assets and creative iterations are never sent to our servers.