Generador de Armonias

Haz click en un color para copiar su codigo.

Modo de Generacion

Basado en color

/* CSS generado aqui */

Extractor de Colores

Arrastra o sube imagen

Formatos: JPG, PNG, WEBP

// Resultado...

Constructor de Degradados

Preset rapido

Tipo

Angulo 135°

Forma radial

Centro / origen

Escala repeticion 24px

Colores (Stops)

0%

100%

Activar stop 3

65%

Activar stop 4

85%

Chequeo de Contraste (WCAG)

Texto Grande

Texto pequeno para lectura normal.

AAA

Large

AA

Normal

4.5

Ratio

Color Texto

Color Fondo

WCAG 2.1 Standard

Configurador de Botones

Estilo

Contenido & Icono

Solo icono

Personalizacion visual

Color principal

Color secundario

Color de texto

Posicion del icono

Radio de borde 12px

Animacion & Tiempo

Cards UI

Plantilla

Sombra & Radio

Fondo

Texto

Color titulo

Color descripcion

Alineacion de texto

Contenido

Media / imagen

Color media

Boton Mostrar boton

Color boton

Color texto boton

Posicion del boton

Acento

Inputs & Fields

Estilo

Estado

Label

Estilo label

Posicion label

Campo requerido (*)

Contenido

Radio Borde 8px

Tamano 16px

Padding vertical 12px

Icono

Colores

Texto input

Fondo input

Borde base

Acento/focus

Color label

Loaders & Spinners

Tipo

Configuracion Velocidad

Actual: 1.0x

Grosor

Actual: 4px

Tamano

Actual: 40px

Separacion

Actual: 6px

Colores

Principal

Secundario

Fondo preview

Comportamiento

Direccion

Mostrar texto

Animaciones CSS

Test

Efecto

Desde donde

Distancia 60px

Tiempo 1000ms Delay 0ms

Curva / direccion

Iteraciones

Direccion

Fill mode

Origen

Elemento de prueba Tamano 100px Radio 20px

Color 1

Color 2

Color texto

Fondo preview

Sombras & Efectos

Box

Estilo

Intensidad 15

Offset X 0px

Offset Y 14px

Blur 28px

Spread 0px

Opacidad 24%

Radio 18px

Tamano box 150px

Blur vidrio 14px

Longitud long shadow 30px

Angulo long shadow 45°

Color sombra

Color glow (neon)

Color box

Color texto

Fondo preview

Etiqueta

Fondo inteligente por estilo

Combinador de Fuentes

Titulo (Header)

Minimalismo Digital

Cuerpo (Body)

El diseno efectivo es invisible. Al elegir la tipografia correcta, guiamos al usuario a traves del contenido sin distracciones innecesarias.

Fuente Titulo

Fuente Cuerpo

Tamano titulo 48px

Tamano cuerpo 16px

Peso titulo

Peso cuerpo

Interlineado cuerpo 1.6

Espaciado titulo 0px

Alineacion texto

Padding preview 50px

Fondo preview

Color titulo

Color cuerpo

Color acento

Color separador

Estilo titulo

Adaptar automaticamente al tema dark/light

Tester de Fuentes

El veloz murcielago hindu comia feliz cardillo y kiwi.

Fuente

Peso

Tamano

Optimizador de SVG

Resultado