Try it Out
We've created an impressively accurate logo-to-brand algorithm. Instantly colorize your application using a client logo, or streamline your white label process.
Click to try...
The API
Call the API. Use it in your application.
The API is aimed to deliver the important color data we gather from the logo, giving you enough information to brand, or colorize your application. Use any method you wish to POST the logo image to our server, and we will return a JSON encoded array.
Example
POST http://landr.co/brandr/api.php image_url=http://builtbyprime.com/img/logo.png
JSON Response {"accents":[{"color":"4a88d4","cover":100}],"border":"ffffff","white":1,"black":1,"sample":"http:\/\/landr.co\/brandr\/images\/4ec7fa4058cb3-nq8.png"}
Data Format
Array
(
[accents] => Array
(
[0] => Array
(
[color] => 4a88d4
[cover] => 100
)
)
[border] => ffffff
[white] => 1
[black] => 1
[sample] => http://landr.co/brandr/images/4ec7f9f3f404e-nq8.png
)
Notes
The data return structure is quite simple. By sending a POST request to the API location with a field "image_url" equal to the existing location of the image, you will receive an output. The types of data are as follows.
- Accents: These are colors within the image that we have determined to be suitable for branding, or colorizing. The colors are listed in order from most prominent to least prominent, and include a "cover" percentage which is a metric we use to describe the amount that particular color is used versus the other accent colors. Colors are hex values.
- Border: If a border color is found this will return the hex color of the border. Border colors are not included in the accent color list, because they are generally used differently when building a page aesthetic. If no border color is found, this field is empty.
- White/Black: It is sometimes important to know if a logo uses pure white or pure black, because they are often very bold colors to use unless the brand includes them. These values will be either a 0 or 1.
- Sample: This field gives the URL to the logo that we used to create the data. Once we grab the initial logo from the provided URL it goes through a mixture of resizing and optimizing so we can analyze it more quickly and accurately.
Our Process
This is not a palette generator.
The problem we aimed to solve was trying to overcome the basic limitations that a simple palette generator had. There are many tools and methods that produce a list of the mostly used colors in an image, but they turn out to be useless in the process automating an aesthetic. We used our own design background, machine learning processes, and creative coding to deliver a package of data that can visually rebuild a brand.
Border Analyzing
Once of the major flaws in simply placing a client logo onto a page is not taking into consideration the border or background color. We use a number of filtering techniques, mostly for handling "color noise", to determine if the image has a border, and what color that border is.
Alias and Edge Detection
When humans look at a brand, we see distinct colors, but what we don't realize is there is likely some type of alias to any object in an image. This alias is the slight fade between colors, or on the edge of text. These "in-between" colors are not important to the brand, and are not counted in our process. We use a mixture of negative image processing and sobel convolution to determine what is important.
Accent Metrics
After we optimize the image, we iterate every pixel, which helps us build a set of information about the different colors. We used a mahcine learning process to determine what humans consider a strong brand color, versus what colors should not be used. This is where design assumptions are made.
Accent Grouping
The first factor in grouping colors is the obvious one- that we want to make a distinction between the major, and most prominent colors used in the image. The second is that most images include slight color variation, whether due to noise or intentional fading, but in either case, similar shades of similar colors need to be grouped.
Contact
Let me know what you think...
We all know what happens when we give access to a color picker- everything becomes a highlighter color.