16 herramientas / 3 categorías
Herramientas de color, impresas nítidas.
Una imprenta para el navegador. Paletas, degradados, sombras y easings — mezclados en una pestaña, listos para copiar como CSS, Tailwind o SCSS. Nada sale de la página.
Las herramientas
Cada chip es una herramienta funcional. Elige una tinta. Mezcla. Copia. Envía.
01 · Herramientas de color
8 herramientasGenera armonías complementarias, análogas, triádicas y más a partir de cualquier color base. Exporta como variables CSS, configuración de Tailwind, SCSS o JSON.
Pega cualquier valor de color y velo al instante en HEX, RGB, RGBA, HSL, HSLA y HSV. Copia cualquier formato con un clic.
Comprueba pares de colores de primer plano y fondo según los requisitos WCAG 2.1 AA y AAA para texto normal y grande.
Mezcla dos colores en cualquier proporción en el espacio RGB o HSL y copia al instante los valores hex, RGB y HSL resultantes.
Suelta cualquier imagen y extrae sus colores dominantes con cuantificación median-cut. Exporta como variables CSS, configuración de Tailwind, SCSS o JSON.
Visualiza tu paleta a través de siete tipos de deficiencia de visión cromática. Detecta pares que chocan para el ~8% de usuarios con confusión rojo/verde.
Encuentra el color CSS nombrado más cercano a cualquier hex usando distancia perceptual Lab, o busca el hex exacto detrás de cualquier palabra clave CSS.
Crea una escala tonal (50–950) a partir de cualquier color de marca y consulta las calificaciones de contraste WCAG AA/AAA de cada matiz frente a blanco, negro y el resto de la escala.
02 · Generadores CSS
7 herramientasCrea degradados CSS lineales, radiales y cónicos con múltiples paradas de color, control de ángulo y vista previa en tiempo real.
Apila varias sombras con control total sobre desplazamiento, desenfoque, extensión, color e inset. Copia el CSS al instante.
Apila capas de text-shadow para sombras arrojadas, brillos neón, tipografía 3D, letterpress y sombras largas. Previsualiza sobre texto real y copia el CSS.
Combina blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate y sepia en un único filtro CSS con vista previa en vivo sobre imagen o texto.
Arrastra los dos puntos de control para diseñar curvas de easing cubic-bezier() personalizadas. Compáralas con ease, ease-in, ease-out y observa la curva animando en vivo.
Ajusta las cuatro esquinas de forma independiente o utiliza la sintaxis elíptica de 8 valores. Observa cómo la forma se actualiza al instante.
Dibuja polígonos clip-path personalizados con un editor interactivo o parte de presets como triángulos, hexágonos y flechas.