Presentation color (kelompok 12)
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Presentation color (kelompok 12)






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Presentation color (kelompok 12) Presentation Transcript

  • 1. Choose the Proper ColorAfdhal Dinilhak G64124026Dody Prasetya G64124034Erlangga Adinegoro G64124042Novi Indra G64124069
  • 2. Whats is it? Wavelengths of light themselves are notcolored. What is perceived as actual color resultsfrom the stimulation of the properreceptor in the eye by a received lightwave.2
  • 3. Color The Visible Spectrum3
  • 4. ColorTo describe a color, it is useful to refer to the three properties itpossesses: Hue : Spectral wavelength composition of a color. chroma or saturation : Purity of a color in a scale from gray to themost vivid version of the color. value or intensity : Relative light-ness or darkness of a color in arange from black to white.4
  • 5. ColorRGB Many color monitors use the three primary colors of light, invarious combinations, to create the many colors we see onscreens. By adjusting the amounts of red, green, and blue light presentedin a pixel, millions of colors can be generated. Hence, colorpalette editors exist with labels R, G, and B (or the words spelledout).5
  • 6. ColorHSV Some palette editors use a convention based on the Munsellmethod of color notation called HSV, for hue, saturation, andvalue (or HSL for hue, saturation, and lightness). Again, variouscombinations produce different colors.6
  • 7. Color Uses Color as a Formating Aid Color as a Visual Code Other Color Uses7
  • 8. Possible Problems with Color High Attention-Getting Capacity Interference with Use of Other Screens Varying Sensitivity of the Eye to Different Colors Color-Viewing Deficiencies Color Connotations Cross-Disciplinary and Cross-Cultural Differences8
  • 9. Color — What the Research Shows To illustrate, on a positive note, color has been shown toimprove performance (Kopala, 1981; Nagy and Sanchez,1992; Sidorsky, 1982) To improve visual search time (Christ, 1975; Carter, 1982) To be useful for organizing information (Engel, 1980) To aid memory (Marcus, 1986b) To demarcate a portion of a screen (as opposed to lines ortype font, Wopking et al., 1985).9
  • 10. Color — What the Research ShowsImprove visual search time with colorTo aid memory with color10
  • 11. Color and Human Vision The Lens Focus received wavelengths of light on the retina The lens itself is not color corrected The Retina Light-sensitive surface of the eye Comprises two kinds of receptors, rods and cones11
  • 12. Choosing ColorsOne must consider the following factors : The human visual system The possible problems that the colors use may cause The viewing environment in which the display is used The task of the user How the colors will be used The hardware on which the colors will be displayed12
  • 13. Choosing Colors Requires a clear understanding of how the information will be used Use color as a redundant screen code.Categories : color chosen to organize information or data on a screenmust aid the transfer of information from the display to the user.Redundancy : never rely on color as the only way of identifying ascreen element or process. Choosing Colors for Categories of Information13
  • 14. Choosing Colors Colors are subject to contextual effects. The size of a coloredimage, the color of images adjacent to it, and the ambientillumination all exert an influence on what is actually perceived. Adjacent images can influence the perceived color. A color on a darkbackground will look lighter and brighter than the same color on alight background Colors in Context14
  • 15. Choosing Colors Design for monochrome first, or in shades of black, white and gray. Use colors conservatively. Do not use color where other identification techniques, such aslocation, are available. Usage15
  • 16. Choosing Colors For best absolute discrimination, select no more than four or five colorswidely spaced on the color spectrum. Good colors: red, yellow, green, blue, and brown For best comparative discrimination, select no more than six or sevencolors widely spaced on the color spectrum Other acceptable colors: orange, yellow-green, cyan, violet, andmagenta Choose harmonious colors One color plus two colors on either side of its complement. Three colors at equidistant points around the color circle. For extended viewing or older viewers, use brighter colors Discrimination and Harmony16
  • 17. Choosing Colors To draw attention or to emphasize elements, use bright or highlightedcolors. To deemphasize elements, use less bright colors. The perceived brightness of colors from most to least iswhite, yellow, green, red, blue. To emphasize separation, use contrasting colors. Red and green, blue and yellow. To convey similarity, use similar colors. Orange and yellow, blue and violet. Emphasis17
  • 18. Choosing Colors To indicate that actions are necessary, use warm colors. Red, orange, yellow. To provide status or background information, use cool colors. Green, blue, violet, purple. Conform to human expectations. In the job. In the world at large Common Meanings18
  • 19. Choosing Colors In the center of the visual field, use red and green. For peripheral viewing, use blue, yellow, black, and white. Use adjacent colors that differ by hue and value or lightness Location19
  • 20. Choosing Colors Order colors by their spectral position. Red, orange, yellow, green, blue, indigo, violet Ordering20
  • 21. Choosing Colors Foregrounds: Use colors that highly contrast with the background color. For text or data, use Black Desaturated or spectrum center colors such as white, yellow,or green. Warmer more active colors. Use colors that possess the same saturation and lightness. To emphasize an element, highlight it in a light value of the foregroundcolor, pure white, or yellow. To deemphasize an element, lowlight it in a dark value of theforeground color. Foregrounds and Backgrounds21
  • 22. Choosing Colors Backgrounds: Use a background color to organize a group of elements into a unifiedwhole. Use colors that do not compete with the foreground. Use• Light-colored backgrounds of low intensity: off-white or light gray.• Desaturated colors.• Cool, dark colors such as blue or black.• Colors on the spectral extremes Foregrounds and Backgrounds22
  • 23. Choosing Colors Use at least five colors or color values to create a 3-D look on a screen. Background: the control itself and the window on which it appears. Foreground: captions and lines for buttons, icons, and other objects.• Usually black or white. Selected mode: the color used when the item is selected. Top shadow: the bezel on the top and left of the control. Bottom shadow: the bezel on the bottom and right of the control Three-Dimensional Look23
  • 24. Color Palette, Defaults, and Customization Permit users to customize their colors. Provide a default set of colors for all screen components. Provide a palette of six or seven foreground colors.• Provide two to five values or lightness shades for eachforeground color. Provide a palette of six or seven background colors. Never refer to a screen element by its color.24
  • 25. Customization Because color preference is subjective. Compared were displayed color combinations that were judged tobe “good” or “poor.” When color customization is permitted, whenever possible allowusers to see the results of their color choices before they areapplied. Include a sample screen in a preview function within thecustomization process.25
  • 26. Default set Both the Macintosh and Microsoft Windows provide standard, well-thought-out color schemes. Do not provide the color spectrum; limit the number of choicesavailable. A maximum of six or seven foreground and background colors willprovide the necessary variety. With these palettes, however, some sort of guidance concerningmaximum number of colors to use and what are good and poorcombinations should be provided.26
  • 27. Grayscale For fine discriminations use a black-gray-white scale. Recommended values are white, light gray, medium gray, darkgray, black. The eye resolves fine detail much better on a black-white scale. Marcus (1986b) recommends five tonal values for black andwhite, higher-resolution screens: black, dark gray, mediumgray, light gray, and white.27
  • 28. Text in ColorWhen switching text from black to color, Double the width of lines. Use bold or larger type.• If originally 8 to 12 points, increase by 1 to 2 points.• If originally 14 to 24 points, increase by 2 to 4 points.Check legibility by squinting at text. Too-light type will recede or even disappear.28
  • 29. Monochromatic Screens At the standard viewing distance, white, orange, or green areacceptable colors. At a far viewing distance, white is the best choice. Over all viewing distances, from near to far, white is the bestchoice29
  • 30. Considerations for People with Color-Viewing Deficiencies Use color combinations that canbe easily discriminated. Ensure that the lightness contrastbetween foreground colors is high.30 Use color combinations that can be easily discriminated. Ensure that the lightness contrast between foreground colors ishigh.
  • 31. Cultural, Disciplinary, and Accessibility ConsiderationsConsider the impact of specific colors on : Users of various cultures. Users of various disciplines. Users relying on accessibility utilities.31
  • 32. Choosing Colors for Textual Graphic Screens Use effective foreground/background combinations. Use effective foreground combinations. Choose the background color first. Display no more than four colors at one time. Use colors in toolbars sparingly. Test the chosen colors.32
  • 33. Use effective foreground/background combinations33
  • 34. Choosing Colors for Statistical Graphics Screens Emphasis Number of Colors Backgrounds Size Status34
  • 35. Choosing Colors for Statistical Graphics Screens Measurements and Area-Fill Patterns Physical Impressions Size Weight Distance Height Depth Concentration Level Magnitude of Change Action Order Neutrality35
  • 36. Choosing Colors for Web PagesPurpose: Color must always have a meaningful purpose.Palette: Use the browser 216-color palette.Presentation: Minimize the number of presented colors. Always consider color in context. Use similar or the same color schemes throughout. For foregrounds: Use black or strong colors for text andheadings. For backgrounds: Use weaker contrasting colors such as off-whiteor light gray.36
  • 37. 37
  • 38. Choosing Colors for Web Pages Relying exclusively on color. Too many colors at one time. Highly saturated, spectrally extreme colors together: Red and blue, yellow and purple. Low-brightness colors for extended viewing or older viewers. Colors of equal brightness.38
  • 39. Uses of Color to AvoidLinks: Use default colors for links. Make unselected/unvisited links blue. Make selected/visited links purple. Do not display non-link text in link colors.Testing: Test all colors.39
  • 40. Uses of Color to Avoid Colors lacking contrast. Fully saturated colors for text or other frequently-read screencomponents. Pure blue for text, thin lines, and small shapes. Colors in small areas. Color for fine details.40
  • 41. Uses of Color to Avoid Non-opponent colors. Red and green in the periphery of large-scale displays. Adjacent colors that only differ in the amount of blue they possess. Single-color distinctions for color-deficient users. Using colors in unexpected ways. Using color to improve legibility of densely packed text.41
  • 42. THANK YOU42