- Today's video is a tutorial for managing color palettes.
I'm gonna talk through my approach to color palettes
and why they're important.
And share how I manage them and keep them consistent
across the different design software that I use.
(upbeat music)
It's really important to be consistent with brand colors.
And when you're a marketing designer like I am,
you're working with the same brand
across a range of different projects,
different design software, depending on the task,
and you want those colors to all be the same
no matter what.
You shouldn't rely on color picking
from a photo or another export for this,
because color picking can go wrong
and that's just not a professional way to go about it.
You're gonna end up with like 20 different shades,
or nearly the same blue but not quite.
To start with, I think I'll give you a look
at the ConvertKit color palette
that I use on a daily basis.
And use it to show you the basic ingredients
I suppose of a brand color palette.
First off we've got our blue,
which is the primary color of ConvertKit.
I have a few different shades of it
to work in various situations
like when you might need an icon over top
of a blue background, or buttons, etc.
Having a few different shades of your primary color
really comes in handy.
We also have four secondary colors
that we can work in with our brand and our designs,
when we need something to especially stand out
as a call to action, or it just needs a color in there
that isn't blue.
You know, it happens.
Again, there's a few different shades of this to handle
with different icons and hover states, things like that.
It's a good idea in a brand palette
to have a few different shades of your light color,
which in our case is usually a white background.
But then there's a few shades of light gray.
And then to round it out you also need a few shades
of a darker color.
For us, we mainly use these for text,
but it could also be used if you wanted to use
dark backgrounds instead.
I'm not gonna go into too much detail
about how these colors were selected.
The point of this video is more the organizational side,
then the coming up with the color palette side,
but as you can hopefully see,
the main primary blue and then our secondary colors,
they all work together well.
They all look like they're from the same color family.
We don't really have a pastel green,
or a fire engine red that would really stand out
and not quite fit with our main blue.
Well let's get into how to use a color palette
across design software.
And I'm gonna show you this based on a color palette
that I've developed for my own YouTube branding.
Alright, to start with, unfortunately,
there are few different file types for color palettes.
There's not one standard across the board,
which does make this process a lot more difficult.
First off we've got .ase that is used in Adobe apps.
Then there's .clr which is what is used by the built-in
Apple Color Picker, which you'll see in
Preview or Keynote; Sketch uses it,
and I think I've heard that Affinity Designer
uses this one as well.
Then last of all another one that I'm gonna mention
is .sketchpalette, which is a ridiculously long
file extension.
But this is one that is used
by the internal color picker in Sketch
rather than the color Apple picker window.
Wow that was a confusing explanation.
I'm sure there's more color file types out there,
but these are the ones that I work with,
so these are the ones I'm gonna talk about.
The thing with these three file types,
is they do not work together well.
They don't play nice.
It can be really hard to convert them between each other.
I found that the best way is to start in Illustrator
and make a .ase, because it's much easier to convert that
to a .clr than it is the other way around.
So with that in mind, let's start in Illustrator.
These are the colors that I have picked out for my brand.
So I've got a main color and then a darker version of each.
These are the main ones that I'll use on my thumbnails
with this dark gray.
I think it will more come in handy
when I develop my website.
So to start with, I'm gonna make a new folder.
And we're gonna call this CharliMarieTV.
Then I'm simply gonna click on each rectangle
that I have here on my file, and click the plus button.
While making sure I'm in my folder.
You can name it if you want.
I often name it with the hex color
that I'm gonna be using.
So I think that I will just go through and do that.
It makes it easy to see at a glance,
what color you need to use if you're developing for web.
It's nice to keep your color palette organized,
so I'm just gonna go in order
and do both the purples, both the pinks, etc.,
and build this out.
Alright, now I have all of my colors inside a folder
in my swatch window in Illustrator.
By the way, I didn't say,
but if you needed to open the swatch window,
if it wasn't open for you for some reason,
then you can find it from this window menu here.
Another thing you might have noticed
as I was building that, is that as I added colors here
they also appeared in my library.
Libraries are a pretty cool part of Creative Cloud
that help you keep assets up to date
across different Adobe softwares.
So if I come into Photoshop right now, in this new file,
click in my libraries, and if I switch to;
well I didn't name it so they're all just called My Library,
but I'm gonna assume it's this one.
There we go.
I can see all of my colors that I just saved in Illustrator
and now ready for me to use in Photoshop,
which is very handy.
But I always like to save my color palette
as a .ase anyway.
I think it's like back-up
in case the library isn't working.
And you can also share it with someone
who isn't part of your Creative Cloud account,
fairly easily.
So in order to do that, I'm going to select
all of the other colors in this document.
And then I'm gonna hit this delete swatch button.
I'm also gonna delete these folders that I have here.
Basically I don't want anything in this color palette
window other than my colors.
Okay, so, now I'm gonna click up in this top right corner
on this more menu.
I'm gonna go save switch library as .ase.
And I'm just gonna put it on my very messy desktop.
It always comes up with this warning,
don't worry about it too much.
Just click okay.
Now, if I come into Photoshop
and I wanna import those swatches,
if for some reason my library here, I dunno,
isn't connected or whatever, I can come up here
and I go can go Load Swatches,
find it on my desktop,
open it up,
and there are my brand colors.
So that's working with colors in Adobe apps.
But what if I wanted to then use these same colors
in a Keynote presentation, for example?
I can't use the .ase file there.
I don't wanna set up all the colors again manually.
What I found is the best way to convert this,
is this little app here called Color Palette Importer.
If you Google .ase to .clr you're gonna find loads
of different options, but this is the one that I like best,
so this is what I decided to show you.
It's pretty cheap, it cost me £1.99.
And so, very reasonable.
All you've gotta do is grab your .ase file
and drag it in, then I can save it as a new palette
just by clicking Import.
Now to import this into Keynote
or to any Apple Color Picker using app,
all I have to do is come here in this,
what is this section called , color palettes.
Hmm, aptly named.
It's the third icon along anyway.
And I'm just gonna click on the little cog and go open,
find my CharliMarieTV file,
and then there are all my colors ready to be used
in this Keynote presentation.
For example, I could change this text to be purple.
In Sketch there's two different ways of working with colors
which is quite confusing.
There's the regular color picker,
which is again, the Apple one that you've seen in Keynote.
So could just import that same .clr file there.
Or, Sketch also has these global and document colors
which are different.
You might recognize these colors here set up,
because I have it set that every time I open a new document
it's gonna load the ConvertKit brand colors,
because that's most often what I'm working on.
For this though, I wanna add my CharliMarieTV colors
into the document color section,
and save them out in case I wanna import them again
into a different Sketch file that I work on.
I'm gonna start by importing my color palette
into this color window here, like we just did before.
Then I'm gonna create a palette just by
clicking on these colors with a rectangle essentially,
from this .clr here.
As you can see, it's pretty quick when
all you have to do is just click on a rectangle
and click on a color.
It's definitely not ideal though,
so if you do know a better way
than what I'm showing right now,
please tell me and I'll make sure I pin it as comment.
Okay, so once I've got all those rectangles in my colors
I'm gonna close this window.
Now I'm gonna click on my first one here.
And right here I'm just gonna click this plus button
underneath document colors.
And that's gonna add my first purple to it.
So I'm just gonna go along and continue with this.
There we are, now I have all my colors in my
document colors palette in Sketch.
And I do like to do it this way,
rather than use the Apple built-in window
because I find that it's more accurate.
There were some weird bugs that maybe got worked out
with using it the other way.
Anyway, to export this, we're gonna use a plugin.
This is a plugin called Sketch Palette.
Very aptly named.
And I'm gonna leave a link to it in the description.
You just install it in your plugin folder,
and then it's pretty easy to use.
So, I'm gonna come to document colors here,
and go save palette, because I have all my colors saved
in the document color section.
Now, if I open up a new Sketch file,
and you won't see those colors anymore
because they were only applied to that document.
If I wanted to make it so that my brand colors
would appear in every Sketch document I opened,
what I could do is just come to plugins,
global colors, and load the palette there.
I'm gonna just load it to this document though,
so I'm just gonna go load palette,
find it on my desktop, and there we go.
Now my colors are in the new document,
and it's pretty easy to work with
no matter when I start a new one.
And like I said, it's even easier
if you wanna just apply it globally
across all of your documents.
So there is a look at how I manage color palettes
across the different design software that I use.
I hope you found it useful.
If you've got any questions about anything I covered,
or perhaps didn't cover,
then please feel free to ask them down below
in the comments.
Thanks for watching this video.
If you did find it useful or just enjoyed watching it,
then please give it a thumbs up.
I'd love to hear any requests you have
for future process tutorials, design tutorials.
Leave 'em down below in the comments,
or reach out to me on Twitter.
I really enjoy hanging out on there,
probably far too much.
Yes, I would love to hear from you,
and see how I can help you out.
Thanks again for watching,
and I will see you next time, bye.
(upbeat music)