RGB Colour Picker: Blue to Magenta

$0.00

Clear

Description

To find out more about the diagram above . . . . read on!

RGB Colour Picker: Blue to Magenta

Look carefully at the diagram at the top of the page. Now check out the following questions (and answers)!

  1. What are RGB colours?
  2. What do the letters RGB refer to?
  3. Are colours produced by combining RGB primary colours called spectral colours?
  4. Why are RGB colours usually arranged as a colour wheel?
  5. Does a computer screen use the RGB or the CMYK colour model?

About the Diagram

Introducing the diagram! Read back and forward between the image at the top of the page and the explanation below!

This is one of a series of six colour pickers that together show all 1530 fully saturated RGB colours along with their codes. Fully saturated colours are produced by mixing two primary colours together.

Each diagram shows 256 colours starting with a primary and finishing with a secondary colour or visa-vera:

  • Red (primary colour) to yellow (secondary colour)
  • Yellow (secondary) to green (primary)
  • Green (primary) to cyan (secondary)
  • Cyan (secondary) to blue (primary)
  • Blue (primary) to magenta (secondary)
  • Magenta (secondary) to red (primary)

Understanding the diagram

  • All the colours in this diagram have been produced by mixing different proportion of blue and red light. The third primary colour, green, is always off.
  • The block of colour swatches is made up of 16 rows and 16 columns.
  • The first swatch at the top left shows blue which is a primary colour with its code 00, 00, 255.
  • The last swatch at the bottom right shows magenta which is a secondary colour with its code 00, 255, 255.
  • To make sense of RGB colours and codes it helps to understand how RGB colour notation works:
  • When mixing any RGB colour, three numbers (separated by commas) show how much red, green and blue light is to be used.
  • The minimum value for each light source is 0. In this case the light is fully off.
  • The maximum value for each light source is 255. In this case the light source is fully on.
  • As each number increases so does the intensity of the corresponding light but the wavelength, and so the colour we see, stays the same.
RGB colour values
Light source Red Green Blue
Maximum value for each light source (fully on) 255 , 255 , 255
Values between 0 and 255 1 to 254 1 to 254 1 to 254
Minimum value for each light source (fully off) 0 , 0 , 0

RGB colour values

Now let’s look at RGB colour values in detail

RGB colour values are represented by decimal triplets (base 10) or hexadecimal triplets (base 16). These triplets are used in software and apps to select a colour.

  • In decimal notation, an RGB triplet is used to represent the values of red, then green, then blue.
  • Decimal numbers between 0 and 255 are selected for each value:
  • Red = 255, 00, 00
  • Yellow = 255, 255, 00
  • Green = 00, 255, 00
  • Cyan = 00, 255, 255
  • Blue = 00, 00, 255
  • Magenta = 255, 00, 255
  • In hexadecimal notation, an RGB triplet is used to represent the value of red, then green, then blue.
  • Hexadecimal numbers between 00 and FF are selected for each value.
  • The hash symbol (#) is used to indicate hex notation:
  • Red = #FF0000
  • Yellow = #FFFF00
  • Green = #00FF00
  • Cyan = 00FFFF
  • Blue = #0000FF
  • Magenta = #FF00FF
  • The sequence of hexadecimal values between 1 and 16 are: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E and F.
  • The sequence of hexadecimal values between 17 and 32 are: 10,11,12,13,14,15,16,17,18,19,1A,1B,1C,1D,1E and 1F.

Follow the blue links for definitions . . . . or check the summaries of key terms below!

Some Key Terms

Move to the next level! Check out the following terms.

Additive colour

Additive colour is a method of mixing different wavelengths of light to produce other colours. An additive approach to colour ...
Read More

Colour

Things appear coloured because colour corresponds with a property of light that is visible to the human eye. The visual ...
Read More

Primary colour

Primary colours are a set of colours from which others can be produced by mixing (pigments, dyes etc.) or overlapping ...
Read More

RGB colour

To be clear about RGB colour it is useful to remember first that: The visible spectrum is the range of ...
Read More

RGB colour values

RGB colour values are expressed as decimal triplets or hexadecimal triplets and are used in software applications to select specific ...
Read More

Colour model

A colour model is a mathematical system used to describe colours using a set of numeric values. A colour model ...
Read More

More Information

ABOUT SLIDES

Slides

Some images on this website are available for download as either slides or diagrams.

Slides share common specifications:

  • Titles: Slides have titles.
  • Backgrounds: Black.
  • Size: 1686 x 1124 pixels (3:2 aspect ratio).
  • Slides are available in two file formats: JPG, AI (Adobe Illustrator).

Slides are optimized for viewing on-screen or with a projector.
Diagrams are optimized for printing on A4 pages in portrait format.

ABOUT DIAGRAMS

Diagrams

Some images on this website are available for download as either slides or diagrams.

Diagrams share common specifications:

  • Titles: No titles.
  • Backgrounds: White.
  • Size: 1686 pixels wide. So all diagrams reproduce at the same scale when inserted into Word documents etc.
  • Labels: Calibri 24pt Italic.
  • Diagrams are available in two file formats: JPG, AI (Adobe Illustrator).

Diagrams are optimized for printing on A4 pages in portrait format.
Slides are optimized for viewing on-screen or using a projector.

FILE TYPES - JPG

JPG file format

Download the image at the top of this page as a JPG file:

  • All JPG images available for download are 1686px wide.
  • Text on JPG images with white backgrounds is styled as Calibri 24pt Italic.
  • If the image you need is not exactly right, download it as an AI (Adobe Illustrator) file and edit it.
  • All the images on these Resource Pages were created in Adobe Illustrator and are vector drawings.

Did you know:

  • JPG stands for Joint Photographic Experts Group who created the standard.
  • The JPG file extension is used interchangeably with JPEG.
  • JPG files can be compressed for use on websites.
  • JPG files can be placed or pasted directly into MS Office documents.

FILE TYPES - AI

AI (Adobe Illustrator) file format

Download the image at the top of this page as an AI (Adobe Illustrator) file:

  • All AI images available for download from lightcolourvision.org are 1686px wide.
  • All the images on these Resource Pages were created in Adobe Illustrator and are vector drawings.
  • Vector drawing can be scaled up or down without any loss of quality.

Did you know:

  • AI  files downloaded from lightcolourvision.org can be re-edited using Adobe Illustrator for your own personal use.
  • Adobe Illustrator can save or export AI files to other formats including PDF (.pdf), PNG (.png), JPG (.jpeg) and SVG(.svg) etc.

DOWNLOAD AGREEMENT

Download agreement

Download Agreement

Before downloading or cutting and pasting from lightcolourvision.org we ask you to agree to the following terms:

  1. All information, images and other assets displayed or made available for download on the lightcolourvision.org website are copyright. This means there are limitations on how they can be used.
  2. All information, images and other assets displayed or made available for download are solely and exclusively to be used for personal, educational and non-profit purposes.
  3. When you find the resources you need, then part of the download process involves you (the user) ticking a box to let us (at lightcolourvision.org) know we both agree how the material can be used.
  4. Please contact [email protected] before considering any use not covered by the terms of the agreement above.

If you are a student, educator or researcher you might also like to read our posts Copyright: Credit where credit’s due and Citation and bibliographies before copying and pasting material into essays, assignments or other academic work. They include advice on avoiding plagiarism and how to credit other people’s words, images and assets before submitting your work for marking or assessment. If you are confused, just ask a friendly teacher, librarian, or other member of academic staff.

Like to know more?

Please contact [email protected] if you have questions about any aspect of this project.