CSS Color Generator (from pics)

votar

English version

I’m very bad at color choosing… terrible bad. I have no taste at all for design, i haven’t a single bit of these “magic” needed to see a client’s logo and create the needed CSS for a layout where the logo could fit like a glove. But i know about programming… at least a bit… and the world is full of color theory, so i have glued together a bit of “mathemagic”, a bit of php code… and created CSS Color Generator, a simple experiment where, from a given pic, you can generate a CSS color palette in Average, Bright, Dark and Complemetary modes.

It was not intended to be visible (i didn’t even wroten a frontend) but Mikko Koppanen (imagick php extension developer) from #php in freenode asked me about it and i prepared a little demo for the programmers in my same situation (no taste for aesthetics), so i open it in “beta” stage, if someone can use it, i hope he enjoy it. :)

Link: CSS Color Generator

Update: Mikko Koppanen have published similar code as a tutorial in his blog

Spanish version

Soy malo eligiendo colores… muy malo. Carezco absolutamente de buen gusto por el diseño, carezco de esa “magia” necesaria para ver el logotipo de un cliente o amigo y crear de la nada el CSS necesario para un entorno donde el logotipo encaje como un guante. Pero sé programar… al menos un poco.. y de teoría del color está el mundo lleno, asi que ni corto ni perezoso he juntado un poco de fórmulas matemágicas por aqui, un poco de código propio por allá… y he creado CSS Color Generator, un simple experimento que, de una imagen dada, nos genera una paleta de colores CSS en gamas original, brillante, opaca y complementaria.

No pensaba ni siquiera enseñarlo (ni me he molestado siquiera en hacerle un frontend) pero Mikko Koppanen (desarrollador de la extension imagick para php) del canal #php en freenode me ha convencido de que puede ser interesante para muchos programadores en mi misma situación (nulo gusto por la estética), asi que lo abro en “beta”, si a alguien le es útil, que lo disfruten con salud :)

Enlace: CSS Color Generator

Actualización: Mikko Koppanen ha publicado el código en forma de tutorial en su blog

Preview:

CSS Lab

10 comentarios a esta entrada

  • Gravatar Mikko Koppanen’s Blog: Color analysis | MT-Soft Website Development dijo
    el # Lunes, 5 de noviembre del 2007 a las 22:09

    1

    [...] The code creates three different “palettes” from image; average palette, dark palette and bright palette. I got the idea for three different palettes from MarcosBL at freenode. [...]

  • Gravatar Mikko’s blog » Blog Archive » Color analysis dijo
    el # Martes, 6 de noviembre del 2007 a las 16:52

    2

    [...] The code creates three different “palettes” from image; average palette, dark palette and bright palette. I got the idea for three different palettes from MarcosBL at freenode. [...]

  • Gravatar Ruby, JRuby, Rails, Rails Plugins, RSpec, JavaScript, CSS, SEO & Subversion « exceptionz dijo
    el # Miércoles, 7 de noviembre del 2007 a las 02:55

    3

    [...] CSS color generator using images [...]

  • Gravatar >> s E t H dijo
    el # Viernes, 6 de marzo del 2009 a las 04:30

    4

    Probe con
    http://seth.inkt.fdchost.com/wp-content/themes/black-soul/images/header2.gif

    y 10 o 15 colores y me sale

    Warning: pixelgetcolorasstring() expects parameter 1 to be resource, boolean given in /home/propieda/www/lab/color/index.php on line 197

    Fatal error: pixelgetcolorasstring(): error in function call in /home/propieda/www/lab/color/index.php on line 197

    igualmente esta muy bueno

  • Gravatar Marcos B.L. dijo
    el # Viernes, 6 de marzo del 2009 a las 10:40

    5

    s Et H, acabo de probarlo y sin problema, miralo : http://urlcorta.es/143

  • Gravatar coberr dijo
    el # Viernes, 13 de marzo del 2009 a las 03:36

    6

    Gracias, gracias y más gracias.

    Para un ciego como yo escogiendo los colores, es una gran ayuda.
    _______________________________________________________

    Thanks, thanks and a lot of thanks.

    For a blind-eyed choosing colours as i am, it’s a big help indeed.

  • Gravatar Anónimo dijo
    el # Miércoles, 1 de julio del 2009 a las 01:24

    7

    hOOla

  • Gravatar void dijo
    el # Miércoles, 1 de julio del 2009 a las 06:15

    8

    Puedes publicar el codigo de tu version? Usas el mismo algoritmo que Mikko? porque tu version parece funcionar mejor.

  • Gravatar Berny dijo
    el # Miércoles, 1 de julio del 2009 a las 15:57

    9

    Gracias!
    Es una maravilla para los que tenemos un cero patatero en la habilidad “percepción de colores”.

  • Gravatar Imagick blog » Blog Archive » Color analysis dijo
    el # Sábado, 16 de enero del 2010 a las 01:59

    10

    [...] average palette, dark palette and bright palette. I got the idea for three different palettes from MarcosBL at [...]

Deja tu opinión

Sólo se permiten las etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post anteriores/siguientes:

Post (quizás) relacionados:

  • Caja de PC Wall-E

  • Cómo no... desde Rusia, y explicado paso a paso ....
  • Cambiando colores al texto seleccionado

  • No todos los navegadores lo soportan, ni es que sea el colmo de la usabilidad, pero al menos es curioso y quizá te guste... Agrega esto...
  • Color #FABADA

  • Feo con dolor, pero "tan nuestro"... #fabada Visto en Microsiervos...
  • Enlaces interesantes PHP

  • Ensalada mixta de enlaces PHP: phpffmpeg es una clase que nos permitirá utilizar el programa ffmpeg para manipular y convertir vídeos a nuestro antojo Curiosa generación de...
  • Función PHP – Extraer ruta, nombre y extensión de un archivo

  • La curiosidad me la ha despertado el viciño r0sk en su blog a partir de las diferentes opciones que él y sus compañeros de trabajo...