Crea tus paletas de color en Photoshop con CSS

Cuando diseñamos el mockup de un sitio o una aplicación es importante tener definida una paleta de color para crear una imagen coherente. Hay muchas formas de crear una paleta de color y, lo más importante, guardarla para su reutilización. Si usas productos de Adobe puedes usar sus bibliotecas, tal como lo expliqué en el minicurso de diseño web con Photoshop.

Lamentablemente las bibliotecas así como tienen ventajas (estan en la nube, se sincronizan entre aplicaciones, etc), también tienen inconvenientes. Por ejemplo, no puedes seleccionar colores de la bilioteca mientras tienes una herramienta, efecto o filtro activo (y es muy frustrante). Así que la vieja confiable sigue siendo el panel de muestras de color (Ventana > Muestras) pues son accesibles desde cualquier lugar de la aplicación.

Existen varias formas de guardar tus propias muestras de color compatibles con Photoshop, pero hay una que seguro se te hará muy sencilla: un archivo CSS.

Puede ser cualquier archivo CSS sin un formato predeterminado (Photoshop identificará todos los colores compatibles dentro de él). Ten en cuenta que el formato hsl() no es soportado por Photoshop, solamente hexadecimal y rgb (también hsb una variación de hsl pero que no existe en css). En el siguiente ejemplo he creado un archivo especifico para mi paleta (recuerda que puedes usar cualquiera que ya tengas, no es obligatorio crear una nuevo):

//EDteam color palette

.first-color {
    color: #007BDF;
}

.second-color {
    color: #00CBFF;
}

.third-color {
    color: #FF3C32
}

.accent-color {
    color: #FBA905;
}

.dark-color {
    color: #282D31;
}

.border-color {
    color: #DFE0E0;
}

.text-color {
    color: #53575A;
}

.bg-color {
    color: #FCFCFC;
}

.white-color {
    color: #ffffff;
}

Una vez guardado tu archivo css ve al panel de muestras y haz clic en el botón de opciones.

Luego selecciona sustituir muestras.

Esto abrirá un cuadro examinar para que cargues tu archivo. Asegurate de escoger css en el tipo de archivo.

Como ves, puedes usar archivos HTML o SVG también (con lo que se añadirán a las muestras todas las definiciones de color que Photoshop encuentre en estos archivos).

¡Listo!

Recuerda que existen aplicaciones gratuitas como Just Color Picker (mi favorita) para capturar colores de pantalla y guardarlos como paletas (incluso como HTML para presentar en una web). Mira este video para más información: