What is the difference between shades and tints?

A shade is a color mixed with black — it gets darker. A tint is a color mixed with white — it gets lighter. A complete palette typically includes both.

How many colors should a CSS palette have?

For a UI design system, 9–11 steps (50 through 900 or 950) per color is the standard, popularized by Tailwind CSS and Material Design.

Should I use HEX, RGB, or HSL in CSS?

HEX is the most concise for static colors. HSL is best for palette generation because it maps to human perception. RGB is useful for rgba transparency. For production, define your palette as variables and use them everywhere.

Can I use this palette in Tailwind CSS?

Yes — add the generated colors to tailwind.config.js under theme.extend.colors. Then use them as bg-primary-400, text-primary-900, etc.

Generador CSS de Paleta de Colores – Tonos, Matices

CSSTools.io

Generated CSS

Guía Completa de Paletas de Colores CSS

Una paleta de colores CSS bien estructurada es la base de cualquier sistema de diseño. En lugar de colores codificados de forma fija, define tus colores como variables CSS personalizadas organizadas en escalas de tonos, matices y colores de sistema.

Sistema de Paleta con Variables CSS

:root {
  /* Escala primaria */
  --color-primary-100: #ede9fe;
  --color-primary-500: #7c6fff;
  --color-primary-900: #2d1b8e;

  /* Colores semánticos */
  --color-bg: var(--color-primary-100);
  --color-text: var(--color-primary-900);
  --color-accent: var(--color-primary-500);
}

Preguntas Frecuentes

¿Cuántos colores debe tener una paleta?

La mayoría de sistemas de diseño usan 1–3 colores primarios, cada uno con 5–10 tonos. Además, grises neutros, y colores semánticos (éxito, error, advertencia). En total, 30–60 tokens de color es típico para un sistema robusto.

¿Qué es la relación de contraste WCAG?

WCAG 2.1 requiere una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande. Para texto decorativo o logotipos no hay requisito mínimo.

Tool last updated: June 2026