SlideShare a Scribd company logo
1 of 68
Color in content Presented by Greg Urban Contact: gjurban@pacbell.net
Color and the techwriter ,[object Object],[object Object],[object Object],[object Object],[object Object]
Best way to choose colors?
The short answer ,[object Object],[object Object],[object Object],[object Object],[object Object]
Workflow for choosing colors ,[object Object],[object Object],[object Object]
Using the color wheel ,[object Object]
Complementary (opposite) Primary Color Complements Secondary Color Complements
Opposite (complementary) ,[object Object],[object Object]
 
Analogous
Automatically harmonious (analogous) ,[object Object],[object Object]
Split complements
Split complements ,[object Object],[object Object]
Split complements
Muted, rich, split complements
Triads ,[object Object]
Triadic colors
 
Triad
Bright triad (well, mostly)
Muted triad
Muting colors ,[object Object],[object Object],[object Object]
Contrast
Importance of contrast ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Color contrast ,[object Object],[object Object]
 
 
Color is relative ,[object Object]
The most important element of color is value  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Value is relative. It depends on contrast with other values
 
 
 
 
We all love color, but… ,[object Object],[object Object],[object Object]
 
 
 
Original iPad sunflower ,[object Object]
[object Object]
With revised graphic
Enough talk let’s do some stealing
Using Rainbow Firefox plug-in
The Rainbow Color Library Framemaker color definitions
Applying ‘stolen’ colors to a document
Colors applied to doc
Stealing from the Masters
The results
 
 
 
 
How about as grayscale?
Color on the Web
 
 
 
 
Blue is the most commonly used color for content. ,[object Object]
Blue is a good main color as other colors ‘ pop’ against it. It is also cool emotionally, even in large amounts
 
Summary: Rules of Thumb
To make color combinations more lively ,[object Object],[object Object]
Blue is your friend ,[object Object],[object Object],[object Object]
Value is relative and is the most important aspect of color ,[object Object],[object Object]
Color is relative ,[object Object],[object Object]
Expect to do a LOT of tweaking to find the ‘sweet spot’ ,[object Object],[object Object]
Thank you! ,[object Object],[object Object]

More Related Content

Viewers also liked

Content is data: pushing re-use to the limit
Content is data: pushing re-use to the limitContent is data: pushing re-use to the limit
Content is data: pushing re-use to the limitTCUK
 
Sharing and Reusing Visualizations for the Web of Data with the RDFS/OWL Visu...
Sharing and Reusing Visualizations for the Web of Data with the RDFS/OWL Visu...Sharing and Reusing Visualizations for the Web of Data with the RDFS/OWL Visu...
Sharing and Reusing Visualizations for the Web of Data with the RDFS/OWL Visu...Jan Polowinski
 
On a Mission to Communicate
On a Mission to CommunicateOn a Mission to Communicate
On a Mission to CommunicateTCUK
 
Narrate Your Way To Success
Narrate Your Way To SuccessNarrate Your Way To Success
Narrate Your Way To SuccessTCUK
 
VBA for technical writers
VBA for technical writersVBA for technical writers
VBA for technical writersTCUK
 
VBA for technical writers - demo script
VBA for technical writers - demo scriptVBA for technical writers - demo script
VBA for technical writers - demo scriptTCUK
 
Streamlining the User Assistance Localization Process
Streamlining the User Assistance Localization ProcessStreamlining the User Assistance Localization Process
Streamlining the User Assistance Localization ProcessTCUK
 

Viewers also liked (8)

16 color 1
16   color 116   color 1
16 color 1
 
Content is data: pushing re-use to the limit
Content is data: pushing re-use to the limitContent is data: pushing re-use to the limit
Content is data: pushing re-use to the limit
 
Sharing and Reusing Visualizations for the Web of Data with the RDFS/OWL Visu...
Sharing and Reusing Visualizations for the Web of Data with the RDFS/OWL Visu...Sharing and Reusing Visualizations for the Web of Data with the RDFS/OWL Visu...
Sharing and Reusing Visualizations for the Web of Data with the RDFS/OWL Visu...
 
On a Mission to Communicate
On a Mission to CommunicateOn a Mission to Communicate
On a Mission to Communicate
 
Narrate Your Way To Success
Narrate Your Way To SuccessNarrate Your Way To Success
Narrate Your Way To Success
 
VBA for technical writers
VBA for technical writersVBA for technical writers
VBA for technical writers
 
VBA for technical writers - demo script
VBA for technical writers - demo scriptVBA for technical writers - demo script
VBA for technical writers - demo script
 
Streamlining the User Assistance Localization Process
Streamlining the User Assistance Localization ProcessStreamlining the User Assistance Localization Process
Streamlining the User Assistance Localization Process
 

Similar to Rules of thumb for using colour in your content

Graphic Design Colors
Graphic Design ColorsGraphic Design Colors
Graphic Design ColorsCalvin Nguyen
 
Design a poster like a pro!
Design a poster like a pro!Design a poster like a pro!
Design a poster like a pro!KidsintheCloud
 
Color matches2-1225285125023446-8
Color matches2-1225285125023446-8Color matches2-1225285125023446-8
Color matches2-1225285125023446-8Ulviyye Ulvi
 
Creative Industry Lecture 2 a b color form and space
Creative Industry Lecture 2 a b color form and spaceCreative Industry Lecture 2 a b color form and space
Creative Industry Lecture 2 a b color form and spaceWilfred Dexter Tanedo
 
Design portfolio waugh
Design portfolio waughDesign portfolio waugh
Design portfolio waughpatricktwaugh
 
World colors-odai hatem
World colors-odai hatemWorld colors-odai hatem
World colors-odai hatemodaihatim
 
colors, composition, images
colors, composition, imagescolors, composition, images
colors, composition, imagesindyrra
 
