Using Color Picker

Do you want to see the different ways to choose and use color in your design? Learn how to use palettes, eye-droppers, and more!

Updated this week

About the Color Picker

Color Picker helps you effortlessly choose the colors for your design and even generate stunning color palettes.

You can choose colors in the Color Picker, generate a palette with a text prompt, or choose a color with the eye dropper! It's easier than ever to choose the perfect color for your project ✨


Using the color tab and palettes

The color tab is where you can see all of your most recent color choices and any palette options you can use for your project.

Here's how you can access it:

1) Open your project and click on a component that you'd like to change the color of:

2) There are three ways to get to the Color Picker! You can click "Color" in the in-line toolbar, the "..." in the in-line toolbar to get to the design menu, or by clicking the "Design" menu button on the right-hand menu:

3) If you've clicked on the "..." or "Design" menu button, the next step would be to click on the color field circle.

Please note that if you are changing the color of text, the color field circle will be under the Text section. If you are changing the color of a component, it will be under the Color section:

4) You'll see all of the different palette options or recently used colors and project colors under the "Color" tab. You can add any recently used colors or choose colors from the pre-made options here:


Choosing colors with the Picker tab

Choosing a color with the Color Picker is fast and intuitive.

Follow the steps below to choose a color:

1) Open your project and click on a component that you'd like to change the color of:

2) You can click "Color" in the in-line toolbar, the "..." in the in-line toolbar to get to the design menu, or by clicking the "Design" menu button on the right-hand menu:

3) If you've clicked on the "..." or "Design" menu button, the next step would be to click on the color field circle.

Please note that if you are changing the color of text, the color field circle will be under the 'Text' section. If you are changing the color of a component, it will be under the 'Color' section:

4) Click on the "Picker" tab in the color menu:

5) Here you can slide around the Color Picker or change the hues on the slider to find the right color. You can also input the HEX or RGB codes and numbers if you prefer:


Generating palettes with a text prompt

Do you have an idea of what you'd like your palette to look like, but you want a fast and simple place to start? You can try out our Color Generator!

Simply put in a prompt and watch your words come to life in the form of a palette!

Here's how:

1) Open your project and click on a component that you'd like to change the color of:

2) You can click "Color" in the in-line toolbar, the "..." in the in-line toolbar to get to the design menu, or by clicking the "Design" menu button on the right-hand menu:

3) If you've clicked on the "..." or "Design" menu button, the next step would be to click on the color field circle.

Please note that if you are changing the color of text, the color field circle will be under the Text section. If you are changing the color of a component, it will be under the Color section:

4) Click the "Generate" button in the color menu:

5) Type in your prompt idea for a color palette and click the blue "Generate" button:

6) Watch your palette ideas come to life! You can click any of the colors to add them to your color palette.


Picking colors with the eye dropper

If you have a color you'd like to sample in an image in your project or another component, you can use our eye-dropper tool to easily select a specific color!

Here's how you can use the eye dropper:

1) Open your project and click on a component that you'd like to change the color of:

2) You can click "Color" in the in-line toolbar, the "..." in the in-line toolbar to get to the design menu, or by clicking the "Design" menu button on the right-hand menu:

3) If you've clicked on the "..." or "Design" menu button, the next step would be to click on the color field circle.

Please note that if you are changing the color of text, the color field circle will be under the Text section. If you are changing the color of a component, it will be under the Color section:

4) Click the eye dropper icon in the color menu on the far right:

5). You can now click on the area you'd like to sample the color of to select it, like so:


FAQs

Are there any gradients or fades?

Unfortunately no, color gradients and fades are not currently supported on the Uizard platform.

Can I change the font, colors, or style of particular aspects across the whole project?

At this time, it's not possible to globally change a specific color, accent color, or font across an entire project.

The best option and workaround that we have at this time is our Theme Generator. This can help change certain aspects of your project and may be a viable solution.

Did this answer your question?