Hi there. This video is all about creating colors. We'll steal them from, logos, will steal them from images will create this little color way here, we'll add it to our little favorite swatches plus into our assets panel. I'll show you a couple of places where you can get cool colors, color inspiration. If you will. Let's get started. Alright, so I'm going to show you a few different ways to bring in colors. The first one will be, let's say we've, you can see easily. There's kind of a reasonable color field that I've kind of picked with my screenshots of my mood board. I'll show you how to steal one from that. So let's just create a rectangle over here and instead of picking the fill from in here, we're just gonna use the eyedropper tool and watch this. You just kind of move around and decide that yes, I want this kind of blue color and so you like it. I'm going to add it to my little plus down the bottom here. You can keep doing that with different colors. Another way of stealing colo...

rs might be, um, you can actually just move this thing out of the way so you can see stuff behind it. So if I minimize this, you can kind of see things in the background. Okay, so there's my dribble page so I might just move at this page. It's that same rectangle. If I grab the eye drop at all. Can you see I can steal stuff from here, but also just random stuff anywhere. Okay, I might pick this. Okay, I can add that to it so it doesn't really matter. You can just move this, make it smaller, move it out of the way and start stealing things from the background. It might be an easier way to see your logo from your company. Maybe their website. Just steal it straight from that. Another way it might be is let me make that full screen again is to pull it from the logo. So I'm going to import a logo file import now. Remember with XT at the moment I'm pretty sure they're changing this really soon is you can only you can't import illustrator files if you've got the logo as an illustrator file. But let's bring in the exercise files, lets go to images and let's go to where is it logo? I've made a few PNG S for you and Suggs but you can see the er files are blacked out of them. So let's say I bring in this PNG, okay you might have that version, you can steal the color from this easily. So click on this, grab the eyedropper tool and just steal it from the logo. Bring it in, stealing colors and let's add it to our little color swatches. Even easier if you've got a vector version. So remember an SVG is handy so if I go to import I've got SVG. I'm just showing you the different ways you might be able to grab the colors. That was an SVG. A scalable vector graphic. And because it's scalable and victor, you can keep on grouping this thing until you grab the, the queue there, you can see it's actually got the fill in it so you can just, it's the same color as that, but you could hit plus now, instead of using the eyedropper tool, it'll be a little bit more accurate in terms of the color. If you've got colors, say you've got a brand guidelines. So your client might actually have asked them if you're working for somebody, do you ask them? Do you have brand guidelines? And if it's a large company they'll definitely have something somewhere that explains what the colors are, what their fonts are to ask for that. If you're working internally in a place you probably know it off by heart or if you're dealing with like a startup or like your dad's mom's cousin's lawnmower shop, they probably don't have brand guidelines. You just kind of grab it from their website or logo or they might be expecting some brand new colors. But if you are typing it in, you can just click in here, you can't type in C, m, Y K colors, but you can drop that down and often people have the RGB values and you can just type it in there and hit plus sometimes they might have the hex to decimal number and you can just type it in there, nobody writes down the hue saturation and brightness sliders, but there it is there any way. Alright, so we looked at bringing in corporate colors, pulling from our mood boards, where else can we get color ideas or color ways? Because you might like some of the designs in here, but not the colors. If you're like me, you end up getting stuck in the same kind of colors you want to kind of break out of. That little bit really cool site is adobes color dot adobe dot com. It's about the american way. So log in with your user name, you don't actually have to log in with your adobe I D. And but definitely go to color dot adobe dot com And I like this one that says explore along the top here and it's going to show me the most popular this month and it just shows me what other designers are using, what they're downloading, what they're liking. And you can see there's just some really great colors that work together as a nice little unit. Okay. And to use them. And at the moment you can't down if you normally you hit save and they go to the CC library, but that's not something that's working in XD, you might check it, your, you know, in the future, it might be working, you click save and you add it to your CC library, it's not currently working in X D for me. Okay, so the way to get it into XD, just click on edit copy, it takes you back to this kind of window here and those are my five colors. So this first one here, I'm going to grab the hex to decimal number, copy it in here, make sure it's on hex, paste it in, you can see there's the peach color, then I can add it to my swatches to remove things from your swatches. We haven't done yet, click hold, drag, drag, drag they disappear. You just kind of work your way through, click on this one, grab it, copy it, paste it and you can move it in that way. Alright, so I'm going to kind of finalize my colors and show you what I like to have as options while I'm building, I'm gonna get rid of this one, draw a bunch of little swatches at the top here, like you saw at the beginning, you saw those little kind of color chips to use. So first one's gonna be white, so I'm gonna click on it actually, I'll get rid of the borders of these. These are just here as visual cue, so I'm going to add the white, I will this one here, I'd like to be, I want a lighter green than that as well, there's kind of one up here that I wanted. Where are you, my friend, that one, the irish and probably even a little brighter. So I'm just gonna kind of drag it towards this little home up there, I'm going to add that. So I've got a kind of a light one. Like to put them in order as well. Kind of a slightly dark one. Let's add that to my little switches. I want another even darker one so I'm gonna grab it and just kind of drag it down here. Then I want to use that blue. Even then I probably just want a little bit lighter as well. Don't be afraid to drag around at the moment. I'm not using kind of corporate guide specs so I could just do anything I like. I want a darker version as well. So even if you've just got like a one color, like that's the corporate color. Don't be afraid to just grab one and have a slightly darker version of it to use as a nice kind of compliment to that original kind of strong color. I want a greater use as well. So I'm going to go off now instead of just a full on gray, you can make it just out here to make it kind of like a midnight gray. So it's just a bit steely or you can shift this hue into the yellows and have a bit warmer gray. Can you see warmer? Let's do the stealing one. So over the steely one, can you see they're still gray. That one looks really brown in comparison now. So you might do it a little bit more subtle. So not far out there, you can see kind of a steely blue gray. Should zoom in that easy. Everyone a decide what you're going to do for your design. I'm going to go for the slightly warmer version and at the end here I want black. Alright, so there's the colors I'm gonna use. I like to have a little swatch at the top here. I'm going to make sure they're all added to this, which we can't do all in one big o which is annoying. So I clicked on that one, done that one down that one. I don't have this one. Stick with me because I want to show you how to add them all to the assets in one big go which you can do you and this. There we go. The other thing I want to do is grab them all and and make sure you're in design, make sure you're in your assets panel, click on colors And now we've all got them added over here as well. It's handy having them in both places, assets and in this like handy little swatch picket thing. Alright, so we've got some colors we're going to get started with. I'm not sure. I'm super happy with that one. I'm probably going to mess about with this one in the break, just in the break while you're not watching. Just wanted to Well maybe that's it. Okay. And and I've got my colors, we can change them later on. Don't worry. If you want yours to be exactly like mine, you can type them in. Here's all the hex numbers over here. You can just type them in make sure they're exactly the same. Except that one is not going to be. You have to delete him. Right, click him. Delete him. I want that guy to be added dan. You shouldn't mess with things after you've picked them. Same with this one needs to be updated you and to get rid of a color. Have we done this before? I'm not sure. See this one here is not the one I want. Just drag it off and it's gone. All right. Those are the colors. I promise not to change them much. I'll see you in the next video.

Class Materials

Bonus Materials with Purchase

Six Completed Files

Exercise Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

Ratings and Reviews

Haseebullah Johar

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

2,000+ classes ranging from fundamentals to advanced techniques.

Working with Colors

Working with Colors

Lesson Info

35. Working with Colors

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions