Update
This commit is contained in:
parent
895f96a007
commit
531fb64cc1
34 changed files with 2009 additions and 1971 deletions
8
color.md
8
color.md
|
@ -45,7 +45,7 @@ Let's list some of the most common color models/representations (conversions bet
|
|||
- **YUV**: Represents color as one "brightness" value (Y) and two "chroma" values (U and V). Taking only the Y channel would give us a grayscale picture, and the additional U and V components give it full color. This has many advantages, for example if we have a three-wire cable carrying YUV signal, black-and-white screens can just take the Y channel and ignore the other two.
|
||||
- **YCbCr**: Similar to YUV, mostly used in encoding of digital [video](video.md) because the separation of intensity and chroma channels allows for good lossy [compression](compression.md) by subsampling (using lower resolution for) chroma, while keeping good resolution for intensity (to which our sight is more sensitive).
|
||||
- **grayscale**: Straightforward model for "black and white" (or otherwise monochrome) images in which each pixel just has a single *intensity* ("brightness") value.
|
||||
- **indexed** ([palette](palette.md)): Not exactly a "model" but rather a computer representation. Indexed color means that that we have some given palette and then each color is represented simply as a whole number that points to the palette (i.e. color is an index). Colors in the palette can be represented in any model and color depth, for example 24 bit RGB -- the advantage is that representation of a color (i.e. each pixel) can take relatively small space, depending on how many colors there are in the palette (e.g. with a 256 color palette each pixel will only require 8 bits).
|
||||
- **indexed** ([palette](palette.md)): Not exactly a "model" but rather a computer representation. Indexed color means that we have some given palette and then each color is represented simply as a whole number that points to the palette (i.e. color is an index). Colors in the palette can be represented in any model and color depth, for example 24 bit RGB -- the advantage is that representation of a color (i.e. each pixel) can take relatively small space, depending on how many colors there are in the palette (e.g. with a 256 color palette each pixel will only require 8 bits).
|
||||
- other ones: BGR (RGB with different order of components), HCL (hue, chroma, luminance), HCV (hue, chroma, value), ...
|
||||
|
||||
Now given a model such as RGB, a mathematician will like to represent each of the components as a [real number](real_number.md) in the range between 0 and 1, i.e. for example the red color would be represented as [1,0,0]. As programmers, however, we'll eventually have to quantize the values and thus we have to also talk about so called **color depth**, a value saying how many [bits](bit.md) we allocate for a color representation -- the term *bits per pixel* (BPP) is frequently encountered as a unit here. For example the standard for the RGB model is nowadays 8 bits per component, i.e. 24 bits in total, and so it is sometimes called RGB24 (this frequently gets extended to RGB32 by adding another 8bit alpha component, which expresses transparency; this is convenient as 32bit values nicely align in memory). 24bit RGB values are commonly expressed in hexadecimal where, very conveniently, each pair of digits represents one component: for example the color green might be written as `#00ff00` (sometimes even shorter forms are allowed, e.g. [CSS](css.md) also supports `#0f0`). Color depth, naturally, will imply how many colors in total we'll be able to represent. Some devices possess higher color depth (see mainly [HDR](hdr.md)) and some have lower (e.g. [RGB332](rgb332.md) uses 8, [RGB565](rgb565.md) uses 16 etc.). In case we can't split the number of bits evenly, we should allocate more bits for the components that "matter more" in terms of human vision -- for example [RGB565](rgb565.md) allocates 5 bits to red and blue and 6 bits to green, as human eye is most sensitive to green. Especially with lower color depths tricks such as [dithering](dithering.md) can be used to visually simulate more colors.
|
||||
|
@ -65,6 +65,7 @@ The following is a table of some common colors:
|
|||
| black | 0 | 0 | 0 | 1 | 1 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |`000000`|`0000`| `00` | lack of light, complementary to white |
|
||||
| red | 1 | 0 | 0 | 0 | 1 | 1 | 0 | 1 | 1 | 1 | 1 | 0.5 | 0.29 |`ff0000`|`f800`| `e0` | ~685 nm, RGB primary, complementary to cyan |
|
||||
| orange | 1 | 0.5 | 0 | 0 | 0.5 | 1 | 0.08| 1 | 1 | 1 | 1 | 0.5 | 0.59 |`ff8000`|`fc00`| `f0` | ~605 nm, RGB tertiary, AKA light brown |
|
||||
| azure | 0 | 0.5 | 1 | 1 | 0.5 | 0 | 0.57| 1 | 1 | 1 | 1 | 0.5 | 0.44 |`0080ff`|`041f`| `13` | |
|
||||
| yellow | 1 | 1 | 0 | 0 | 0 | 1 | 0.16| 1 | 1 | 1 | 1 | 0.5 | 0.88 |`ffff00`|`ffe0`| `fc` | ~580 nm, RGB secondary, complementary to blue |
|
||||
| green | 0 | 1 | 0 | 1 | 0 | 1 | 0.33| 1 | 1 | 1 | 1 | 0.5 | 0.58 |`00ff00`|`07e0`| `1c` | ~532 nm, RGB primary, complementary to pink |
|
||||
| cyan | 0 | 1 | 1 | 1 | 0 | 0 | 0.5 | 1 | 1 | 1 | 1 | 0.5 | 0.7 |`00ffff`|`07ff`| `1f` | ~512 nm, RGB secondary, complementary to red |
|
||||
|
@ -83,10 +84,11 @@ The following is a table of some common colors:
|
|||
| brown | 0.5 | 0.25| 0 | 0.5| 0.75 | 1 | 0.08| 0.5 | 1 | 1 | 0.5 | 0.25 | 0.29 |`804000`|`8200`| `88` | AKA dark orange |
|
||||
| dark yellow | 0.5 | 0.5 | 0 | 0.5| 0.5 | 1 | 0.16| 0.5 | 1 | 1 | 0.5 | 0.25 | 0.44 |`808000`|`8400`| `90` | |
|
||||
| dark green | 0 | 0.5 | 0 | 1 | 0.5 | 1 | 0.33| 0.5 | 1 | 1 | 0.5 | 0.25 | 0.29 |`008000`|`0400`| `10` | |
|
||||
| dark cyan | 0 | 0.5 | 0.5 | 1 | 0.5 | 0.5 | 0.5 | 0.5 | 1 | 1 | 0.5 | 0.25 | 0.35 |`008080`|`0410`| `12` | |
|
||||
| teal | 0 | 0.5 | 0.5 | 1 | 0.5 | 0.5 | 0.5 | 0.5 | 1 | 1 | 0.5 | 0.25 | 0.35 |`008080`|`0410`| `12` | AKA dark cyan |
|
||||
| dark blue | 0 | 0 | 0.5 | 1 | 1 | 0.5 | 0.66| 0.5 | 1 | 1 | 0.5 | 0.25 | 0.05 |`000080`|`0010`| `02` | |
|
||||
| dark violet | 0.25| 0 | 0.5 |0.75| 1 | 0.5 | 0.75| 0.5 | 1 | 1 | 0.5 | 0.25 | 0.13 |`c00080`|`4010`| `42` | |
|
||||
| dark pink | 0.5 | 0 | 0.5 | 0.5| 1 | 0.5 | 0.83| 0.5 | 1 | 1 | 0.5 | 0.25 | 0.2 |`800080`|`8010`| `82` | |
|
||||
| purple | 0.5 | 0 | 0.5 | 0.5| 1 | 0.5 | 0.83| 0.5 | 1 | 1 | 0.5 | 0.25 | 0.2 |`800080`|`8010`| `82` | AKA dark pink |
|
||||
| indigo | 0.3 | 0 | 0.5 | 0.7| 1 | 0.5 | 0.75| 0.5 | 1 | 1 | 0.5 | 0.25 | 0.18 |`4b0082`|`4810`| `42` | |
|
||||
|
||||
## Code And Conversions
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue