menu button

Color

RGB

In the RGB color model, a color is composed by 3 color channels:

- red
- green
- blue

The value of each color channel is an integer number in the range 0 to 255.


Greater the value of the channel, lighter is the color:

- rgb(0, 0, 0) -> black

- rgb(255, 255, 255) -> white


This model is simple but not perfectly symmetric. For example:

color rgb(0, 255, 0) has more luminosity than color rgb(0, 0, 255).

RGBA

If a pixel is blank (absolutely transparent) or translucent we need to add the alpha channel to the RGB color model.

When alpha is 0, the color is blank .

When alpha is 255, the color is opaque.

When alpha is in the range 1 to 254, the color is translucent.


Examples:

- rgba(0, 0, 0, 0) -> blank

- rgba(0, 0, 0, 255) -> black (opaque)

- rgba(255,0,0,100) -> translucent red

HSL

Other form to express a color is the HSL model:


- hue (0 to 360 degrees)
- saturation (0 to 100%)
- lightness (0 to 100%)

HSL is more artist friendly than RGB.
If you want a color a bit darker, you just change the lightness a bit.
If you have a green color and want a blue color with same luminosity and saturation, all you have to do is change the hue.

Color In Practice

BobSprite keeps the RGBA model, because it is how computers manage the colors internally.
And because it is simple and uniform.

And to make it very easy for you pick up colors, BobSprite has 4 buttons:

> - bright
> + bright
> - contrast
> + contrast


Bright Contrast buttons



Each time you click one of them the current color will change:

They are very useful to make shades, keeping the hue.

Convention

We don't say "same color but other tonality", we say "other color".

"Same color" means that the RGBA numbers of two samples are exactly the same.


Ornamental Shield Quest (Tibia)