There are an infinite number of different colors, each just a tiny bit different from the next. For artists, designers, and video editors, colors are represented as hex codes, one of 17 million different hues represented by a sequence of six digits.
People aren't great at identifying or memorizing six-digit hexcodes, you'll need a digital tool to pick the hex code out of a specific picture, logo, or video clip. There are free websites available to people that want to upload or search for a photo and find out what hex code belongs to any pixel.
In this tutorial, I'll show you how to get a hex code from an image or video with a free eyedropper tool. This tutorial uses an online creator Studio called Kapwing. Follow these three steps to grab the color from the upload:
- Upload a video, photo, or GIF
- Use the Eyedropper tool to find your hex code
- Use the color in a design, image, or video
Step 1: Upload a Video, Photo, or GIF
To get started, you'll need to get the photo, video, or GIF that you want to find a color from.
Once you found your source, head over to Kapwing.com and click the Get Started button to enter the Studio. In the Studio, you can drag & drop your file right into the window, click the Upload button and find it on your device, or paste a link to it if you found your photo, video, or GIF somewhere online.
Step 2: Use the Eyedropper Tool to Find Your Hex Code
When your image, video, or GIF is fully uploaded to the Studio you need to find the color you want to identify. If it's in a video, you'll probably want to pause the video while the color is showing so you can identify it on the first try.
With no layer selected, click the eyedropper tool under the Background Color section on the right side of the screen. Now, when you move your mouse over the canvas, you'll see the eyedropper square display the color your cursor is on, with the hex code for that color displayed underneath. Click on the exact color you want to use, and it will be saved as the background color of your project. Here's I've used the eyedropper tool to identify a couple different colors from my picture.
Step 3: Use the Color in a Design, Image, or Video
If the hex code of your color is all you're looking for, you're all done! But the Kapwing Studio also allows you to use that hex color in any visual assets you may want to use, whether you want to create shapes, outlines, text, subtitles, progress bars, or even drop shadows & glow effects. Whenever you can customize the color of something you create something in the Studio, you'll see the hex code displayed on the right side of the screen. When you click on this hex code, you can enter the exact code you want to use instead.
Here's a quick example I put together using the two colors I identified in the sunset. They go together pretty nicely, don't they? There are many more uses for the hex colors you find, though: web designers use hex codes frequently in HTML to set the color of a webpage, and designers create personal color palettes to create a cohesive color set. Brands often also use precise hex codes to make brand kits for their team or partners.
I hope this article helps you have more fun with color, from putting together gorgeous pastel color palettes to just having fun with hex codes like DABBED or FACADE (yes, those are colors! very soft and gentle ones). If you're interested in more content like this, you should subscribe to Kapwing App on YouTube, where we post videos on anything from memes to movie editing. In the meantime, check out some related articles on color & design: