RGB/RGBA

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## Introduction

**RGB** stands for Red, Green, and Blue. It is mainly used for CSS, but it can also be used in HTML and WikiText as well. However, **RGBA** stands for Red, Green, Blue, then Alpha channel and is used in CSS, HTML and WikiText. RGBA is more used for designs, backgrounds, or layers.

## How to Use it

All the shades of red, blue, and green are in this. You have to select a certain specific shade of each color, combine them like mixing paint and, the new color comes up.

The thing is, these come with numbers. A light shade of red would be 25 or 33.

## Inserting it in Coding

Usually, when you code the text color, you do: <span style="color:blue;"> text </span> or <div style="color:blue">.

Well, let us observe the "color:blue" part. Hmmmm. Perhaps we could replace it with RGB. How to do this? Well, first what color do we want to make? Purple? Let's try a variety!<span style="color:rgb(90,56,123);">Text here</span>

Here's how it is in result: Result!

## Helpful Links

* An RGB color picker
* Google's color picker - with conversions to many other color formats!
* Second RGBA color picker
Third RGBA Colour Picker Hex-to-RGBA

## Colors

Let us just guess this will be never-ending. It's worth a try! If you know a combination, post here using the same format as others.

* rgb(0,0,0) - black
* rgb(0,255,0) - green
* rgb(255,255,255) - white
* rgb(0,0,255) - blue
* rgb(255,0,0) - red
* rgb(176,224,230) - light blue
* rgb(29,92,2) - dark green
* rgb(12,72,84) - teal
* rgb(255,0,255) - magenta
* rgb(160,0,160) - purple
* rgb(192,192,192) - silver
* rgb(242, 149, 29) - orange
* rgb(252, 248, 8) - yellow
* rgb(252, 141, 236) - pink
* rgb(0, 251, 255) - cyan
* rgb(25, 25, 112) - midnightblue
* rgb(204, 204, 255) - periwinkle
* rgb(0, 128, 128) - teal
* rgb(64, 224, 208) - turquoise

You can find a much longer list of named colors on w3schools website (external).
If you just think of white being every color (or rgb(255,255,255)), and black being the absence of color (or rgb(0,0,0)), this makes RGB much easier to guess.

# RGBA

**RGBA** stands for Red, Green, Blue, then Alpha channel. This is more used for designs, backgrounds, or layers, as said above.

## How to use RGBA

RGBA is basically the same thing as normal RGB. However, the A, or alpha channel, represents how transparent or opaque the color is.

Hi
The code for this:

```
<div style="background:radial-gradient(rgba(214, 255, 255, .3) 23px, #fff, transparent 25px), radial-gradient(rgba(200, 239, 255, 0.4) 23px, #fff, transparent 25px) 25px 25px, #FFF; background-size:50px 50px; border:8px dotted lightgrey;padding: 10px; height:auto; width:auto;">(The light blue background.)
<div style="background:rgba(255, 255, 255, .6);border:6px dotted lightgrey; border-radius:2pc 2pc 0 0; margin:10px; padding-right:10px;padding-left:10px; text-align:center;box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3), inset 0 0 5pc rgba(240,240,240,0.1);color:black;">(The box.)</div></div>
```

If you look closely at the header above, you can notice that the background has circles layered throughout in two different shades of blue. Also, the grey is slightly transparent.

## Inserting in Coding

As before, it's very similar to RGB. In RGB, you would write it as:

<span style="color:rgb(90,56,123);">Result!</span>

**The result:**

Result!

In RGBA, you can make it lighter by saying:

<span style="color:rgba(90,56,123,0.2);">Result!</span>

**The result:**

Result!

This is a much paler purple than above. You can also use the same code for RGBA as you did with RGB, but with the Alpha value, so you don't need to have rgba, just rgb!