颜色量化

要想从真彩色图像所能表现的大约16M中颜色中选取最代表性或者出现频率最高的256中颜色:

主要有以下3种 :
 流行色算法(popularity algorithm)
是对彩色图像中所有颜色出现的次数所统计分析,即创建一个数组记录各种颜色和该颜色出现的频率,然后把出现次数最多(频率最大)的236中颜色作为调色板的颜色.该算法实现起来比较简单,但该算法可能丢失一些出现频率较低但是视觉效果明显的信息.

The initial idea of the popularity algorithm is to build the colormap by finding the K most frequently appearing colors in the original image.

Therefore the colors are stored in a histogram. The K most frequently occuring colors are extracted and they are made the entries in the color table. Now the true image can be quantized.

 

Popularity algorithms are another form of uniform quantization. However, instead of dividing the color space into 256 regions these algorithms break the color space into much smaller, and consequently many more, regions. One possible implementation is to divide the space into regions 4x4x4 in size (262,144 regions). The original colors are again mapped to the region they fall in. The representative color for each region is the average of the colors mapped to it. The color map is selected by taking the representative colors of the 256 most popular regions (the regions that had the most colors mapped to them). If a non-empty region is not selected for the color map its index into the color map (the index that will be assigned to colors that map to that region) is then the entry in the color map that is closest (Euclidean distance) to its representative color).

中位切分算法(median-cut algorithm)
在RGB彩色空间中,R,G,B三基色对应于空间的3个坐标轴,并将每一个坐标轴都量化到0-255.

0对应全黑,255对应全白.

这样就形成了一个边长256的彩色立方体.所有可能的颜色都对应于立方体上的一个点.将彩色立方体切分成236个小立方体(每个小立方体中都包含了相同数量的图像中出现的颜色点.求出每一个 小立方体的中心点,这些中心点所表示的颜色就是最能代表图像颜色特征的236种颜色).中位切分法被广泛引用,但该算法设计复杂的排序工作,而且内存开销较大.

Heckbert’s median-cut algorithm is an image-based, color-quantization algorithm that gives good results for many images. If properly implemented, it’s also quite fast.

  1. Create a block or box surrounding the points; it should be just large enough to contain them all.
  2. While the number of blocks is less than the desired palette size:
    1. Find the block with the longest side out of all blocks.
    2. Cut this block into two blocks along its longest side. Cut it in such a way that half of the points inside the block fall into each of the two new blocks (that is, we split it through the median, thus the name).
    3. Shrink these two new boxes so that they just barely contain their points.
  3. Average the points in each box to obtain the final set of palette colors.

八叉树颜色量化算法
将图像的R,G,B颜色值分布到层状的八叉树中.八叉树的深度最多为9层,即根节点层和分别表示8位的R,G,B值的8个节点层.较及其不重要的R,G,B值的位(R,G,B右边的位).因此,为了提高效率和节省内存,通常并不把8位R,G,B分量值都用上

 

 

Advertisements

Shader.TileMode

CompseShader

ComposeShader can only contain shaders of different types (a BitmapShader and a LinearGradient for instance, but not two instances of BitmapShader)‘. But, ‘If your application is affected by any of these missing features or limitations, you can turn off hardware acceleration for just the affected portion of your application by calling setLayerType(View.LAYER_TYPE_SOFTWARE, null).

ComposeShader是一个 混合渲染,可以和其它几个子类组合起来使用:

  • BitmapShader主要用来渲染图像,
  • LinearGradient 用来进行梯度渲染,
  • RadialGradient 用来进行环形渲染,
  • SweepGradient 用来进行扇形梯度渲染,和RadialGradient 渐变方向不同是: SweepGradient 颜色渐变方向非环形,而是以某点为圆心呈扇形扫过

LineerGradient, RadialGradient, SweepGradient 等类的基类为Shader。Shader 定义了一个与之对应的Local Matrix ,可以对Shader 做坐标变换。

/* 这里理解为混合渲染*/
mComposeShader = new ComposeShader(mBitmapShader,mLinearGradient, PorterDuff.Mode.DARKEN);

  1. an Xfermode subclass
    • Xfermode子类可以改变这种行为:
      1)AvoidXfermode  指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图)。
      2)PixelXorXfermode  当覆盖已有的颜色时,应用一个简单的像素XOR操作。
      3)PorterDuffXfermode  这是一个非常强大的转换模式,使用它,可以使用图像合成的16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。
  2. a combining PorterDuff mode

    • private static final Xfermode[] sModes = {
      new PorterDuffXfermode(PorterDuff.Mode.CLEAR), //eraser
      new PorterDuffXfermode(PorterDuff.Mode.SRC),
      new PorterDuffXfermode(PorterDuff.Mode.DST),
      new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER),
      new PorterDuffXfermode(PorterDuff.Mode.DST_OVER),
      new PorterDuffXfermode(PorterDuff.Mode.SRC_IN),
      new PorterDuffXfermode(PorterDuff.Mode.DST_IN),
      new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT),
      new PorterDuffXfermode(PorterDuff.Mode.DST_OUT),
      new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP),
      new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP),
      new PorterDuffXfermode(PorterDuff.Mode.XOR),
      new PorterDuffXfermode(PorterDuff.Mode.DARKEN),
      new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN),
      new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY),
      new PorterDuffXfermode(PorterDuff.Mode.SCREEN)
      };

Porter Duff Color Filter 也可以为Alpha Composting,指当在将一幅图像绘制在已有背景图像时如果融合前景和背景颜色的过程。Porter Duffer 定义了多种模式,每种模式使用不同的前景和背景色组合算法:

环形渐变

setShader

要在绘图的时候使用一个Shader,可以使用setShader方法将其应用到一个Paint中,如下面的代码所示:

Paint shaderPaint = new Paint();
shaderPaint.setShader(myLinearGradient);

你使用这个Paint所绘制的任何东西都将使用你指定的Shader进行填充,而不是使用Paint本身的颜色进行填充。

TileMode

RadialGradient radialGradientShader = new RadialGradient(centerX,centerY, radius,
gradientColors,
gradientPositions,
TileMode.CLAMP);

如果Shader画刷所定义的区域比要填充的区域小,那么TileMode将会决定如何处理剩余的区域:

  • CLAMP  使用Shader的边界颜色来填充剩余的空间。
  • MIRROR  在水平和垂直方向上拉伸Shader图像,这样每一个图像就都能与上一个缝合了。
  • REPEAT  在水平和垂直方向上重复Shader图像,但不拉伸它。

使用MaskFilter

MaskFilter类可以为Paint分配边缘效果

对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。Android包含了下面几种MaskFilter:

  • BlurMaskFilter   指定了一个模糊的样式和半径来处理Paint的边缘
  • EmbossMaskFilter  指定了光源的方向和环境光强度来添加浮雕效果。

要应用一个MaskFilter,可以使用setMaskFilter方法,并传递给它一个MaskFilter对象。下面的例子是对一个已经存在的Paint应用一个EmbossMaskFilter:

// 设置光源的方向
float[] direction = new float[]{ 1, 1, 1 };
//设置环境光亮度
float light = 0.4f;
// 选择要应用的反射等级
float specular = 6;
// 向mask应用一定级别的模糊
float blur = 3.5f;
EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur);   //direction 定义了光源的方向,light 定义光的亮度, specular定义光的等级,blur模糊度。
// 应用mask
myPaint.setMaskFilter(emboss);

maskFilter = new BlurMaskFilter(10, BlurMaskFilter.Blur.SOLID);
ColorFilter
MaskFilter是对一个Paint的alpha通道的转换,而ColorFilter则是对每一个RGB通道应用转换。所有由ColorFilter所派生的类在执行它们的转换时,都会忽略alpha通道。

Android包含三个ColorFilter:

  • ColorMatrixColorFilter  可以指定一个4×5的ColorMatrix并将其应用到一个Paint中。ColorMatrixes通常在程序中用于对图像进行处理,而且由于它们支持使用矩阵相乘的方法来执行链接转换,所以它们很有用。
  • LightingColorFilter  乘以第一个颜色的RGB通道,然后加上第二个颜色。每一次转换的结果都限制在0到255之间。
  • PorterDuffColorFilter  可以使用数字图像合成的16条Porter-Duff 规则中的任意一条来向Paint应用一个指定的颜色。

使用setColorFilter方法应用ColorFilter,如下所示:

myPaint.setColorFilter(new LightingColorFilter(Color.BLUE, Color.RED));

color wheel

via http://www.workwithcolor.com/the-color-wheel-0666.htm

HSL color picker:http://www.workwithcolor.com/hsl-color-picker-01.htm

