Um, I amthedirectorofthefrontandengineeringprogramattheTuringSchoolofSoftware.
Indesign, weare a sevenmonths, a sevenmonthlongdevelopertrainingprogrambasedoutofDenver.
Um, I'm weseebeonTwitteron a littlebitofbackgroundaboutme.
They'reniceintroduction, but I'm a littlebitofbackgroundaboutme.
I'vebeen a designerforabout 12 years, and I switchedovertofocusingoncodeaboutfiveyearsago.
Um, and I lovecolortheorylike, I thinkit's just a reallyinterestingcombinationof, like, scienceanddesignandaestheticsandjustlikehumanfactors, it's It's a reallyfuntopictotalkabout, andit's a reallyit's a reallyimportant.
It's animportanttopicbecauseitcouldhave a hugeimpactonyourusers.
Uh, yeah, sothat's justmissed a disclaimerthatThat's prettymuchmyMatt.
Um, and I'm qualifiedtospeakaboutColorandtheTeenageMutantNinjaTurtlesbecause I wantedtobeoneofthem.
Soyoucantrustme, eventhoughismissing, likethefourprimaryqualificationstobeoneofthem, whichisthatyouknow, being a turtleon a teenagerand a mutantintheninja.
Let's talkabout a littlebitsowarmcolorsaregoingtobesortoflikeyourredsthroughyou'rethroughyouryellows, andtheseairgenerallythoughttobeverypositiveandenergetic.
Sotheseaircolors, likecolorsinthisgroup, tendtohaveactuallybeenshowntohave a physicaleffectonpeople.
Andagain, ifyouthinkaboutthetypesofbrandsthatareusingthesecolors, they'reoftenthey'reoftentryingtolikereallyencourageyoutotrustthemsoyou'llsee a lotoflikebanksandhospitalsandinsurancecompaniesthattendtohavetheirbrandingskewing a littlebitmoretowardsthecoolsideofthecolorspectrum.
Soifyoupick a colorthatyourusersdon't like, they'regoingtobe, like, pushedawayfromusingyoursideorusingyourproductssimplybecausethewayhavesowehavesuchstrongconnectiontocolor, andwehaverelatetoitsointenselythatitcan.
Itcanactually, like, pushpeopleaway.
So, um, andwhatwiththesewiththesemeaningsthatwehaveaboutcolorscanbeeverysubjectivesotheycanchange, orverybasedonthecommunitiesortheculturesthatwegrewupin.
Um, soesosomecolorscanhaveveryhaveonespecificmeaningandoneculturein a verydifferentmeaninginanotherculture.
SoifyouthinkaboutthecolorwhiteinmostWesterncultures, it's associatedwith, likepurityandcleanlinessandmaybe, like a freshstart, a newbeginningandtheninotherculturesandsomeEasterncultures, itisassociatedwithdeath, andit's oftenlikethecolorthatisworniffunerals, it's like a colorassociatedwithmorning.
Butit's a littlebitsoftenedupthelittletonedownifwethinkaboutit a littlebitmoreplayful, whereasRedcouldbeveryintenseandverylikepassionateorangesismoreplayfulin a littlebitmoregoofyand a littlebitmorelighthearted.
AndthenDonnatoes a littlebitmorestudiosand a littlebitmorefocused.
Um, buttheydon't reallybuttheadthesamewaythatRaphaelandLeonardodobecausetheirsecondarycolorsotheirpersonalitiesair a littlebittoneddownthere, a littlebitlessintense.
Butthere's stillthesereallybold, punchycolorsthatarestillverylike, veryopinionatedandhave a lotofopinionsaboutthings.
Andthey, umsoyou'regonnaendupwith a veryhighcontrastpairing, likeinthisexample, wehavethesortoflike a richpurpleandonthebrightyellow, sothey'regonnabeveryhighcontrast, whichmeansyou'regoingtogettheregonnabe?
You'llhave a prettyhigh, pretty, prettygreatdifferenceininvolvedofvalue.
Sowhenyouactuallylikebutthumbupagainsteachotherthatthatboundaryedgebetweenthemmightactuallyhave a littlebitofvisualvibrations.
Sothatlinebetweenthetwoactuallymightkindofvibrate a littlebit.
I mightnotbesupernice.
Um, sotokindofgetaroundthatwehavethisconceptof a splitcomplimentarycolorsosplitcomplimentaryisbasicallyyoutake a complimentarycolorcombinationandthenoneofthemyougoup a tickerdown a tickonthecolorwheeltokindofsoftenthatcombinationjust a littlebit.
Soit's a littlebitless, a littlebitlesshigh.
Contrast, a littlebitsofter.
You'llsee a lotofsportsteamsarelikeleveragingsplit, complimentarycolorcombinationsbecausethey'rebrightandpunchy, butthey'renotnecessarilylike, um, theydon't Mrs.
You'relikefightToobad.
Likewhenyouactuallylook a littlelikefighttoomuch.
Thenwehavethisconceptoftriads, sotryheadisessentiallyyoutake a triangleandyoudropitonthecolorwheelandyouendupwith a reallyequallydistributed a combinationofcolors.
Andagainyouget a reallyvibrantrightcombowithouthavingyoukindofyoucaneitherget, um, a coupleofcoolcolorsand a warmcoloror a coupleofcoolcolorsin a warmcoat.
Itjustitbreaksitupreallynicely.
Andyougetit.
Youget a nicerangeoftones.
Um, thenwehave a twotragiccolorcombination.
Thisiswhenyoutake a rectangleandyoudropthatonthecolorwheel.
Um, andthatmeansthatyouendupwiththeturtleson, andthisistheclosest I gettoconspiracytheories.
Sowe'vegotSowehave.
Wehavetheturtleshere.
Andwhatmayhaveseemedlikeanarbitrarycombinationofcolorsjustpickedoutof a hatwillynillyisactuallyveryintentional.
Uh, that's offbut a verylike, balancedcolorcombinationin a reallynicemixofhot, coolandthenveryaggressiveandslightlysoftercombinationsandrelationshipsbetweencolorsandcharacters.
Sothere's a lotofcontrast, butthere's notnecessarilyconflict.
SoHughisessentiallyit's almostlike a synonymforcolor.
Itislike a purecolor.
Sotheseairgoingtobesosomethingthatcouldbeconsidered a fewisessentiallylikethecolorsthatyoumightfindin a likeaneightpackofcrayons.
Sothecolorsthathave a namesoyoucouldsaylikelikeredorblueorgreen, thecolorsthatyoucanreallykindofYoucanidentify a namewiththewordthoseareoften, um, thoseareoftenreferredtoasHughesuh, socool.
Thenwehavevalue.
Andsovaluedescribesthelightnessordarknessof a color, andithastodowithhowmuchlightthatcolorisallowingtoreflectbackintoyoureye.
Soifwehave a reallydarkcolor, arethatisgoingtohave a lowvalue, thatmeansthatitisabsorbingmorelightthanitisreflectingbacktoyou.
Andthenifwehave a a highvalue, thatmeansthatit's a lightcolor, whichisreflectingmorelightbackintoyoureyethanitislikeabsorbingawayfromyou.
Sointhisexample, wehavethisreallysortofdeeppurplethatis a lowvalue, andthenthisreallybrightyellowthatis a highvalue.
SowehaveHugh, whichisgonnabethepureappeartoneappearcolor, andthenwehavevalue, whichisthelightnessordarknessof a color.
Thenwehavetone, sotonesaremadebymixing a purecolorwith a neutralergrayscalecolor.
Andforthisforthistalk, we'regoingtodothat.
I'm justgonnausewhiteonblack.
Um, soessentially a tonewillbe a littlebitsofterthantheoriginalcolor.
Soitessentiallykindofcreates a rangeof a rangewithinahcolor.
SoSoifyouhave, like, created a complimentarycolorcombinationandyou'relikethisis a littletoointense, youcouldstarttoworkwithtonestokindofsoftenoneofthosecolors a littlebit.
So, uh, sotonewouldbejustlikethepurepuretothepurecolor, andthenwithintheirwehavetents.
So a tentwouldbeifyouaddedwhiteto a color.
Soyouhad a arrangegoingtowardstotowards a lightercolor, andthen a shadewouldbeifyouaddedblackandyouwentdowntowards a reallydarkcolor.
Sothenwehavesaturation, sosaturationdefinestherangeofpurityof a color, andthisisprettyinteresting.
And, um, onethingthat's kindofinterestingisthat a A completelydesaturatedcolor.
Whileitisgreat, it's actuallyliketonal, soappears, really, Thisis a greatwaytofind a neutralcolorpalettethatworkswithanaccentcolor.
Soifyou'relookingtofind, ifyouwantifyoulike.
Ifyouhave a warmcoloror a coolcolorthatyoureallywanttouse, youryourbright, punchyaccentcoloronandthenyouwannahave a neutralbackgroundforthatdesaturatingoneofthatbadaccentcolortothattotalgrand, thenfindinglike a rangeoftoneswithinthatColonelDrakeis a reallygreatwaytobuildoutthatthatbackground, becauseit's gonnait's gonnaworkreallyeffectivelywiththatreallybright, punchy, supersaturatedcolor.
Andweneedtolike, asitwasmentionedearlierthismorning, likethereis a largepercentageofthepopulationthathas a colorvisiondeficiency.
Sothat's aboutit's about 4.5% ofthepopulationinthe U.
S.
That's like 13 millionpeople.
That's a lot.
That's a lotofhumans.
Um, sowhat's important, oneofthat?
OneofthemostsortofstraightforwardwaystohelptohelpavoidcuttingproblemsorstrugglesforyourforyouruserswhoaresomehavesomeamountofcolorblindnessistonotrelyexclusivelyonKellertodeliver a messagetoyourusers.
So, asanexample, let's talkaboutformswhodoesn't love a goodform?
Sonowwhenweputthisthrough a colorvisiondeficiencysimulator, um, nowweseethatthisstillholdsup.
I canstillfigureoutwhat's goingonandwhat I needtofixtomakethisformgosoessentiallylikethisis a greatexampleofusingcolortohighlightandcomplimentwhat's alreadyonthepage.