presentation color (kelompok 12)
TRANSCRIPT
![Page 1: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/1.jpg)
Choose the Proper Color
Afdhal Dinilhak G64124026Dody Prasetya G64124034Erlangga Adinegoro G64124042Novi Indra G64124069
![Page 2: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/2.jpg)
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
![Page 3: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/3.jpg)
Color
The Visible Spectrum
3
![Page 4: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/4.jpg)
Color
To 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
![Page 5: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/5.jpg)
Color
RGB
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
![Page 6: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/6.jpg)
Color
HSV
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
![Page 7: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/7.jpg)
Color Uses
Color as a Formating Aid
Color as a Visual Code
Other Color Uses
7
![Page 8: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/8.jpg)
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 Differences
8
![Page 9: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/9.jpg)
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
![Page 10: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/10.jpg)
Color — What the Research Shows
Improve visual search time with color
To aid memory with color
10
![Page 11: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/11.jpg)
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 cones
11
![Page 12: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/12.jpg)
Choosing Colors
One 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 displayed
12
![Page 13: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/13.jpg)
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 Information
13
![Page 14: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/14.jpg)
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 Context
14
![Page 15: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/15.jpg)
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 as
location, are available.
Usage
15
![Page 16: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/16.jpg)
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 Harmony
16
![Page 17: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/17.jpg)
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.
Emphasis
17
![Page 18: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/18.jpg)
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 Meanings
18
![Page 19: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/19.jpg)
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
Location
19
![Page 20: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/20.jpg)
Choosing Colors
Order colors by their spectral position.
Red, orange, yellow, green, blue, indigo, violet
Ordering
20
![Page 21: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/21.jpg)
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 Backgrounds
21
![Page 22: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/22.jpg)
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 Backgrounds
22
![Page 23: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/23.jpg)
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 Look
23
![Page 24: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/24.jpg)
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 each
foreground color.
Provide a palette of six or seven background colors.
Never refer to a screen element by its color.
24
![Page 25: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/25.jpg)
Customization
Because color preference is subjective.
Compared were displayed color combinations that were judged to
be “good” or “poor.”
When color customization is permitted, whenever possible allow
users to see the results of their color choices before they are
applied. Include a sample screen in a preview function within the
customization process.
25
![Page 26: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/26.jpg)
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 choices
available.
A maximum of six or seven foreground and background colors will
provide the necessary variety.
With these palettes, however, some sort of guidance concerning
maximum number of colors to use and what are good and poor
combinations should be provided.
26
![Page 27: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/27.jpg)
Grayscale
For fine discriminations use a black-gray-white scale.
Recommended values are white, light gray, medium gray, dark
gray, black.
The eye resolves fine detail much better on a black-white scale.
Marcus (1986b) recommends five tonal values for black and
white, higher-resolution screens: black, dark gray, medium
gray, light gray, and white.
27
![Page 28: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/28.jpg)
Text in Color
When 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
![Page 29: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/29.jpg)
Monochromatic Screens
At the standard viewing distance, white, orange, or green are
acceptable colors.
At a far viewing distance, white is the best choice.
Over all viewing distances, from near to far, white is the best
choice
29
![Page 30: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/30.jpg)
Considerations for People with Color-Viewing Deficiencies
Use color combinations that can
be easily discriminated.
Ensure that the lightness contrast
between foreground colors is high.
30
Use color combinations that can be easily discriminated.
Ensure that the lightness contrast between foreground colors is
high.
![Page 31: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/31.jpg)
Cultural, Disciplinary, and Accessibility Considerations
Consider the impact of specific colors on :
Users of various cultures.
Users of various disciplines.
Users relying on accessibility utilities.
31
![Page 32: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/32.jpg)
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
![Page 33: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/33.jpg)
Use effective foreground/background combinations
33
![Page 34: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/34.jpg)
Choosing Colors for Statistical Graphics Screens
Emphasis
Number of Colors
Backgrounds
Size
Status
34
![Page 35: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/35.jpg)
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
Neutrality
35
![Page 36: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/36.jpg)
Choosing Colors for Web Pages
Purpose:
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 and
headings.
For backgrounds: Use weaker contrasting colors such as off-white
or light gray.
36
![Page 37: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/37.jpg)
37
![Page 38: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/38.jpg)
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
![Page 39: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/39.jpg)
Uses of Color to Avoid
Links:
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
![Page 40: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/40.jpg)
Uses of Color to Avoid
Colors lacking contrast.
Fully saturated colors for text or other frequently-read screen
components.
Pure blue for text, thin lines, and small shapes.
Colors in small areas.
Color for fine details.
40
![Page 41: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/41.jpg)
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
![Page 42: Presentation color (kelompok 12)](https://reader033.vdocuments.mx/reader033/viewer/2022042615/55a6d2131a28ab4c4c8b45c6/html5/thumbnails/42.jpg)
THANK YOU
42