I am doing a project trying to simulate Google Analytic Map Overlays. Take a look at this link to see what I mean (you need to scroll down to where it says "Here is a geographical country-based visitor volume overview courtesy of Google Analytics"). The Flash mapping tool I have supports Hex Color codes (e.g. color='FFFFCC'). If I am not mistaken this is basically RGB coding?
I am looking for an algorithm where I can computationally create the color codes for a select number of shades of green.
It seems I really want HSV type calculation and not a RGB one.
I think the easiest way to accomplish this is to select a set of colors and then map then to different segments of your data. I suppose you may need more flexibility.
If you want to calculate color. You can use HSV internally, and then covert it to RGB using this algorithm:
http://www.cs.rit.edu/~ncs/color/t_convert.html
Related
I am attempting to make 4bit 16 color video with an adaptive color palette. I can convert each frame into a 16 color format, but I can't find an algorithm to automatically generate a 16 color palette for each frame.
I plan to change the color palette each frame to make the most use of the 16 colors, similar to Photo Shop's algorithm of generating the best 16 or 256 colors for a GIF. Can someone show me or point me towards an algorithm I can use to generate the adaptive palettes?
I am coding my project in Java since importing images and libraries was easier in it, but I can also code in C and C++. My goal for this project is so I can play videos on a Ti84CE, which will use 4bit 16 color palette color. The video linked below is what the quality would look like.
Here is what my program can generate so far with a fixed color palette. The fixed palette is not good at matching the source video too much as most colors become grey: https://media.giphy.com/media/m20vIaWvnYoCaqqfLL/giphy.gif
I know dithering is an option, but I will implement it after I can get adaptive palettes to work.
I tried internet searching for color palette generating algorithms but all the resources lead me to PhotoShop tutorials instead of coding algorithms.
I also tried generating random colors for palettes but the results were not much better. I wouldn't want to hand pick the palettes since its too tedious.
Anyone who frequently does UI likely knows that for a given color hsl(H, 100%, 50%) (syntax is CSS) not all values of H will produce a color suitable to be placed under arbitrarily black or white text. The specific fact I'm noting is that certain colors (green) appear especially bright and other (blue) appear especially dark.
Well suppose I would like a user to be able to enter a color hue and have the color always appear with a consistent brightness so that one of either white or black text is guaranteed to always be readable on top of it. I would like all colors to also maintain the most vivid level of saturation they can given the constraint on brightness.
Here is a quick example of what I've tried so far. I start with a grid of squared like this rendered using a bunch of html div elements. Essentially these are hue values roughly from 0 to 360 along the horizontal axis and lightness values from roughly 0% to 100% along the vertical axis. All saturation value are set to 100%.
Using a JS library library called chroma.js, I now process all colors using the color.luminance function, whose definition seems to be to do what I'm looking for. I just passed the lightness of the hsl value in as the parameter to the function. I don't know for sure that this is the best way to accomplish my goal though since I'm not familiar with all the terminology at play here. Please note that my choice to use this library is by no means a constraint on how I want to go about this. It just represents my attempt at solving the problem.
The colors certainly now have a more consistent lightness, but the spectrum now seems particularly vivid around the orange to cyan area and particularly dull everywhere else. Also the colors seems to drop very quickly away from black at the top.
Hopefully this example helps a bit to express what I'm trying to accomplish here. Does any know what they best way to go about this is?
I found the solution! Check out HSLuv. It balances out all the hues in the spectrum so that at any given saturation and lightness, all hues will have the exact same perceived brightness to the human eye.
This solved my problem because now I can just set my text color to white (for example) and then as long as the text is readable against a certain HSLuv lightness it is guaranteed that it will be readable against any hue and saturation used in combination with that lightness. Magic.
Given a set of colors, say colors on this webpage, and another palette of an equal number of colors, what would be a good way to map the former to the latter while:
preserving contrast between individual colors
preserving the relative intensity of the colors (not sure how important this would be)
Essentially, this webpage should be rendered in the new color palette while still legible.
What color space would be appropriate for this task?
Can you also point me to any related work?
Update: The mapping can surely be done manually but I intend to automate the mapping for any given set of colors and palette and so I'm looking for an algorithmic approach or rather an understanding of what properties need to be preserved in favor of legibility and beauty.
In general, I think it is better to transform colours into HSV, and then transform hue (and than back to original encoding). We use brightness (dark elements) and saturation (unselected buttons, etc) as semantic element, so it is better to preserve it.
In such way you maintain also the contrast.
But: normal HSV is not really a true physiological HSV: the most used formula are just set for gamut of RGB, and to give maximum range and being the parameter independent. On reality maximum V depend on H (if one want to compare V between different colours), and other effect.
And These and other visual effects (not in any HSV) will effect the visual result, so you may do it programmatically (e.g. JavaScript which read and override all colours, but this is a topic for other questions), but if you do a website professionally, you must still manually tweak some elements.
Note: last version of CSS, and many CSS preprocessors allow you to use HSV values, and apply programmatically saturation, light and hue changes.
Given a color (in hex) I want to generate a set of colors that look almost exactly like the given color but are a little bit different. Is there a good way to do this other than just arbitrarily/randomly increasing or decreasing r g or b?
Thanks!
I'm not sure if you're trying to do this programmatically (Sass/Compass can do it by multiplying/dividing a percentage of the hex value), or manually.
If manual, you can use this online color palette. It has a lighten/darken scheme and displays 16 colors at a time that are nearly identical.
You can use this online tool Colorglower - Get lighter and darker shades of hex color - It's a simple tool that generates lighter and darker shades of a hex color. You can even adjust the shade percentage.
Colorglower is a free online tool to get lighter or darker shades of a hex color code. Adjust how much shade by using the percentage slider. Great reference for web designers to discover different color palettes for their projects.
I'm looking for an idea for getting the most representative color in a grid of pixels. There is any algorithm for this? I'm not sure if the most representative is one of the colors appearing in the grid of is the average af all the pixels better?
alt text http://www.stan.mx/images/stackoverflowPixels.gif
Have a look at some color quantization algorithms. I found them to be the most effective method to generate palettes from photographs. Also, most image manipulation/processing libraries should have some fast quantization built in.
You are probably looking at "average" as percepted by human. First you need to change you colors representation in a color space that is specially designed to be
"perceptually uniform" (for calculation of color "distances") Lab* link text
Then, each color is a point in 3D color space. Now you can find the "center" of the cloud of points and this is the "most representative color".