color, composition, images
color, composition, imagescolor, composition, images
color, composition, imagesindyrra
 
What Color is Response? An Inside Look at How Color Improves Your Sales
What Color is Response? An Inside Look at How Color Improves Your SalesWhat Color is Response? An Inside Look at How Color Improves Your Sales
What Color is Response? An Inside Look at How Color Improves Your SalesVivastream
 
Basics of graphic design 01
Basics of graphic design   01Basics of graphic design   01
Basics of graphic design 01Nirvesh Verma
 
Design Element 4 - Color
Design Element 4 - ColorDesign Element 4 - Color
Design Element 4 - Colormjb77ny
 
Importance of colors in a presentation
Importance of colors in a presentationImportance of colors in a presentation
Importance of colors in a presentationRana Usman Sattar
 
Graphic Design first class (1).pptx
Graphic Design first class (1).pptxGraphic Design first class (1).pptx
Graphic Design first class (1).pptxSubhashisRoyOfficial
 
The Importance of Color in Mobile App Design
The Importance of Color in Mobile App DesignThe Importance of Color in Mobile App Design
The Importance of Color in Mobile App DesignJai Mehta
 
Visual Design Principles 2018
Visual Design Principles 2018Visual Design Principles 2018
Visual Design Principles 2018Jeff Hendrickson
 

Similar to Rules of thumb for using colour in your content (20)

Graphic Design Colors
Graphic Design ColorsGraphic Design Colors
Graphic Design Colors
 
Color Matches
Color MatchesColor Matches
Color Matches
 
Design a poster like a pro!
Design a poster like a pro!Design a poster like a pro!
Design a poster like a pro!
 
Color matches2-1225285125023446-8
Color matches2-1225285125023446-8Color matches2-1225285125023446-8
Color matches2-1225285125023446-8
 
Creative Industry Lecture 2 a b color form and space
Creative Industry Lecture 2 a b color form and spaceCreative Industry Lecture 2 a b color form and space
Creative Industry Lecture 2 a b color form and space
 
Design portfolio waugh
Design portfolio waughDesign portfolio waugh
Design portfolio waugh
 
World colors-odai hatem
World colors-odai hatemWorld colors-odai hatem
World colors-odai hatem
 
colors, composition, images
colors, composition, imagescolors, composition, images
colors, composition, images
 
color, composition, images
color, composition, imagescolor, composition, images
color, composition, images
 
What Color is Response? An Inside Look at How Color Improves Your Sales
What Color is Response? An Inside Look at How Color Improves Your SalesWhat Color is Response? An Inside Look at How Color Improves Your Sales
What Color is Response? An Inside Look at How Color Improves Your Sales
 
Digital Color Theory
Digital Color TheoryDigital Color Theory
Digital Color Theory
 
Basics of graphic design 01
Basics of graphic design   01Basics of graphic design   01
Basics of graphic design 01
 
Design Element 4 - Color
Design Element 4 - ColorDesign Element 4 - Color
Design Element 4 - Color
 
Importance of colors in a presentation
Importance of colors in a presentationImportance of colors in a presentation
Importance of colors in a presentation
 
Design UI.pdf
Design UI.pdfDesign UI.pdf
Design UI.pdf
 
Graphic Design first class (1).pptx
Graphic Design first class (1).pptxGraphic Design first class (1).pptx
Graphic Design first class (1).pptx
 
The Importance of Color in Mobile App Design
The Importance of Color in Mobile App DesignThe Importance of Color in Mobile App Design
The Importance of Color in Mobile App Design
 
CHAPTER – 2 Colors
CHAPTER – 2    ColorsCHAPTER – 2    Colors
CHAPTER – 2 Colors
 
Visual Design Principles 2018
Visual Design Principles 2018Visual Design Principles 2018
Visual Design Principles 2018
 
Color terms
Color termsColor terms
Color terms
 

Recently uploaded

PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back17lcow074
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degreeyuu sss
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作7tz4rjpd
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 

Recently uploaded (20)

PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 

Rules of thumb for using colour in your content

Editor's Notes

  1. Green, red-orange, and light red-violet. If you wanted to add some more vibrancy, add blue dutch iris, as they are complements of the orange.
  2. North Berkeley Library. The main yellow-orange is contrasted with a dark blue-green and a muted red-violet.
  3. Often thought of as the primary colors triad. Often seen in children’s toys. But this is not a pure triad. Mondrian pushed the red towards red-orange and added a little red to the yellow. So it could be almost a complementary combination.
  4. Light red-violet, teal, and light yellow-orange
  5. Triads are pretty stong as the they have 3 contrasting colors that are as far apart as they can be on the color wheel. I am fudging on the bright here as the yellow is really muted and muddy.
  6. Why value is the most important component of color
  7. I realized after I did this that the color no longer read as ‘Aqua’ so that was probably why Apple decided to go with the lighter blue.
  8. I manually copied the Hue, Sat, Val settings from the color library into Frame. Doesn’t actually work that well. But Frame didn’t offer me the option of using Hex.
  9. Left is straight steal. I tried putting a complementary pumpkin on the note just to see how it worked.
  10. Do you see a problem with these colors? They are pretty close in value. What are they in terms of a color combination. Analagous.
  11. I made some comparison charts showing various hues and how they print in grayscale. Admittedly, I could probably tweak some of these colors, but these are the pure shades.
  12. This page from Wired magazine shows the most common colors used in corporate logos. Mostly blue, with some red and a smattering of green. This was from 2003, nowadays there is probably a bit more green.
  13. If pressed for time, or you lack the inclination to mess with colors. Use blue as your default choice. There is an old saying “No one ever got fired for buying IBM.” No one ever got fired for using blue text headings. Also, remember IBM’s nickname.