create your brand color palette guide - gravy for the brain · 2017. 1. 24. · your 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


ThefirstthingIdidwastocreateanimagethatwas700px*200px.

Ithenaddedin5equalboxessothatIcouldchangeeachboxcolorandexperimentwiththeoverallpalette.

OnceIknewthebasecolorIputthatinthemiddle(somepeopleprefertoplaceaneutralcolorinthemiddle).

Ithenaddedinthecontrastingcolor– orange.

COLOR PALETTE


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.


Thissecondmethodofcreatingacolorpaletteusesanimage.Thismethodisidealforthosepeoplewhooftenfindthattheyaredrawntoaparticularstyleandtypeofphotograph.Youneedn’tuseaphotographthough,aslongitmaybeanimageofapainting,abookcoveroranyotherwayyoufindsomeinspiration.

Awordofcautionthoughtrynottousethismethodtocopyawebsiteoracompetitorspalette.Usethismethodforthetypeofimagesthatyougenuinelyfeelrepresentyouandyouareattractedto.

Themobileappismoreversatilethanthebrowserbutbothwilldoagoodjobandhelpyoucreateanawesomeandpersonalcolorpalette.

COLOR PALETTE

WATCHAVIDEOOFTHEAPP


STEP#1

Ifyou’renotalreadyaAdobeColorCCmember,signupforafreeaccount.Ifyouareamember,signin.

STEP#2

Intheupperrightcorneryouwillseeacameraicon.Clickonthisanditwillaskyoutouploadanimage.

STEP#3

Uploadanimagefromyourcomputer.

COLOR PALETTE


STEP#4

AdobeColorCCwillautomaticallyselect5colorsfromtheimage.Youcanchoosetousetheseoryoucanmovethecirclestorefinethecolorsfromtheimage.

TIP

Try2-3differentimagesandsaveeachone.Seetopleftcornertosaveyourcolorpalettes.Thenchooseonefromthethree.Thiswillhelpyoucomparepalettesandfindonethatfitswithyourbrand.

COLOR PALETTE


STEP#5

AdobeColorCChassixsettingsthatyoucanalsotrywithyourimage.

• Colorful(defaultsetting)• Bright• Muted• Deep• Dark• Custom(seefurthersteps)

Thesesimplychoosethedifferentpalettesaccordingtowhatisavailableinyourimage.Trythesebeforesettlingonthepaletteyouwanttohaveasyourfinalversion.

COLOR PALETTE

Colorful

Bright

Muted

Deep

Dark


STEP#6

ClicktheSave buttonanditwillpromptyoutogivethecolorpaletteanameandthensavethepalette.

ChooseasuitablenameandthenclickSave.

Afteryouhavesavedyourcolorpaletteyouthenhavetheoptionofcustomizingifyouwishto.

COLOR PALETTE


STEP#7

Ifyouwanttochangeyourcolorpalette,itisbestpracticetosaveacopysoyoustillhavetheoriginalifyouneedit.

ClickonEditCopy.Thistakesyoutoanewscreenwhereyoucouldcustomizeyourpalette.However,ifyouclickSaveyouwillbepromptedtoSaveaCopyorSaveChanges.ClickSaveaCopyandthennameyourcopyofyourcolorpalette.Thisistheonewewilll usetocustomizeyourbrandpalette.

AfteryoudothisyouneedtoclickontheEditCopysowecanmovetothescreentocustomizethepalette.

COLOR PALETTE


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

create your brand color palette guide - gravy for the brain · 2017. 1. 24. · your color palette...

Documents