CREATE YOUR COLOR PALETTE DEVELOP YOUR PERSONAL COLOR PALETTE
CREATE YOUR COLOR PALETTEDEVELOP YOUR PERSONAL COLOR PALETTE
Gravy For The Brain | 07
This short guide provides you with the methods for creating your own color palettes, from scratch. We’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern.
In the first part of the guide, we cover color terminology: hue (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); value (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue).
These are important terms to know as we move forward and create our own color pallete.
INTRO
Hue
Hue is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue.
Chroma
Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.
COLORS
Saturation
Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues. Colors with similar saturation levels make for more cohesive-looking designs. Colors with similar or identical saturations have a jarring effect on visitors.Value
Value could also be called “lightness” and refers to how light or dark a color is. Lighter colors have higher values. For example, orange has a higher value than navy blue. Black has the lowest value of any hue, and white the highest. When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs
COLORS
TonesTonesarecreatedwhengrayisaddedtoahue.Tonesaregenerallydullerorsofter-lookingthanpurehues.Tonesaresometimeseasiertouseindesigns.Toneswithmoregraycanlendacertainvintagefeeltowebsites.Dependingonthehues,theycanalsoaddasophisticatedorelegantlook.
ShadesAshadeiscreatedwhenblackisaddedtoahue,makingitdarker.Thewordisoftenincorrectlyusedtodescribetintortone,butshadeonlyappliestohuesmadedarkerbytheadditionofblack.Indesign,verydarkshadesaresometimesusedinsteadofblackandcanserveasneutrals.Combiningshadeswithtintsisbesttoavoidtoodarkandheavyalook.
COLORS
TintsAtintisformedwhenwhiteisaddedtoahue,lighteningit.Verylighttintsaresometimescalledpastels,butanypurehuewithwhiteaddedtoitisatint.Tints areoftenusedtocreatefeminineorlighterdesigns.Pasteltintsareespeciallyusedtomakedesignsmorefeminine.Theyalsoworkwellinvintagedesignsandarepopularonwebsitestargetedatparentsofbabiesandtoddlers.
COLORS
TraditionalColorSchemeTypes
Thereareanumberofpredefinedcolorschemestandardsthatmakecreatingnewschemeseasier,especiallyforbeginners.Belowarethetraditionalschemes,withafewexamplesforeach.
COLOR PALETTE
Monochromatic color wheel
Monochromatic
Monochromaticcolorschemesaremadeupofdifferenttones,shadesandtintswithinaspecifichue.Thesearethesimplestcolorschemestocreate,asthey’realltakenfromthesamehue,makingithardertocreateajarringoruglyscheme(thoughbotharestillpossible).
Monochromaticexamples
Herearethreeexamplesofmonochromecolorschemes.
Forthemostpartwiththeseschemes,thefirstcolor(ifwelookatthisfromlefttorightforeachpalette)wouldlikelybeusedforheadlines.
COLOR PALETTE
Monochromatic color palette examples
Analogous
Analogouscolorschemesarethenexteasiesttocreate.Analogousschemesarecreatedbyusingthreecolorsthatarenexttoeachotheronthe12-spokecolorwheel.Generally,analogouscolorschemesallhavethesamechromalevel,butbyusingtones,shadesandtintswecanaddinteresttotheseschemesandadaptthemtoourneedsfordesigningwebsites.
COLOR PALETTE
Analogous color palette examples
Analogousexampleskeypoints
#1 - The first palette is a traditional analogous color scheme, and while it’s visually appealing, there isn’t enough contrast between the colors for an effective website design.
#2 – This is a color scheme with the same hues as the one above, but with the chroma adjusted to give more variety. It’s now much more suitable for use in a website.
#3 - Another example of a traditional analogous scheme.
COLOR PALETTE
Analogous color palette examples
1
2
3
ComplementaryComplementaryschemesarecreatedbycombiningcolorsfromoppositesidesofthecolorwheel.Intheirmostbasicform,theseschemesconsistofonlytwocolors,butcaneasilybeexpandedusingtones,tints,andshades.Awordofwarning,though:usingcolorsthatareexactoppositeswiththesamechromaand/orvaluerightnexttoeachothercanbeveryjarringvisually(they’llappeartoactuallyvibratealongtheirborderinthemostsevereuses).Thisisbestavoided(eitherbyleavingwhitespacebetweenthemorbyaddinganother,transitionalcolorbetweenthem).Don’tforgetthatbeigeandbrownarereallytintsandshadesoforange.
COLOR PALETTE
Complimentary color palette examples
SplitComplementary
Splitcomplementaryschemesarealmostaseasyasthecomplementaryscheme.Inthisscheme,insteadofusingcolorsthatareopposites,youusecolorsoneithersideofthehueoppositeyourbasehue.
#1- Aschemewhereyellow-greenisthebasehue.It’simportanttohaveenoughdifferenceinchromaandvaluebetweenthecolorsyouselectforthistypeofscheme.
#2- Anotherpalettewithawiderangeofchromas.
COLOR PALETTE
Split complimentary color palette examples
1
2
Custom
Customcolorschemesarethehardesttocreate.Insteadoffollowingthepredefinedcolorschemesdiscussedabove,acustomschemeisn’tbasedonanyformalrules.Keepinmindthingslikechroma,value,andsaturationwhencreatingthesekindsofcolorschemes.
#1– Thecolorshereallhavesimilarchromaandsaturationlevels.
#2- Usingonecolorwithahighchromaamongothercolorswithlowerchromas isanothereffectivemethod(thehigherchromacolorcanactasanaccent).
COLOR PALETTE
Triadic color palette examples
1
2
Creatingyourcolorpalettemethod#1
Thereareplentyoftoolsonlinethatwillhelpyoucreateacolorscheme,butlet’sforgetaboutthosefornowandjustusePhotoshop.Ifyoudon’thavePhotoshopyoucanusePhotoshopElements.
AlternativelyyoucanuseGIMP (GnuImageManipulationProgram)isusuallythedefaultgo-toalternativeforanyonelookingforPhotoshop-levelcapabilitiesinafreewaredesktopprogram.
Ifyoufinddesktopsoftwareallalittlebit2010,thenPixlr orPixMonkey willhelpyoumeetyourbrowser-basedcreativeneeds.
YOUR COLOR PALETTECreatingyourcolorpalettemethod#2
Anothermethodofcreatingacustomcolorpalettedrawsuponusingimages.Theimagesyouchoosemaybecentraltoyourbrandortheyjustappealtoyou.
ThetoolthatwecanuseforthisusedtobecalledAdobeKuler,butitisnowcalledAdobeColorCC.Itisaneasytousecolorwheelwhichcanhelpyouchooseandchangecolors.
YoucanalsousethesmartphoneappAdobeCaptureCC.Itallowsyoutogetthesameresultonthegobyextractingcolorschemesfromphotographsonyoursmartphone.TheappisavailableforbothAndroid andApple phones.
Method#1– CreatingYourCustomColorPalette
So,forthepurposesofyourproject,we’llcreateacolorpalettefortwodifferentwebsites.
WhileImentionedthattraditionalcolorschemepatternsaren’tusedasoftenindesign,monochomaticcolorschemesaretheexceptiontothatrule.
ForthisexampleIhavechosenablueasmybasecolor.Asanexampleinagoodwebdesign,youwillfindthatthebasecolorisused60-70percentage.Theothercolorsarethenusedforcontrastandtodrawattentiontokeyareas.
WiththisinmindIalsowanttouseanorangecolor.
COLOR PALETTE
MonochromaticPalette
Basecolor
Method#1– CreatingYourCustomColorPalette
ThefirstthingIdidwastocreateanimagethatwas700px*200px.
Ithenaddedin5equalboxessothatIcouldchangeeachboxcolorandexperimentwiththeoverallpalette.
OnceIknewthebasecolorIputthatinthemiddle(somepeopleprefertoplaceaneutralcolorinthemiddle).
Ithenaddedinthecontrastingcolor– orange.
COLOR PALETTE
Method#1– CreatingYourCustomColorPalette
Usingtints,tones,andshadesinyourcolorschemesisvital.Purehuesallhavesimilarvaluesandsaturationlevels.Thisleadstoacolorschemethatisbothoverwhelmingandboringatthesametime.
Whenyoumixintones,shades,andtints,youexpandthebasic12-spokecolorwheelintoaninfinitenumberofcolorsforuseinyourdesigns.Oneofthesimplestwaystocreateaprofessionallookingcolorschemeistotakeafewtones,tints,andshadesofagivencolor(avoidingthepurehue),andthenaddinanotherpurehue(orclosetopure)that’satleastthreespacesawayonthecolorwheel(partofatetradic,triatic,orsplit-complementarycolorscheme)asanaccentcolor.Thisaddsvisualinteresttoyourcolorschemewhilestillretainingasenseofbalance.
COLOR PALETTE
Thiscustomcolorpaletteprovidesagoodsetofcontrastingcolors.
Method#2– CreatingYourCustomColorPalette
Thissecondmethodofcreatingacolorpaletteusesanimage.Thismethodisidealforthosepeoplewhooftenfindthattheyaredrawntoaparticularstyleandtypeofphotograph.Youneedn’tuseaphotographthough,aslongitmaybeanimageofapainting,abookcoveroranyotherwayyoufindsomeinspiration.
Awordofcautionthoughtrynottousethismethodtocopyawebsiteoracompetitorspalette.Usethismethodforthetypeofimagesthatyougenuinelyfeelrepresentyouandyouareattractedto.
Themobileappismoreversatilethanthebrowserbutbothwilldoagoodjobandhelpyoucreateanawesomeandpersonalcolorpalette.
COLOR PALETTE
WATCHAVIDEOOFTHEAPP
Method#2– CreatingYourCustomColorPalette
STEP#1
Ifyou’renotalreadyaAdobeColorCCmember,signupforafreeaccount.Ifyouareamember,signin.
STEP#2
Intheupperrightcorneryouwillseeacameraicon.Clickonthisanditwillaskyoutouploadanimage.
STEP#3
Uploadanimagefromyourcomputer.
COLOR PALETTE
Method#2– CreatingYourCustomColorPalette
STEP#4
AdobeColorCCwillautomaticallyselect5colorsfromtheimage.Youcanchoosetousetheseoryoucanmovethecirclestorefinethecolorsfromtheimage.
TIP
Try2-3differentimagesandsaveeachone.Seetopleftcornertosaveyourcolorpalettes.Thenchooseonefromthethree.Thiswillhelpyoucomparepalettesandfindonethatfitswithyourbrand.
COLOR PALETTE
Method#2– CreatingYourCustomColorPalette
STEP#5
AdobeColorCChassixsettingsthatyoucanalsotrywithyourimage.
• Colorful(defaultsetting)• Bright• Muted• Deep• Dark• Custom(seefurthersteps)
Thesesimplychoosethedifferentpalettesaccordingtowhatisavailableinyourimage.Trythesebeforesettlingonthepaletteyouwanttohaveasyourfinalversion.
COLOR PALETTE
Colorful
Bright
Muted
Deep
Dark
Method#2– CreatingYourCustomColorPalette
STEP#6
ClicktheSave buttonanditwillpromptyoutogivethecolorpaletteanameandthensavethepalette.
ChooseasuitablenameandthenclickSave.
Afteryouhavesavedyourcolorpaletteyouthenhavetheoptionofcustomizingifyouwishto.
COLOR PALETTE
Method#2– CreatingYourCustomColorPalette
STEP#7
Ifyouwanttochangeyourcolorpalette,itisbestpracticetosaveacopysoyoustillhavetheoriginalifyouneedit.
ClickonEditCopy.Thistakesyoutoanewscreenwhereyoucouldcustomizeyourpalette.However,ifyouclickSaveyouwillbepromptedtoSaveaCopyorSaveChanges.ClickSaveaCopyandthennameyourcopyofyourcolorpalette.Thisistheonewewilll usetocustomizeyourbrandpalette.
AfteryoudothisyouneedtoclickontheEditCopysowecanmovetothescreentocustomizethepalette.
COLOR PALETTE
Method#2– CreatingYourCustomColorPalette
STEP#8
Ifyouwanttochangeyourcolorpalette,itisbestpracticetosaveacopysoyoustillhavetheoriginalifyouneedit.
ForthisrichfruitpaletteIhavemadesomecustomizationsandcomeupwiththefinalpalettebelow.Nowit’syourturn tohaveaplayandcreateyourowncustompalette.
COLOR PALETTE
Method#2– ExamplesFruit
COLOR PALETTE
Method#2– ExamplesFlowers
COLOR PALETTE
Gravy For The Brain.Gravy For The Brain Ltd offers an ever-expanding range of online courses, face-to-face and online events, and valuable resources – all designed solely to benefit the voiceover community and raise the standard of the voiceover industry. The company was created in September 2013 by Hugh Edwards and Peter Dickson, following a highly successful 18 months of trading under the name High Score Training.
The original company was an amalgamation of Hugh’s audio-outsourcing company, High Score Productions Ltd and Peter’s own Peter Dickson Ltd. Having both worked extensively on each side of the voiceover industry – Peter as the UK’s best-known voice-over artist and Hugh as a prolific voice director and casting director – Hugh and Peter joined forces to pass on their combined wisdom and experience to the voiceover community, which they recognized as being hungry for training and guidance.
www.gravyforthebrain.com