Colllor: http://colllor.com/c4bb0a

http://www.colorhexa.com/

Definition:
color wheel is a circular arrangement of hues, close to the order of how colors are represented in the light color spectrum.

We want to look into the process of creating a color wheel to find out more about differences of color wheels and their characteristics. We will also look into basics of color mixing. If you have water colors at hand, you can experiment and create a color wheel yourself.

Beginning with a circle on a white/empty canvas, we then have to choose a couple of primary hues and decide on how to arrange them along the circle. More specifically we are now confronted with the following options:

•  With how many hues do we start with?
•  Which hues do we choose?
•  At which position of the circle do we put them?
•  In what order and of which distance to each other?

If you don’t limit your options to create a specific color wheel, you are free to follow your creativity or intended purpose! The decisions made at this stage make the most differences of color wheels.

1. With how many hues do we start with?
The better known color wheels are based on three primary hues but this must not be the ideal amount in every case. Especially for paint mixing purposes it can be more convenient to choose six or more primary hues to get the best result possible.

2. Which hues do we choose?
We should choose those hues which enable us best approximating the colors of the light color spectrum, i.e. the ones which allow us to mix many different hues.

  • Painters typically choose: Red, yellow and blue (RYB).   (also ~ magenta red, yellow, cyan blue)
  • Digital imaging experts choose: Red, green and blue (RGB).
  • Printers typically choose: Cyan, magenta and yellow (CMY).

One characteristic of primary hues is that you can’t mix them. Sometimes you simply have to take the ones available to you!

3. At which position of the circle do we put them?
Let’s say we choose red as the first color to put on the circle. In terms of degrees red has a hue value of 0°. We could therefore follow the typical arrangement of degrees where 0° starts on the right hand side of a circle, or we say 0° starts at the top which is typical for a compass.

3.1. In what order and of which distance to each other?
Again we have several options for positioning the next hues. We could position them to the right or to the left of the first one and still not violate the rule of arranging the colors in accordance with the light color spectrum. In short, this determines the direction of the color wheel: clockwise or anti-clockwise.
What about the distance to each other? Typically, the primary hues are evenly spaced along the circle. This approach follows the basic rule that mixing two opposing colors of the color wheel results in a grayscale color, and the equal distance of primary hues ensures that the “right” colors are positioned opposite to each other. For certain purposes you might want to ignore this rule. This way you could shift the position of certain hues, or preserve more space for a color family respectively.

Options Summary Table:

Amount of Primary Hues 3 to 6+
Typical Hue Choices RYB, RGB, CMY
Hue Positioning Compass, Degrees, Individual
Hue Sequence Orientation Clockwise or Anti-Clockwise
Primary Hues Spacing Equal Spacing or Adjusted

Two-Dimensional Color Wheels

The steps described this far make a basic color wheel. To enhance a basic color wheel there is the possibility of adding another color dimension to the chart.Dimensionality therefore makes another attribute differentiating color wheels.

Which color dimension can we add?
We can derive the options for a second color dimension from different color models. More specifically from color models which also have hue as one dimension determining a certain color.
Two prominent examples are lightness and saturation since they are considered the other two basic properties of color. Again the choice for either one depends on your intended purpose.
By choosing saturation you can visualize the result of mixing two complementary colors. By choosing lightness you can visualize the result of mixing hues with black and white. For the purpose of selecting colors there is another argument for choosing lightness as the second dimension of a color wheel. People are better at distinguishing differences in lightness than in hue. And, people are better at distinguishing differences in hue than in saturation. Therefore it’s sensible selecting a certain color in sequence of this hierarchy.
To complete the list of options for creating a color wheel we also have to consider the radial direction of the second color dimension: outwards (~ radiation) or inwards (~ gravity).

Options Summary Table II:

Dimensionality One- or Two-Dimensional
Second Color Dimension Derived from Color Spaces
Radial Direction Outwards or Inwards

Now that you know more about options for creating a color wheel, you can more precisely classify a color wheel such as the one created for the HSL Color Picker

Color Wheel Purpose Categories

An interesting question is how we can distinguish color wheels according to their purpose? Maybe we can find answers for this question by analyzing the benefits for a user of the respective instrument.

1. Color Mixing

