rgb
Learn about colo(u)r and how it's represented in computer science.
Understanding Digital Colour: RGB and Hex Codes
1
How Screens Create Colour (The RGB Model)
Unlike mixing paint in art class (where mixing colours makes things darker), computer screens work by mixing light. This is called Additive Colour Mixing.
Primary Colours: Screens use three primary colours of light: Red, Green, and Blue (RGB).
Channels: Each colour has its own "channel". By changing the intensity of each channel, we can create over 16 million different colours.
The Values (0-255): Computer data is stored in bits and bytes. Each colour channel is allocated 8 bits, allowing for 256 possible levels of intensity:
0 = No light (Black)
255 = Full intensity
Example: If you turn Red, Green, and Blue all to 255, you get White. If you turn them all to 0, you get Black.
2
Decoding Hexadecimal (Hex Codes)
You will often see colours written as a code like #C1DCFF. This is a Hexadecimal (or Hex) code. It is just a translation of the RGB values into a format that is easier for computers to read.
Base-16 System
While we count in Base-10 (0-9), Hex counts in Base-16 (0-9, then A-F). 0-9 are the same. A=10, B=11, C=12, D=13, E=14 and F=15. The code uses two digits for each colour channel:
# RR GG BBThe first two digits represent Red, the middle two Green, and the last two Blue.
3
What is Alpha?
The Alpha channel controls transparency (or opacity).
100% means the colour is solid.
0% means the colour is completely invisible.
In digital design, transparency is often represented by a checkerboard pattern underneath the colour.
How to Use This Tool
Use the interactive workspace above to experiment with colour theory:
Adjust the Channels: Use the Red, Green, and Blue sliders to change the amount of light for each channel. You can also type specific numbers (0-255) into the boxes on the right.
Explore the Panels:
Preview: Shows the final solid colour.
Additive: Shows how the three spotlights of colour mix together.
LCD: Simulates how the pixels on your monitor actually look. Use the Fuzz slider to adjust the clarity.
Get the Code:
The tool automatically generates the RGB string (for CSS) and the Hex code (for HTML/Design).
Click the Copy button (clipboard icon) to use the code in your own projects.
Shortcuts
🌐
hexcodle.com
Last modified: January 7th, 2026
