Contenidos · Colores
Colors (paleta y aplicaciones)
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.
22 familias
Incluye cinco escalas neutras y diecisiete familias cromáticas.
Tonos de 50 a 950
Cada familia mantiene la misma progresión clara, media y oscura.
Tres propiedades
Una misma paleta funciona para color, background-color y border-color.
Código + resultado
Ejemplos reales de color
Compara cómo la misma nomenclatura se aplica al texto, al fondo y al borde.
<div class="color-blue-600">Texto azul 600</div>
<div class="bg-blue-500 color-white">Fondo azul 500</div>
<div class="border-solid border-4 border-emerald-500">Borde emerald 500</div>
<div class="bg-slate-900 color-white">Superficie slate 900</div>
<div class="color-rose-600">Texto rose 600</div>
<div class="color-primary">Texto principal</div>
<div class="bg-success color-success">Confirmación correcta</div>
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
.bg-primary · .color-primary
--qy-primary-50→--qy-primary-950
Secondary
Acción secundaria · base violet
.bg-secondary · .color-secondary
--qy-secondary-50→--qy-secondary-950
Success
Confirmación y éxito · base green
.bg-success · .color-success
--qy-success-50→--qy-success-950
Warning
Advertencia y atención · base amber
.bg-warning · .color-warning
--qy-warning-50→--qy-warning-950
Danger
Error y acción destructiva · base red
.bg-danger · .color-danger
--qy-danger-50→--qy-danger-950
Info
Información y orientación · base cyan
.bg-info · .color-info
--qy-info-50→--qy-info-950
primary → blue, secondary → violet, success → green, warning → amber, danger → red e info → cyan.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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 |
.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.Recomendaciones
Buenas prácticas con colores
Cuida el contraste
Comprueba que texto y fondo mantengan una relación legible en todos los estados.
Usa intención semántica
Reserva rojos para peligro y verdes para confirmaciones cuando el contexto lo requiera.
Limita la paleta
Selecciona pocas familias por producto para conservar una identidad visual coherente.
Tematiza tokens
Modifica las variables del sistema cuando cambie la marca, no cada componente.