Paint is not available in every color an artist wants to apply. It also wouldn’t be economical to buy that many. This means a painter, for example, must get along with the available paints and try to find ratios of mixture for desired colors. To find these ratios of mixture a painter must experiment because paints have different attributes. You can imagine it’s not desirable for an artist to experiment while working on a creation because this would interrupt the flow of creativity.

It’s more convenient to do a study in advance and a color wheel can be used as a template for this study. By approximating hues of the light color spectrum you can find ratios of mixture for many colors. A painter can then refer to these insights while working on a creation. The benefit of a color wheel used for color mixing is that the position of hues and their distance to each other visualizes ratios of mixture.

Moreover, the logic behind such a color wheel also works the other way around. By remembering the position of just a few hues you’re able to guess what color is behind an arbitrary position. For example, if red is positioned at 0° and yellow is positioned at 60°, you can easily guess what color is behind the position of 30°. On a side note, this is the benefit you get from using HSL color values in HTML documents. You save time by not having to look up what color is behind a hexadecimal color code.

Picking the best matching color is not as easy as it may sound though

The difficulty is largely dependent on the design of the illustrated comparison set. Difficulty in this context means how confident someone can decide whether a color of the comparison set is a match or not (yes or no) and which one of two colors of the comparison set is a better match (better or worse). A balanced amount of colors in a comparison set is one requirement to increase confidence.

Another factor is how each illustrated color dimension is segmented. For determining colors it has been found best practice to segment color dimensions by equal perceptual differences. A color wheel designed accordingly, in conclusion, illustrates a comparison set of colors through which you can determine colors with greater confidence and then look up the respective color values of your sample.

What is a “good”, the “right”, or a “beautiful” color for a specific workpiece? This is a tough question to answer, especially when you – theoretically – have 16.7 million colors to choose from. Moreover, choosing a color is usually not only about one color on its own but also about choosing the “right” color in context with other colors.

Several principles and theories have been developed to simplify the task of selecting colors. Color wheels are frequently used for both explaining and applying these principles and theories.

A “suitable” color wheel for selecting colors is an instrument which supports the application of principles and theories by which the outcome of a color selection is perceived aesthetically appealing. You may find this not being true for color wheels designed for the purposes of mixing or determining colors.

A Basic Color Wheel …… the first step to unlocking the mysteries of color

Hue, Tint and Shade on a Color Wheel

You’ve probably seen a version of the Basic Color Wheel millions of times.

But how many people really understand how it works?

It looks surprisingly simple and obvious. So obviously simple in fact, that most people overlook its potential to unlock the mysteries of using color effectively.

The whole subject of color is tricky. It seems the more you learn about color, the deeper and broader the subject becomes.

What does a Basic Color Wheel do ?

A Primary Color Wheel blends both scientific theory and subjective preferences. It’s simply a tool to help you choose Color Schemes and paint colors with confidence.

Our human brains react to different Hues, Tints, Tones and Shades in surprisingly predictable ways. We can all tell when a color scheme just doesn’t look right.

But why does it clash ?

One major myth about creating harmonious color schemes is – ‘It just comes naturally to some people.’ Some people may be more naturally inclined, but even they benefit from understanding the color wheel. Most artists I know use one all the time.

The wrong way to choose paint colors …..

Many creative people who work with paint love going to an art supply store. So many colors – so little time. It’s tempting to just buy a tube of what looks like the perfect shade of Yellow-Orangeinstead bothering to mix paint colors every time.

Well, this is usually when things start to go sideways. What looks so luscious in the bottle or tube often clashes with all your other colors. Why ?

That’s because the manufacturer added certain pigments to Primary Yellow to achieve that gorgeous Yellow-Orange. It’s those hidden pigments that get you in trouble. For example, they might add a tiny touch of Blue/Violet to reduce the intensity of the Yellow-Orange. This tiny amount would affect all your colors and make it difficult to control your palette. On the other hand, if you really understand color, you can use it to your advantage.

What’s the Difference between a Hue, Tint, Shade and Tone ?

via http://www.color-wheel-artist.com/hue.html

http://www.color-wheel-artist.com/primary-colors.html

What’s the difference between a Hue and a Color? Most people, even the pros, get confused about this. Basically they mean the same thing and can be used interchangeably.

Most Color Wheels only show bright colors which can create confusion. It’s not always easy to see that every color, even black, has a Primary, Secondary or Tertiary Color as its root.

Most Color Wheels only show bright colors which can create confusion. It’s not always easy to see that every color, even black, has a Primary, Secondary or Tertiary Color as its root.

