# Colors (paleta y aplicaciones) > Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/colors.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Colores Aplica colores al texto, los fondos y los bordes desde un único módulo, con 22 familias cromáticas, alias semánticos y una escala compartida de 11 tonos. v2.0 ◉ ## 22 familias Incluye cinco escalas neutras y diecisiete familias cromáticas. 11 ## Tonos de 50 a 950 Cada familia mantiene la misma progresión clara, media y oscura. 3 ## Tres propiedades Una misma paleta funciona para color, background-color y border-color. i ## Clases disponibles Usa una familia explícita como `.color-blue-600` o un alias semántico como `.color-primary`. El mismo criterio se aplica a `.bg-*` y `.border-*`. ✦ ## Tokens reutilizables Cada utilidad consume una variable `--qy-{familia}-{tono}`, por lo que la paleta puede tematizarse sin cambiar el marcado. Código + resultado ## Ejemplos reales de color Compara cómo la misma nomenclatura se aplica al texto, al fondo y al borde. HTML Resultado aplicado Texto Componente real .color-blue-600 aplica el tono blue 600 a la propiedad color. ```html
Texto azul 600
``` .bg-blue-500 aplica el tono blue 500 al fondo; .color-white mantiene el contraste del texto. ```html
Fondo azul 500
``` El color de borde se combina con utilidades reales de estilo y grosor para que sea visible. ```html
Borde emerald 500
``` Combina una superficie oscura con texto blanco para conservar una lectura clara. ```html
Superficie slate 900
``` Todas las familias comparten el mismo patrón de clase y la misma escala tonal. ```html
Texto rose 600
``` .color-primary expresa intención y toma su valor de --qy-text-primary; el tema puede cambiar el color sin modificar esta clase. ```html
Texto principal
``` .bg-success crea la superficie semántica y .color-success aplica el tono de texto correspondiente. ```html
Confirmación correcta
``` Intención + escala ## Colores semánticos del sistema Cada intención dispone de once tonos, del 50 al 950. Los alias permiten cambiar la identidad del tema sin reemplazar las clases utilizadas en el HTML. ### Primary Acción principal · base blue primary `.bg-primary · .color-primary` `--qy-primary-50` → `--qy-primary-950` ### Secondary Acción secundaria · base violet secondary `.bg-secondary · .color-secondary` `--qy-secondary-50` → `--qy-secondary-950` ### Success Confirmación y éxito · base green success `.bg-success · .color-success` `--qy-success-50` → `--qy-success-950` ### Warning Advertencia y atención · base amber warning `.bg-warning · .color-warning` `--qy-warning-50` → `--qy-warning-950` ### Danger Error y acción destructiva · base red danger `.bg-danger · .color-danger` `--qy-danger-50` → `--qy-danger-950` ### Info Información y orientación · base cyan info `.bg-info · .color-info` `--qy-info-50` → `--qy-info-950` Asignación predeterminada `primary → blue`, `secondary → violet`, `success → green`, `warning → amber`, `danger → red` e `info → cyan`. Uso recomendado Los fondos semánticos utilizan el tono 50 como superficie clara; texto y borde utilizan el tono 600 para conservar jerarquía y contraste. Vista general ## Familias disponibles Cada ficha reúne la identidad de la familia y sus once tonos en una escala continua. Pasa el cursor sobre cada segmento para consultar el tono, su valor hexadecimal y la clase equivalente. ### Slate Escala cromática · 11 tonos Slate Fondos `.bg-slate-50` → `.bg-slate-950` Texto `.color-slate-50` → `.color-slate-950` Bordes `.border-slate-50` → `.border-slate-950` ### Gray Escala cromática · 11 tonos Gray Fondos `.bg-gray-50` → `.bg-gray-950` Texto `.color-gray-50` → `.color-gray-950` Bordes `.border-gray-50` → `.border-gray-950` ### Zinc Escala cromática · 11 tonos Zinc Fondos `.bg-zinc-50` → `.bg-zinc-950` Texto `.color-zinc-50` → `.color-zinc-950` Bordes `.border-zinc-50` → `.border-zinc-950` ### Neutral Escala cromática · 11 tonos Neutral Fondos `.bg-neutral-50` → `.bg-neutral-950` Texto `.color-neutral-50` → `.color-neutral-950` Bordes `.border-neutral-50` → `.border-neutral-950` ### Stone Escala cromática · 11 tonos Stone Fondos `.bg-stone-50` → `.bg-stone-950` Texto `.color-stone-50` → `.color-stone-950` Bordes `.border-stone-50` → `.border-stone-950` ### Red Escala cromática · 11 tonos Red Fondos `.bg-red-50` → `.bg-red-950` Texto `.color-red-50` → `.color-red-950` Bordes `.border-red-50` → `.border-red-950` ### Orange Escala cromática · 11 tonos Orange Fondos `.bg-orange-50` → `.bg-orange-950` Texto `.color-orange-50` → `.color-orange-950` Bordes `.border-orange-50` → `.border-orange-950` ### Amber Escala cromática · 11 tonos Amber Fondos `.bg-amber-50` → `.bg-amber-950` Texto `.color-amber-50` → `.color-amber-950` Bordes `.border-amber-50` → `.border-amber-950` ### Yellow Escala cromática · 11 tonos Yellow Fondos `.bg-yellow-50` → `.bg-yellow-950` Texto `.color-yellow-50` → `.color-yellow-950` Bordes `.border-yellow-50` → `.border-yellow-950` ### Lime Escala cromática · 11 tonos Lime Fondos `.bg-lime-50` → `.bg-lime-950` Texto `.color-lime-50` → `.color-lime-950` Bordes `.border-lime-50` → `.border-lime-950` ### Green Escala cromática · 11 tonos Green Fondos `.bg-green-50` → `.bg-green-950` Texto `.color-green-50` → `.color-green-950` Bordes `.border-green-50` → `.border-green-950` ### Emerald Escala cromática · 11 tonos Emerald Fondos `.bg-emerald-50` → `.bg-emerald-950` Texto `.color-emerald-50` → `.color-emerald-950` Bordes `.border-emerald-50` → `.border-emerald-950` ### Teal Escala cromática · 11 tonos Teal Fondos `.bg-teal-50` → `.bg-teal-950` Texto `.color-teal-50` → `.color-teal-950` Bordes `.border-teal-50` → `.border-teal-950` ### Cyan Escala cromática · 11 tonos Cyan Fondos `.bg-cyan-50` → `.bg-cyan-950` Texto `.color-cyan-50` → `.color-cyan-950` Bordes `.border-cyan-50` → `.border-cyan-950` ### Sky Escala cromática · 11 tonos Sky Fondos `.bg-sky-50` → `.bg-sky-950` Texto `.color-sky-50` → `.color-sky-950` Bordes `.border-sky-50` → `.border-sky-950` ### Blue Escala cromática · 11 tonos Blue Fondos `.bg-blue-50` → `.bg-blue-950` Texto `.color-blue-50` → `.color-blue-950` Bordes `.border-blue-50` → `.border-blue-950` ### Indigo Escala cromática · 11 tonos Indigo Fondos `.bg-indigo-50` → `.bg-indigo-950` Texto `.color-indigo-50` → `.color-indigo-950` Bordes `.border-indigo-50` → `.border-indigo-950` ### Violet Escala cromática · 11 tonos Violet Fondos `.bg-violet-50` → `.bg-violet-950` Texto `.color-violet-50` → `.color-violet-950` Bordes `.border-violet-50` → `.border-violet-950` ### Purple Escala cromática · 11 tonos Purple Fondos `.bg-purple-50` → `.bg-purple-950` Texto `.color-purple-50` → `.color-purple-950` Bordes `.border-purple-50` → `.border-purple-950` ### Fuchsia Escala cromática · 11 tonos Fuchsia Fondos `.bg-fuchsia-50` → `.bg-fuchsia-950` Texto `.color-fuchsia-50` → `.color-fuchsia-950` Bordes `.border-fuchsia-50` → `.border-fuchsia-950` ### Pink Escala cromática · 11 tonos Pink Fondos `.bg-pink-50` → `.bg-pink-950` Texto `.color-pink-50` → `.color-pink-950` Bordes `.border-pink-50` → `.border-pink-950` ### Rose Escala cromática · 11 tonos Rose Fondos `.bg-rose-50` → `.bg-rose-950` Texto `.color-rose-50` → `.color-rose-950` Bordes `.border-rose-50` → `.border-rose-950` Referencia ## Clases de color El módulo reúne clases explícitas, alias semánticos y aplicadores de borde bajo el mismo namespace de tokens `--qy-*`. | Clases | Propiedad | Valores | Ejemplo | | --- | --- | --- | --- | | .color-{familia}-{tono} | color | 22 × 11 | .color-blue-600 | | .bg-{familia}-{tono} | background-color | 22 × 11 | .bg-emerald-500 | | .border-{familia}-{tono} | border-color | 22 × 11 | .border-rose-300 | | .color-{intención} | color | primary, secondary, success, warning, danger, info | .color-success | | .bg-{intención} | background-color | Alias semánticos | .bg-warning | | .border-{intención} | border-color | Alias semánticos | .border-danger | | .color-white / .color-black | color | Blanco y negro | Contraste de texto. | | .bg-white / .bg-black | background-color | Blanco y negro | Superficies puras. | | .border-white / .border-black | border-color | Blanco y negro | Bordes puros. | | --qy-{familia}-{tono} | Custom property | 22 × 11 | --qy-blue-500 | | --qy-{intención}-{tono} | Custom property semántica | 6 × 11 | --qy-primary-600 | Color y estructura Las clases `.border-{color}` modifican únicamente el color. Combínalas con `.border`, `.border-x`, `.border-y` o una variante por lado para crear el trazo sólido de 1px; las utilidades de grosor y estilo pueden reemplazar después esos valores. Escala tonal 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y 950. Los valores bajos son más claros y los altos más oscuros. Recomendaciones ## Buenas prácticas con colores 01 ### Cuida el contraste Comprueba que texto y fondo mantengan una relación legible en todos los estados. 02 ### Usa intención semántica Reserva rojos para peligro y verdes para confirmaciones cuando el contexto lo requiera. 03 ### Limita la paleta Selecciona pocas familias por producto para conservar una identidad visual coherente. 04 ### Tematiza tokens Modifica las variables del sistema cuando cambie la marca, no cada componente.