Tokens legibles
Cada paso tiene una función y un nombre CSS estable. La luz, la base y la sombra pueden pasar de la exploración a un componente sin transcribir valores manualmente.
Herramienta de color gratuita
Generador de tonos de color para luces y sombras cartoon
Crea una paleta de cinco, siete o nueve pasos a partir de un solo color base. Compara una escala clásica con otra pensada para sombreado cartoon y copia valores listos para usar sin subir archivos.
Actualizado el 23 de julio de 2026
generador de tonos de color
¿Qué crea este generador de tonos de color?
Este generador transforma un HEX válido de tres o seis dígitos en una escala centrada que conserva exactamente el color original. El modo Clásico mezcla con blanco para obtener tintes y con negro para crear sombras. El modo Cartoon cambia a la vez matiz, saturación y brillo para producir luces más cálidas y sombras más frías. Cada resultado muestra HEX, RGB, HSB, contraste con blanco y negro, copia individual, variables CSS y un PNG generado localmente.
Un color base, tres resultados prácticos
Usa la escala como un sistema con funciones claras, no como una fila decorativa sin nombres.
Contraste visible
Cada muestra enseña su relación con texto blanco y negro. Las etiquetas AA normal, AA grande o insuficiente ayudan a elegir un primer plano razonable antes de probar la interfaz completa.
Sombreado para cartoon
El modo Cartoon añade un cambio moderado de matiz al aclarar u oscurecer. El resultado sirve como punto de partida para personajes, insignias, juegos e ilustración plana.
HEX · RGB · HSB · WCAG
Genera una escala de luz a sombra
Elige el color base, el método y la cantidad de pasos. La escala cambia al instante en tu navegador.
Tinte 3#D1EFF6
RGB 209, 239, 246
HSB 191°, 15%, 96%
- Texto blanco
- 1.21:1Bajo AA
- Texto negro
- 17.39:1AA normal
--toon-shade-01Tinte 2#9FDEED
RGB 159, 222, 237
HSB 192°, 33%, 93%
- Texto blanco
- 1.48:1Bajo AA
- Texto negro
- 14.15:1AA normal
--toon-shade-02Tinte 1#6ACCE3
RGB 106, 204, 227
HSB 191°, 53%, 89%
- Texto blanco
- 1.85:1Bajo AA
- Texto negro
- 11.36:1AA normal
--toon-shade-03Base#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
- Texto blanco
- 2.34:1Bajo AA
- Texto negro
- 8.97:1AA normal
--toon-shade-04Sombra 1#22869E
RGB 34, 134, 158
HSB 192°, 78%, 62%
- Texto blanco
- 4.22:1AA grande
- Texto negro
- 4.97:1AA normal
--toon-shade-05Sombra 2#175A6A
RGB 23, 90, 106
HSB 192°, 78%, 42%
- Texto blanco
- 7.76:1AA normal
- Texto negro
- 2.71:1Bajo AA
--toon-shade-06Sombra 3#0C3038
RGB 12, 48, 56
HSB 191°, 79%, 22%
- Texto blanco
- 14.04:1AA normal
- Texto negro
- 1.50:1Bajo AA
--toon-shade-07:root {
--toon-shade-01: #D1EFF6;
--toon-shade-02: #9FDEED;
--toon-shade-03: #6ACCE3;
--toon-shade-04: #2FB8D8;
--toon-shade-05: #22869E;
--toon-shade-06: #175A6A;
--toon-shade-07: #0C3038;
--toon-shade-base: var(--toon-shade-04);
}Cómo generar tonos de color útiles
Una escala funciona cuando el origen, el intervalo y el uso previsto están claros. Repite este proceso breve al crear o revisar una paleta.
1. Parte de un HEX autorizado
Usa el valor del archivo de diseño, token de marca o fuente muestreada, no una conjetura tomada de una captura comprimida. El centro conserva ese HEX exacto y permite rastrear todos los pasos vecinos.
2. Elige la escala según el trabajo
Clásico es predecible para fondos, bordes, gráficos y estados. Cartoon es una heurística artística para luces y sombras. Compara ambos y conserva el más sencillo si el cambio de matiz no aporta jerarquía.
3. Verifica el contraste en contexto
Usa las relaciones como filtro rápido. Antes de publicar, prueba tamaño y peso de fuente, color vecino, foco y estado interactivo. Una muestra aprobada no vuelve accesible automáticamente todo el componente.
Tonos clásicos frente a tonos cartoon
Ambos métodos mantienen la base en el centro, pero resuelven problemas diferentes.
| Método | Cambio | Uso recomendado | Precaución |
|---|---|---|---|
| Clásico | Mezcla RGB lineal hacia blanco o negro | Superficies, bordes, gráficos y tokens neutros | Los puntos medios pueden parecer grises o mecánicos |
| Cartoon | Curva HSB con pequeños cambios de matiz y saturación | Personajes, juegos, pegatinas e ilustración plana | Es un inicio creativo, no una especificación de marca |
| Contraste | Luminancia relativa WCAG contra blanco y negro puros | Primer filtro de texto para cada muestra | Hay que probar tipografía, tamaño, estado y componente reales |
Cómo se calcula la escala
Una cantidad impar crea un centro real. Con cinco pasos aparecen dos colores claros, la base original y dos oscuros; siete y nueve añaden intervalos más finos a ambos lados. Los tintes clásicos acercan cada canal RGB a 255 y las sombras lo acercan a cero. Los extremos se detienen antes del blanco y negro puros para conservar identidad cromática. Como la base no se recalcula, sus valores HEX, RGB y HSB permanecen exactos.
El modo Cartoon sigue otra curva. Las luces aumentan brillo, reducen algo la saturación y desplazan unos grados el matiz; las sombras pierden brillo, ganan un poco de saturación y avanzan en sentido contrario. El cambio crece al alejarse del centro. Es una heurística transparente, no una simulación física. Material, luz ambiente, reflejos y composición pueden exigir otra dirección, por lo que el resultado debe tratarse como borrador editable.
Tinte, tono y sombra no son lo mismo
En terminología tradicional, un tinte nace al añadir blanco y una sombra al añadir negro. Un tono suele implicar gris, reduciendo intensidad mientras controla la luminosidad. Muchas herramientas digitales llaman “tono” o “shade” a cualquier variación clara u oscura. Este generador denomina tinte al lado claro y sombra al oscuro. El método Clásico no añade una fila independiente de gris; la base sigue siendo la referencia entre ambos sentidos.
La diferencia importa al entregar una paleta. “Usa sombra 2” es reproducible si se guardan método, base y escala; “hazlo un poco más oscuro” no lo es. Copia el bloque CSS completo cuando el proyecto necesite nombres consistentes. Si hace falta un estado desaturado para hover o deshabilitado, créalo de forma intencional con el selector HSB en vez de asumir que cualquier punto de la rampa sirve como tono.
Normas, medidas y notas del método
El generador separa cálculos reproducibles de decisiones creativas. Estas fuentes explican formatos, términos y umbrales.
- CSS Color Module Level 4 define el HEX de seis dígitos como tres canales sRGB de 8 bits. Cada canal tiene 256 valores y produce 16.777.216 combinaciones RGB antes del alfa. W3C CSS Color Module Level 4
- WCAG 2.2 fija 4.5:1 para texto normal y 3:1 para texto grande en nivel AA; el criterio mejorado usa 7:1 para texto normal. Pautas de Accesibilidad WCAG 2.2 del W3C
- La escala clásica interpola RGB de forma reproducible. La escala Cartoon es una heurística de Toon Tone, no un modelo de iluminación, una paleta oficial ni una prueba completa de accesibilidad. Referencia de teoría del color del W3C
WCAG 2.2 indica:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Continúa trabajando con tu paleta
Preguntas sobre el generador de tonos
¿Qué diferencia hay entre tinte y sombra?
Un tinte mezcla el color hacia blanco; una sombra lo mezcla hacia negro. Tono suele significar añadir gris. La herramienta coloca tintes antes de la base exacta y sombras después.
¿Se conserva el HEX original?
Sí. Un HEX de tres dígitos se expande a seis y ese valor normalizado permanece exactamente en el centro de cualquier escala de cinco, siete o nueve pasos.
¿Qué modo conviene para una interfaz?
Empieza con Clásico para superficies, bordes y estados previsibles. Prueba Cartoon si una ilustración o juego mejora con luces más cálidas y sombras frías y saturadas.
¿Las etiquetas WCAG garantizan accesibilidad?
No. Solo calculan la relación de la muestra contra blanco o negro puro. Debes probar primer plano, fondo, tipografía, tamaño, peso, estado y componente completos.
¿Se suben o guardan mis colores?
No hace falta cuenta ni subida. Generación, copia, cálculo de contraste y PNG ocurren en el navegador. La descarga se crea localmente en tu dispositivo.