Generador de paletas de color de 11 pasos para Tailwind CSS y API

 (tints.dev)
5 puntos por GN⁺ 2024-02-03 | 1 comentarios | Compartir por WhatsApp
  • Permite tomar una paleta de Tailwind CSS partiendo de un solo valor Hex y expandirla rápidamente a 11 tonos, del 50 al 950
  • El punto de referencia predeterminado es 500, pero si hace falta se puede usar otro valor entre 50 y 950 como color base
  • Ajustando la saturación y el Hue se pueden crear paletas más naturales que con simples cambios de brillo
  • Según los valores mínimos y máximos de Lightness/Luminance y el cambio de modo, varía la distribución de colores hacia el blanco y el negro
  • La API actualmente se enfoca en devolver paletas basadas en un valor Hex base y todavía no ofrece opciones de ajuste HSL

Crear una paleta de Tailwind CSS

  • Palette Creator recibe como valor inicial un color hexadecimal válido y genera una paleta de 11 pasos para Tailwind CSS
  • El punto de referencia por defecto es 500, pero puede cambiarse a otro valor entre 50 y 950 para colocar el color deseado en el centro de la paleta

  • Cómo se ajustan los colores

    • En colores con 100% de saturación, se puede aplicar Hue Shift hacia arriba o hacia abajo para dar variación a la paleta
    • Si el color base tiene poca saturación, aumentar la Saturation en ambos extremos produce una paleta más interesante
    • Ajustando los valores mínimos y máximos de Lightness o Luminance, el resto de los colores puede extenderse hasta los extremos de blanco y negro
    • Al alternar entre Lightness y Luminance, la distribución de los colores en los extremos se genera de forma distinta
    • Los principios de diseño de color están inspirados en Refactoring UI de Adam Wathan y Steve Schoger, y ese libro recomienda no usar herramientas automatizadas
    • Esta herramienta se enfoca en empezar rápido la creación de una nueva paleta, más que en producir una respuesta final terminada

Uso de la API y la salida

  • Con la Palette API se pueden obtener varios conjuntos de paletas
  • Puede usarse en herramientas de diseño que necesiten generar una paleta del 50 al 950 a partir de un solo valor Hex
  • Actualmente la API solo devuelve paletas basadas en un valor Hex base y no ofrece opciones de HSL tweak
  • La paleta generada se entrega en un formato que puede pegarse en CSS para la configuración de Tailwind
    • La salida de ejemplo incluye dentro de un bloque @theme variables de color OKLCH desde --color-yellow-50 hasta --color-yellow-950

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-02-03
Opiniones de Hacker News

  • Estaría bueno que este tipo de herramientas incluyeran por defecto una experiencia de desarrollo para accesibilidad.
    La idea es que, al definir una paleta de colores, puedas saber solo por los nombres de los colores si una combinación es accesible.
    Por ejemplo, en el sistema de diseño USWDS se puede saber que blue-30 sobre gray-80 es accesible (WCAG AA), porque la diferencia entre ambos valores es de 50 o más.
    Hace tiempo escribí sobre este concepto algo acotado: https://darekkay.com/blog/accessible-color-palette/

    • Lo llamé un concepto acotado, pero creo que en diseño web debería ser una prioridad máxima.
      Todas las personas en algún momento tendrán alguna discapacidad, permanente o temporal, y muchas veces no se pueden usar herramientas excelentes como Streamlit por temas de accesibilidad.
    • Radix Colors trae muchas funciones de accesibilidad integradas.
      https://www.radix-ui.com/colors
      Trabajo en WorkOS, y Radix es un proyecto open source que mantenemos nosotros.
    • Stripe también publicó sobre su sistema de colores accesible: https://stripe.com/blog/accessible-color-systems
      Aunque todavía no conozco bien una herramienta que use ese concepto para generar paletas nuevas.
    • Material 3, una especificación bastante grande que usa Google, también tiene un sistema de colores que funciona de esta manera.

  • Me gusta jugar con colores, y esta también es una buena herramienta.
    Otras alternativas interesantes son https://adevade.github.io/color-scheme-generator/, https://colorcolor.in, que no genera Tailwind directamente pero está muy bien hecha, http://colormind.io y https://uicolors.app/create.

    • Llevo mucho tiempo buscando la herramienta de color perfecta y todavía no la encuentro.
      Quiero una herramienta que pueda manejar cosas tan avanzadas como las que muestra esta biblioteca: https://colorjs.io/
    • Quiero recomendar https://github.com/ardov/huetone (https://huetone.ardov.me/).
      Tiene una UI única que no vi en herramientas similares, y permite ver en un gráfico el L/C/H relativo de todos los colores de la paleta.
      Gracias a eso es más fácil crear una paleta consistente.
    • Me gusta https://huemint.com/.
    • Últimamente el sitio parece cargar algo lento, pero desde hace años me gusta https://www.colourlovers.com.
    • Buena lista.
      Para sumar algunos enlaces generales sobre teoría del color que uso seguido: https://paletton.com/ permite crear paletas basadas en teoría del color y generar combinaciones completas.
      https://medialab.github.io/iwanthue/ usa k-medias para separar colores, y es bueno para colores de gráficos y para asegurar contraste.

  • Hace poco hice una.
    Es mucho más simple y está muy marcada por mis gustos, pero puede generar configuración de Tailwind: https://ghola.dev funciona mejor en desktop o iPad.
    También hay un artículo largo sobre cómo la hice con web components: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

    • Me gusta la herramienta que hiciste.
      No creo que sea correcto llamar generador de paletas a algo que solo trabaja con un color a la vez, o al menos no es lo que estoy buscando.
      Necesito un generador de paletas que cree conjuntos de colores para apps, y esta herramienta se acerca más a eso.

  • Excelente.
    Empecé con un logo y en menos de un minuto armé una paleta que quedó mejor que la que había hecho a mano la vez pasada en 30 minutos.

  • Me gusta.
    Me pregunto cuál será la forma más fácil de sincronizar estos colores con Figma.
    Tal vez los diseñadores profesionales usen algún plugin que genere estos colores y los exporte a Tailwind.

    • ¿Buscas un plugin de este tipo? https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens es un buen enfoque.
    • La forma en que Figma maneja los colores es tan frustrante y rara que ya dejé de preocuparme por eso.
      Intenté usarlo bien varias veces, pero era tan manual y engorroso que terminé rindiéndome.

  • Buena herramienta.
    Otro enfoque que uso en mi codebase es definir la paleta de colores como variables CSS y hacer que la configuración de Tailwind apunte a esas variables.
    Así se pueden insertar distintos temas de color en tiempo de ejecución.

  • Herramienta muy útil.
    Genero una paleta de colores a partir de un solo color y luego pongo el resultado en https://palettte.app para ajustar manualmente cada color.

  • Me pregunto si el ejemplo de brand que aparece en la demo es la forma en que la gente suele usarlo en la configuración.
    Pensé que se usaría modificando los colores base o creando variables nuevas como primary y secondary.

    • Soy quien hizo tints.dev.
      El conjunto de colores brand son los colores que uso en mi blog simeongriggs.dev, y de hecho puse la muestra 500 en esta herramienta para generar el resto.

  • Parece útil para gradientes.
    Me sorprende que nadie mencione Paletton, es mi herramienta principal para elegir colores: https://paletton.com/
    Si empiezas con un color base, también puedes obtener gradientes hacia colores adyacentes dentro de la paleta.
    En particular, la armonía triádica y la armonía tetrádica son útiles.

  • Aunque estaba buscando activamente cómo aplicar desplazamiento de color, me tomó bastante tiempo descubrirlo.