Paleta CSS color-mix() en vivo: prompt y ejemplo IA
VISTA DE CÓDIGO
Prompt
Create an interactive color mixer using CSS color-mix() function. Display three color pickers (base, mix, result) and let users adjust base and mix colors to see the mixed result update in real time. Show the mixed color as a background swatch and output the CSS code snippet.
CSSのcolor-mix()関数を使ったインタラクティブな色混合ツール。ベース色、混合色、割合を調整するとリアルタイムで結果が表示されます。生成されたCSSコードも確認できます。
Resumen del prompt
Este prompt genera una herramienta interactiva de mezcla de colores que aprovecha la función nativa color-mix() de CSS moderno. El resultado es una paleta en vivo con tres selectores de color: el color base, el color a mezclar y el resultado calculado automáticamente. El usuario ajusta los dos primeros y la interfaz actualiza en tiempo real tanto el swatch visual como el fragmento de código CSS listo para copiar.
Es ideal para diseñadores de interfaces y desarrolladores front-end que quieren explorar combinaciones cromáticas sin herramientas externas. Funciona muy bien con modelos de generación de código como GPT-4o o Claude, y produce componentes en HTML, CSS y JavaScript vanilla. Se puede ampliar fácilmente para incluir control del porcentaje de mezcla, soporte para distintos espacios de color como srgb o oklch, o exportación de paletas completas para sistemas de diseño.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選