# Cheat Sheet de Nombres de Colores y Clases de daisyUI: Tabla Esencial para Cambiar Temas

daisyUI se utiliza principalmente para **facilitar el cambio de temas**. Sin embargo, esa ventaja se pierde cuando los desarrolladores o diseñadores insertan colores fijos de Tailwind como `bg-blue-500`. En su lugar, si escribes tu HTML con los nombres de color semánticos que ofrece daisyUI y los aplicas con clases como btn-primary, bg-base-200 o text-error, al cambiar el tema todo el tono de la UI se ajusta automáticamente.

Por eso, la clave es **conocer los nombres de color y los patrones de clases, y combinarlos en el marcado**. Los diseñadores experimentados lo memorizarán de inmediato, pero para principiantes o desarrolladores backend/full‑stack que tocan la UI de vez en cuando, es mucho más rápido tener esta cheat sheet a mano que buscar en la documentación cada vez. En este artículo, organizamos de forma clara cuándo usar cada nombre de color y cómo combinarlos con las clases.

![Robot desarrollador y paleta de colores](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## Nombres de Colores (Cuándo usarlos) {#sec-4d3fa8b26445}

| Nombre de color          | ¿Cuándo usarlo? (breve)           | Ejemplo típico          |
| ------------------------ | --------------------------------- | ----------------------- |
| `primary`                | Color principal de la marca       | Botón principal, CTA clave |
| `primary-content`        | Texto/ícono sobre `primary`       | Texto de botón `primary` |
| `secondary`              | Acción secundaria / sub-marca | Botón secundario, énfasis secundario |
| `secondary-content`      | Texto/ícono sobre `secondary`     | Texto en zona `secondary` |
| `accent`                 | Punto de atención/énfasis          | Badge, enlace destacado |
| `accent-content`         | Texto/ícono sobre `accent`        | Texto sobre fondo `accent` |
| `neutral`                | UI neutra (tono oscuro)           | Navegación, pie de página, panel profundo |
| `neutral-content`        | Texto/ícono sobre `neutral`       | Texto en zona `neutral` |
| `base-100`               | Fondo de página principal          | Fondo de página/ lienzo |
| `base-200`               | Superficie ligeramente elevada     | Tarjeta, fondo de sección |
| `base-300`               | Separación más marcada/ capa profunda | Línea divisoria, panel profundo |
| `base-content`           | Texto/ícono sobre la familia `base` | Texto principal |
| `info`                   | Información/guía                    | Banner informativo, pista |
| `info-content`           | Texto/ícono sobre `info`           | Texto sobre fondo `info` |
| `success`                | Éxito/normalidad                    | Notificación de éxito |
| `success-content`        | Texto/ícono sobre `success`        | Texto sobre fondo `success` |
| `warning`                | Precaución/advertencia              | Mensaje de advertencia |
| `warning-content`        | Texto/ícono sobre `warning`        | Texto sobre fondo `warning` |
| `error`                  | Error/riesgo                         | Acción destructiva |
| `error-content`          | Texto/ícono sobre `error`           | Texto sobre fondo `error` |

---

## Patrones de Clases (Reglas de combinación de colores) {#sec-5007f90f39f0}

| Propósito            | Patrón                          | Ejemplo                                     |
| -------------------- | -------------------------------- | ------------------------------------------- |
| Fondo                | `bg-{COLOR}`                    | `bg-primary`, `bg-base-200`                 |
| Texto                | `text-{COLOR}`                  | `text-base-content`, `text-error`           |
| Borde                | `border-{COLOR}`                | `border-neutral`, `border-base-300`         |
| Degradado (inicio/medio/final) | `from- / via- / to-{COLOR}` | `from-primary via-accent to-secondary` |
| Anillo (focus)       | `ring-{COLOR}`                  | `ring-primary`                              |
| Desplazamiento de anillo | `ring-offset-{COLOR}`          | `ring-offset-base-100`                      |
| Relleno SVG          | `fill-{COLOR}`                  | `fill-accent`                               |
| Trazo SVG            | `stroke-{COLOR}`                | `stroke-neutral-content`                    |
| Sombra               | `shadow-{COLOR}`                | `shadow-primary`                            |
| Contorno             | `outline-{COLOR}`               | `outline-info`                              |
| División             | `divide-{COLOR}`                | `divide-base-300`                           |
| Acento de formulario | `accent-{COLOR}`                | `accent-primary`                            |
| Cursor (caret)              | `caret-{COLOR}`                 | `caret-primary`                             |
| Decoración (subrayado) | `decoration-{COLOR}`           | `decoration-accent`                         |
| Marcador de posición | `placeholder-{COLOR}`           | `placeholder-base-content`                 |

---

## Ajustar la opacidad {#sec-c72e6700b4d3}

| Propósito           | Patrón                    | Ejemplo                               |
| ------------------- | ------------------------- | ------------------------------------- |
| Fondo claro         | `bg-{COLOR}/10`           | `bg-primary/10`, `bg-success/15`      |
| Borde sutil         | `border-{COLOR}/30`       | `border-error/30`                     |
| Texto tenue         | `text-{COLOR}/70`         | `text-base-content/70`                |
| Intensidad al pasar el ratón | `hover:bg-{COLOR}/80` | `hover:bg-primary/80`                 |

> Cuando quieras ajustar la intensidad de un color, combina la clase con `/número(%)`. Puedes sobreescribir los nombres de color, pero añadir colores fuera de la paleta de daisyUI no es recomendable, ya que rompe la coherencia del diseño y puede causar problemas al cambiar de tema.

---

**Lecturas relacionadas** : 

- [daisyUI Theme: Termina tus dudas de color con 35 paletas](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)  
- [Introducción a la extensión Tailwind CSS daisyUI: crea UI rápido con clases](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)