RGB color codes are used to specify colors on electronic devices such as computers, phones, and tablets. RGB stands for Red, Green, and Blue, and by mixing different intensities of these three colors, millions of other colors can be reproduced. Understanding RGB color mixing allows designers and developers to choose and control colors precisely for displays and digital projects.
What is RGB color?
RGB color is a way to describe colors using combinations of red, green, and blue light. When red, green, and blue light are mixed together in different ratios, they can create all the colors we see on digital screens.
The RGB color model is an additive color model, meaning the more of each color you add, the lighter the resulting color will be. Starting from black (no color), adding maximal red, green and blue will result in white. The colors are defined by specifying the intensity of each one. This is done on a scale from 0 to 255, where 0 means none of that color, and 255 means maximum intensity.
By mixing red, green and blue in different ratios, millions of different colors can be reproduced. For example, bright red is R=255, G=0, B=0. White is R=255, G=255, B=255. Dark grey is around R=169, G=169, B=169. The possibilities are vast.
How are RGB values specified?
RGB values are generally specified with 3 numbers ranging from 0 to 255, or hexadecimal triplets from 00 to FF. There are a few ways to denote an RGB color:
- Decimal (base 10): rgb(255, 255, 0)
- Percentages: rgb(100%, 50%, 0%)
- Hexadecimal (base 16): #FFFF00
The decimal and percentage notations define the intensity of each color from 0-255 (which is the same as 0% to 100%). Hexadecimal is a compact way to write RGB values using base-16 numbers from 00 to FF. All these formats can be used interchangeably to define colors in code.
Primary colors in RGB
The primary colors in the RGB color model are red, green and blue. By convention:
- Red is represented by the red component
- Green is represented by the green component
- Blue is represented by the blue component
Mixing the primary colors together creates secondary colors:
- Red + Green = Yellow
- Red + Blue = Magenta
- Green + Blue = Cyan
Combining all three primary colors together creates white. The secondary colors are useful to remember when mixing colors in RGB.
RGB color wheel
The relationship between primary and secondary colors can be visualized on a color wheel:
An RGB color wheel illustrates how the primary and secondary colors relate based on their red, green and blue components. For example yellow, made of red and green, is opposite blue on the color wheel. This color wheel is useful for understanding color relationships and complements.
RGB color picker
An RGB color picker is a tool that helps select colors for digital design:
With an RGB color picker, you can visually choose colors by clicking on a color wheel or spectrum. The red, green and blue values are adjustable through sliders or text input. This makes it easy to experiment with color mixing and preview how changes in the RGB values affect the colors produced.
RGB color codes
RGB colors can be precisely specified using color codes:
- Decimal – rgb(255, 0, 0)
- Percentage – rgb(100%, 0%, 0%)
- Hexadecimal – #FF0000
These all define the exact same red color, but allow it to be specified in code in different formats. Hexadecimal color codes are the most compact and commonly used format on the web, starting with # followed by 6 hexadecimal digits from 00 to FF.
Here are some common RGB color codes:
| Color | Decimal | Hex Code |
|---|---|---|
| Red | rgb(255, 0, 0) | #FF0000 |
| Green | rgb(0, 255, 0) | #00FF00 |
| Blue | rgb(0, 0, 255) | #0000FF |
| White | rgb(255, 255, 255) | #FFFFFF |
| Black | rgb(0, 0, 0) | #000000 |
These codes precisely define common colors for use on the web and in design programs.
RGB color mixing
By mixing red, green and blue in varying ratios, a wide range of colors can be created. Here is how RGB color mixing works:
- Start with black (0,0,0) and add increasing amounts of red, green and blue to make colors lighter and more vibrant.
- Equal amounts of R, G and B make shades of grey from black to white.
- More red than green and blue makes vibrant reds.
- More green makes greens, and more blue makes blues.
- Combining two primaries makes secondary colors – red and green makes yellow, red and blue makes magenta, green and blue makes cyan.
For example, here are some examples of mixing colors in RGB:
| Color Mix | RGB Code |
|---|---|
| Red + Green | rgb(255, 255, 0) / #FFFF00 (yellow) |
| Red + Blue | rgb(255, 0, 255) / #FF00FF (magenta) |
| Green + Blue | rgb(0, 255, 255) / #00FFFF (cyan) |
| Equal R, G, B | rgb(127, 127, 127) / #7F7F7F (grey) |
By learning color theory and how RGB colors mix, you can start to predict the colors that different RGB values will create. This helps choose precise colors when coding designs, graphics and web pages.
RGB color mixing tools
There are handy online tools that help visualize how RGB colors mix and preview the colors created by different RGB values:
- Hex Color Tool Color Mixer – Mix RGB colors visually with sliders
- Commuter Creative Color Mixer – See RGB mixes update in real time
- RapidTables RGB Color Mixer – Combine RGB values and see hex codes
These kinds of color mixing tools make it easy to play with the red, green and blue components and preview the resulting mixed colors instantly. They are handy references for choosing colors for web design projects in CSS, SVG, and more.
RGB color schemes
Creative use of color is vital in design work. RGB codes allow precise control over color schemes. Here are some tips for effective RGB color schemes:
- Analogous – Colors next to each other on the color wheel, harmonious and calming (ex: shades of red, orange and yellow)
- Complementary – Opposite colors on the wheel, creates high contrast (ex: red & green, blue & orange)
- Triadic – Colors equally spaced around the color wheel (ex: red, green, blue primary colors)
- Tetradic – Two sets of complementary colors from the wheel (ex: red & green, with yellow & purple)
- Monochromatic – Shades, tints and tones of a single color (ex: light pink to maroon)
RGB codes allow you to strategically craft color schemes like these for strong visual harmony. Complementary and triadic schemes are vibrant, analogous is serene, and monochromatic is elegant.
RGB on the web
RGB color codes are widely used in web design. Here are some examples:
HTML
Hex RGB colors are defined in HTML like:
“`html
Hello World
“`
CSS
RGB colors can be used for text, backgrounds, borders and other properties in CSS:
“`css
body {
color: rgb(255, 255, 255);
background: #333;
}
button {
border: 5px solid #CC3366;
}
“`
JavaScript
RGB colors can be used and manipulated in JavaScript for data visualization and animations:
“`js
const red = ‘rgb(255, 0, 0)’;
chart.style(‘backgroundColor’, red);
“`
Graphics
RGB codes define colors used in SVG, canvas, 3D graphics, visualizations, and game development.
So RGB color is versatile for all areas of web development and digital design.
Conclusion
RGB color provides a precise, numeric way to represent colors digitally with red, green and blue components. By mixing the primary colors and their intensities from 0 to 255, millions of colors can be created. RGB codes allow colors to be specified in CSS, SVG, graphics programming, and anywhere colors are needed for web and interface design. Understanding color theory helps create attractive color schemes. There are many online tools to assist with RGB color mixing and selection. RGB color is fundamental for controlling color in the digital world.