Hues

What's a Hue

These are the family of twelve purest and brightest colors.

  • Three Primary Colors
  • Three Secondary Colors
  • Six Tertiary Colors

They form the full spectrum of colors which progress around the Primary Color Wheel in gradual increments.

With just these twelve colors, you can literally mix an infinite number of color schemes. Most of the time you will modify these twelve basic hues by mixing in other colors.

But nothing is stopping you from using them full-strength. This multi-color scheme would be bold, cheerful and exciting. It would be great in a child’s playroom. Bright, bold selections can also work to grab attention in advertising and marketing graphics. Creating a painting with these would be a little jarring.

Tints

What's a Tint

Every individual color on the Basic Color Wheel can be altered in three ways by Tinting, Shading or Toning. And that’s before we even think about mixing two colors together.

Let’s start with Lightening the twelve basic colors to createTints. 

A Tint is sometimes called a Pastel. Basically it’s simply any color with white added.  A tint is lighter than the original color.

That means you can go from an extremely pale, nearly white to a barely tinted pure hue. Artists often add a tiny touch of white to a pure pigment to give the color some body. So for example a bright Red can quickly become a bright Pink.

A color scheme using Tints is usually soft, youthful and soothing, especially the lighter versions. All tints work well in in feminine environments. You often see advertising, marketing and websites use pale and hot pastels if they are targeting women as a demographic. In painting you might save your lightest pastels for the focal point or use pastels for the entire painting.

Shades

What's a Shade

So now that you know how to lighten, what’s the easiest way to make your colors darker?

A Shade is simply any color with black added.  A shade is darker than the original color.

Just as with making tints, you can mix any of the twelve pure colors together.Then simply add any amount of black and you have created a shade of the mixture.

That means you can go from an extremely dark, nearly black to a barely shaded pure hue.

Most artists use black sparingly because it can quickly destroy your main color. Some artists prefer not to use it at all. Instead they understand the rules of color well enough to make their own black mixtures.

Shades are deep, powerful and mysterious. Be careful not to use too much black as it can get a little overpowering. These darks work well in a masculine environment. They are best used as dark accents in art and marketing graphics.

Tones

What's a Tone

Now that you understand how to lighten and darken your twelve colors how do you tone them down? A tone is softer than the original color.

Almost every color we see in our day-to-day world has been toned either a little or a lot. This makes for more appealing color combinations.

A Tone is created by adding both White and Black which is grey. Any color that is “greyed down” is considered a Tone.

Tones are somehow more pleasing to the eye. They are more complex, subtle and sophisticated.

Artists usually mix a little grey in every paint mixture to adjust the value and intensity of their pigment. Tones are the best choice for most interior decorating because they’re more interesting. They work well in any Color Scheme you might plan

Saturation

Saturation is a color term commonly used by (digital / analog) imaging experts.

Saturation is usually one property of three when used to determine a certain color and measured as percentage value.
Saturation defines a range from pure color (100%) to gray (0%) at a constant lightness level. A pure color is fully saturated.
From a perceptional point of view saturation influences the grade of purity or vividness of a color/image. A desaturated image is said to be dull, less colorful or washed out but can also make the impression of being softer.
We will clear up the term saturation from a color mixing point of view in the color spaces section.
Lightness

Lightness is a color term commonly used by (digital / analog) imaging experts.

Lightness is usually one property of three when used to determine a certain color and measured as percentage value.
Lightness defines a range from dark (0%) to fully illuminated (100%). Any original hue has the average lightness level of 50%.
A painter might say lightness is the range from fully shaded to fully tinted.
You can lighten or darken a color by changing its lightness value.

Chromatic Signal / Chromaticity / Chroma

This family of color terms is commonly used by (digital / analog) imaging andvideo experts.

In the previous section we learned that color perception is a result of achromatic and chromatic signals.

We can therefore define a chromatic signal as the component of color perception that is not achromatic, i.e. any deviation from neutral-color perception (dark, grayscale, illuminated).

The chromatic intensity or chromaticity is the intensity of the chromatic signal contributing to color perception. Chromaticity is similar to saturation since color / an image with a low chromaticity value is not very colorful.

Chroma is a component of a color model. There’s a blue-yellow and a red-green chroma component.
Intensity / Luminosity / Luma

In general, intensity is a synonym for magnitude, degree or strength. It can therefore be used in conjunction with any color property. Nevertheless, it carries special meaning in certain contexts.

For painters the meaning of intensity is equivalent to the meaning ofsaturation.
For physicists intensity refers to different aspects of radiation.
When speaking of light, the intensity can mean the number of photons a light source emits.

The following sources provide a deeper insight:
– Luminosity
– Intensity
– Luminosity Function
– Lumen

Luma (%) is the intensity of the achromatic signal contributing to our color perception.
Brightness / (relative) Luminance

Brightness is an attribute of our perception which is mainly influenced by a color’s lightness. This is probably why brightness and lightness are often mixed up. Brightness is not a color property, if used “correctly”.

For one color of specific hue the perception of brightness is also more intense, if we increase saturation. A higher level of saturation makes a color look brighter.
In relation to other colors the brightness intensity of a color is also influenced by its hue. We can then speak of (relative) luminance to refer to brightness.

It’s very important to know more about luminance.

Grayscale

A grayscale is a series of neutral colors, ranging from black to white, or the other way around. Each step’s color value is usually shifted by constant amounts.

A grayscale color can be determined by a value of a one-dimensional color space:
On a white surface (e.g. paper) the grayscale color’s value equals to therelative intensity of black (ink) applied to the medium.
On a black surface (e.g. monitor) the grayscale color’s value equals to therelative intensity of white (light) applied to the medium.

Primary Colors

Primary Colors

In theory, the Primary Colors are the root of every other hue imaginable. The primary pigments used in the manufacture of paint come from the pure source element of that Hue. There are no other pigments blended in to alter the formula.

Think of the three Primaries as the Parents in the family of colors.

In paint pigments, pure Yellow, pure Red, and pure Blue are the only hues that can’t be created by mixing any other colors together. Printer inks and digital primaries are referred to as Yellow, Magenta and Cyan.

Secondary Colors

Secondary Colors

When you combine any two of the Pure Primary Hues, you get three new mixtures called Secondary Colors.

Think of the three Secondaries as the Children in the family of colors.

  •  Yellow Red ORANGE
  • Red + Blue VIOLET or PURPLE
  • Blue + Yellow GREEN

Tertiary Colors

Tertiary Colors

When you mix a Primary and its nearest Secondary on the Basic Color Wheel you create six new mixtures called Tertiary colors.

Think of the six Tertiary Colors as the Grandchildren in the family of colors, since their genetic makeup combines a Primary and Secondary color.

  • Yellow + Orange YELLOW-ORANGE
  • Red + Orange RED-ORANGE
  • Red + Violet RED-VIOLET
  • Blue + Violet = BLUE-VIOLET
  • Blue + Green = BLUE-GREEN
  • Yellow + Green = YELLOW-GREEN

leven basic colour terms

30 day blog challenge - day 3 - basic color terms. This opens a new browser window.

When Brent Berlin and Paul Kay introduced basic colour terms in their 1969 book ‘Basic color terms: Their Universality and Evolution’, it was the start of a new way of thinking about colour terms and colour naming.

Berlin and Kay 1969 study was a compilation of colour terms in 98 languages from around the world. Interestingly, in their cross-cultural research these main eleven colours could be identified within the many languages.

yellow – orange – red – purple – blue – green – pink – brown – grey – black – white

red, orange, yellow, green, blue, purple, pink, brown, grey, black and white.

A picture worth many words. The path to a more colorful language, according to Berlin and Kay (1969).

What it says is this. If a language has just two color terms, they will be a light and a dark shade – blacks and whites. Add a third color, and it’s going to be red. Add another, and it will be either green or yellow – you need five colors to have both. And when you get to six colors, the green splits into two, and you now have a blue. What we’re seeing here is a deeply trodden road that most languages seem to follow, towards greater visual discernment (92 of their 98 languages seemed to follow this basic route).

Fig1

Why should different cultures draw the same boundaries? If we speak different languages with largely independent histories, shouldn’t our ancestors have carved up the visual atlas rather differently?

First, cultures are quite different in how their words paint the world. Take a look at this interactive map. For the 110 cultures, you can see how many basic words they use for colors. To the Dani people who live in the highlands of New Guiniea, objects comes in just two shades. There’s mili for the cooler shades, from blues and greens to black, and mola for the lighter shades, like reds, yellows and white. Some languages have just three basic colors, others have 4, 5, 6, and so on. There’s even a debate as to whether the Pirahã tribe of the Amazon have any specialized color words at all! (If you ask a Pirahã tribe member to label something red, they’ll say that it’s blood-like).

But there’s still a pattern hidden in this diversity. You might be wondering what happened to the cartoon picture of languages. Is there still a main road? Or are there languages that travel off the beaten path? The answer is yes, to both questions.

Goodbye yellow brick road. A more refined picture of how languages name colors.

The picture looks like a mess, but keep in mind that five out of six languages surveyed follow the central route. So here’s the story. You start with a black-and-white world of darks and lights. There are warm colors, and cool colors, but no finer categories. Next, the reds and yellows separate away from white. You can now have a color for fire, or the fiery color of the sunset. There are tribes that have stopped here. Further down, blues and greens break away from black. Forests, skies, and oceans now come of their own in your visual vocabulary. Eventually, these colors separate further. First, red splits from yellow. And finally, blue from green. The forest unmingles from the sky. In the case of Japan, that last transition essentially happened in modern history!

via http://www.empiricalzeal.com/2012/06/05/the-crayola-fication-of-the-world-how-we-gave-colors-names-and-it-messed-with-our-brains-part-i/

Work done by Colin Ware (building off the work done by Kay and others(Ware, Colin (2000) Information Visualization, Perception for Design, San Francisco: Morgan Kaufman.) and his own work on perception, has produced maximum set of 12 colors that can be accurately differentiated by people with standard vision without errors. These colors (shown below) are: 1. Red, 2. Green, 3. Yellow, 4. Blue, 5. Black, 6. White, 7. Pink, 8. Cyan, 9. Gray,10. Orange, 11. Brown, 12. Purple.

Colors from Set 1 should be used before colors from Set 2.
These colors are the most easily identifiable colors based on perceptual research, and can be used to code data with a high degree of decoding accuracy in humans that do not experience color blindness.  The 12 colors above were then taken by me as a starting point in which to extract a larger set of colors in order to assign one color for every letter in the alphabet.
We tend to use qualifiers (darker, lighter, -ish, etc.) to describe the differences in colors instead of giving colors individual names.  (see Munsell Color System.)
People can distinguish the difference in hue, saturation and value (brightness) of in excess of a million color combinations (Halsey and Chapanis, 1951; Kaiser and Boynton, 1989) when colors are compared side by side in optimal lighting conditions.
 This being said, color memory in people is not very good, nor is the ability to discriminate among specific colors that are even remotely similar when separated by time.  In this situation the number of colors that can be readily identified drops to 12.

How the 26 colors were chosen

RGB hexadecimal value

You cannot specify these colours in HTML and CSS by their colour name but you can use their RGB hexadecimal value, eg:

    <font color="#800080">and in CSS you can also use their RGB decimal values, eg:

    P { rgb(128,0,128); }

Colour Words and Colour Categorization

500+ colors

The 330 Munsell chips in the WCS color chart. Of the chips, 320 consist of 40 hues spanning the color circle (arranged horizontally), each printed in 8 values (arranged vertically). An additional 10 chips are achromatic colors (sidebar).
The Munsell color table
the Munsell color system is a color space that specifies colors based on three color dimensions: hue, value (lightness), and chroma (color purity). It was created by Professor Albert H. Munsell in the first decade of the 20th century and adopted by the USDA as the official color system for soil research in the 1930s.

色彩空间YIQ,YUV,YCbCr,RGB(转)

对于数字电子多媒体领域来说,我们经常接触到的色彩空间的概念,主要是RGB , YUV这两种(实际上,这两种体系包含了许多种具体的颜色表达方式和模型,如sRGB, Adobe RGB, YUV422, YUV420 …), RGB是按三基色加光系统的原理来描述颜色,而YUV则是按照 亮度,色差的原理来描述颜色。

我们比较常接触到的就包括 RGB / CMYK / YIQ / YUV / HSI等等。

YIQ色彩空间:
YIQ色彩空间通常被北美的电视系统所采用,属于NTSC(National Television Standards Committee)系统。这里Y不是指黄色,而是指颜色的明视度(Luminance),即亮度(Brightness)。其实Y就是图像的灰度值(Gray value),而I和Q则是指色调(Chrominance),即描述图像色彩饱和度的属性。在YIQ系统中,Y分量代表图像的亮度信息I、Q两个分量则携带颜色信息I分量代表从橙色到青色的颜色变化,而Q分量则代表从紫色到黄绿色的颜色变化。将彩色图像从RGB转换到YIQ色彩空间,可以把彩色图像中的亮度信息与色度信息分开,分别独立进行处理。
RGB和YIQ的对应关系用下面的方程式表示:
Y = 0.299R + 0.587G + 0.114B
I = 0.596R – 0.275G – 0.321B
Q = 0.212R – 0.523G + 0.311B

YUV

YUV(亦称YCrCb)是被欧洲电视系统所采用的一种颜色编码方法(属于PAL),是PAL和SECAM模拟彩色电视制式采用的颜色空间。其中的Y,U,V几个字母不是英文单词的组合词,Y代表亮度,uv代表色差,u和v是构成彩色的两个分量。在现代彩色电视系统中,通常采用三管彩色摄影机或彩色CCD摄影机进行取像,然后把取得的彩色图像信号经分色、分别放大校正后得到RGB,再经过矩阵变换电路得到亮度信号Y和两个色差信号B-Y(即U)、R-Y(即V),最后发送端将亮度和色差三个信号分别进行编码,用同一信道发送出去。这种色彩的表示方法就是所谓的YUV色彩空间表示。采用YUV色彩空间的重要性是它的亮度信号Y和色度信号U、V是分离的。如果只有 Y信号分量而没有U、V信号分量,那么这样表示的图像就是黑白灰度图像。彩色电视采用YUV空间正是为了用亮度信号Y解决彩色电视机与黑白电视机的相容问题,使黑白电视机也能接收彩色电视信号。

“Y”表示明亮度(Luminance或Luma),也就是灰阶值;而“U”和“V” 表示的则是色度(Chrominance或Chroma),作用是描述影像色彩及饱和度,用于指定像素的颜色。“亮度”是透过RGB输入信号来建立的,方法是将RGB信号的特定部分叠加到一起。“色度”则定义了颜色的两个方面─色调与饱和度,分别用Cr和CB来表示。其中,Cr反映了GB输入信号红色部分与RGB信号亮度值之间的差异。而CB反映的是RGB输入信号蓝色部分与RGB信号亮度值之同的差异。

 RGB -> YUV:

        实际上也就是:Y=0.30R+0.59G+0.11B , U=0.493(B-Y) , V=0.877(R-Y)

多数情况下,我们需要的还是YUV2RGB的转换,因为从Sensor得到的数据通常我们会用YUV数据,此外JPG和MPEG实际上也是基于YUV格式编码的,所以要显示解码后的数据需要的也是YUV2RGB的运算

HSV for example uses the three components Hue, Saturation and Value, that very roughly speaking can be thought of as a color’s tint, vivacity and brightness (the terms used here have a very precise meaning in the color theory).
As an example, look at this “slice” of 3D HSV space:
hsv slice

placeholder css snippet

 

customize placeholder color:

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties.

::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }

/* custom placeholder color */
input::-webkit-input-placeholder {
color: rgba(255,255,255,0.8);
}

input:active::-webkit-input-placeholder ,
input:focus::-webkit-input-placeholder {
color: rgba(255,255,255,0.2);
}

input::-moz-placeholder {
color: rgba(255,255,255,0.8);
}

input:active::-moz-placeholder,
input:focus::-moz-placeholder {
color: rgba(255,255,255,0.2);
}

input:-ms-input-placeholder {
color: rgba(255,255,255,0.8);
}

input:active::-ms-input-placeholder ,
input:focus::-ms-input-placeholder {
color: rgba(255,255,255,0.2);
}

rgba(0,0,0,0.6)

The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency.

This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through.

CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA:

  • opacity level from 0 (completely transparent) to 1 (completely opaque).
  • first three values are red, green and blue. You can specify these 0-255 or 0%-100%.
h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
}

Heading with no transparency

Heading with 50% opacity on the element
h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	opacity: 0.5;
}
Heading with 50% opacity

50% opacity on just the background colour

h1 {
	color: rgb(0, 0, 0);
	background-color: rgba(255, 255, 255, 0.5);
}
Heading with 50% opacity on just the background

50% opacity on just the foreground colour

h1 {
	color: rgba(0, 0, 0, 0.5);
	background-color: rgb(255, 255, 255);
}
Heading with 50% opacity on just the foreground
more
http://24ways.org/2009/working-with-rgba-colour/
生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web