1 / 16

Understanding RGB to HEX Color Conversion and Manipulation

Learn about the RGB to HEX color conversion process, how colors are created through different intensity levels, and how to manipulate colors using hexadecimal codes. Explore the wide range of colors that can be achieved through RGB combinations.

martinrichard
Download Presentation

Understanding RGB to HEX Color Conversion and Manipulation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 48 03 15 # Red Green Blue Digital Color • RGB to HEX

  2. Color Pixels • Each pixel composed red, green and blue phosphers with black mask. • Each channel of the RGB has brightness levels between 0 to 255. • Total number of possible colors is 256*256*256 = 16,777,216 • The human eye blends RGB pixels into range of other colors depending on the light.

  3. Color Saturation • Color Saturation is how bright or dull the color is • Color Saturation on the computer is controlled by the intensity of the electrons firing in the RGB filters. • High intensity means more light coming through the color phosphers which makes the screen color brighter • Lower intensity means less light coming through the color phosphers which makes the screen color duller.

  4. The Way it Works • All phosphors without electrons firing gives black color • All phosphors with full electron intensity gives white • All phosphors equal amount electrons at lower intensity gives gray Pixel

  5. The Way it Works • All red phosphors gives red color at high intensity • All green phosphors at high intensity gives green • All blue phosphors at high intensity gives blue Pixel

  6. The Way it Works • Green & red at high intensity display yellow • Green & blue at high intensity display cyan • Blue & red at high intensity display magenta Pixel

  7. The Way it Works Different brightness level RGB combos create different pixel colors • Green at lower intensity & red at higher intensity can create orange • Green at lower intensity & red at higher & blue at higher intensity can create pink • Green at higher intensity, blue at higher intensity & red at lower intensity can create light blue Pixel

  8. Decimal System 1 2 3 4 5 6 7 8 9 • Based on human anatomy (fingers & toes) - base of 10 • Any number combo can be made by adding on another number

  9. Hexadecimal Color System • Base 16 number system • Last 6 numbers represented by letters 1 2 3 4 5 6 7 8 9 A B C D E F

  10. Decimal - Hexadecimal RGB is in decimal form – Web color in hexadecimal form Decimal Hexadecimal Decimal Hexadecimal 0 is the first number of both systems 0=00 255=FF

  11. RGB to Hex • Brightness levels of pixels - 0 to 255 (RGB) • In web, Hex color system describes the color levels of the pixel • 00=0, FF=255

  12. How it Works = 00 00 00 = FF FF FF = 99 99 99 RGB Neutral Colors in Hex Code form Pixel

  13. How it Works = FF 00 00 = 00 00 FF = 00 00 FF RGB Primary Colors in Hex Code form Pixel

  14. How it Works = FF FF 00 = 00 FF FF = FF 00 FF RGB Secondary Colors in Hex Code form Pixel

  15. Hex Color Manipulation • Hex code shorthand - #369 also means #336699 • When number pairs are farther apart, color changes significantly in saturation -#376696 • When the numbers are closer together – color results are more neutral in brightness tone - #373046

  16. Examples of wide number spread in the pairs #663796 #669637 #376696 Examples of narrow number spread in the pairs #303846 #383046 #304638

More Related