Support Centre

Search

Changing element colors

Renée Meloche
Renée Meloche
  • Updated
Available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

 

The Color Tool lets you customize element colors with a color wheel or eyedropper, customize their light and dark values, make swatches and select from Brand Colors, sample colors from your device and more.

Learn how to use the Color Tool features and make your designs come to life through color. 

Find the Color Tool in the top toolbar

The Color Tool icon appears in the top toolbar when you select any element on the design canvas that has a customizable color (this includes icons, symbols, tables, smart widgets, text boxes, etc.).

A partial view of the Venngage Editor, where a canvas with the heading Fluffiest Pancakes Ever! appears over a dark brown background. A recipe for pancakes appears by a photo of a stack of pancakes, and overlaying the photo is a simple icon of a maple syrup bottle. A user clicks on several elements on the canvas, including the brown background, the brown border that appears around the recipe, and the syrup bottle icon, and clicks on the Color Tool icon when it appears in the top toolbar.

 

The Color Tool icon appears as a square with the color of the element, and a tear-drop or droplet shape in the middle:

The Color Tool icon appears in light blue, with a darker blue tear-drop shape in the center.

Find the icon in the top toolbar next to other styling tools for the element you select on the canvas, including opacity for elements like icons and shapes, or text styling tools for text boxes. 

The top toolbar of a design in the Venngage Editor with the title 'Social Media Infographic'. Under the font face menu, the Color Tool icon (colored in orange, with a dark grey tear-drop shape in the center) is highlighted by a dark red box and a dark red arrow.

For elements with borders and fill, like smart widgets, the color icon appears as as square and a border image: 

A partial view of the top toolbar of a design in the Venngage Editor. The second row of the toolbar shows two Color Tool icons, side by side, under the Alignment menu. The Color Tool icons are highlighted by a dark red box and a dark blue arrow.

The Color Tool for charts appears in a special context menu used for editing all chart details (including data values, chart types, legends and labels, etc.). To access it, double-click on the chart, or click on the chart to select it and then click "Edit Chart" in the top toolbar.

Overview of Color Tool features

A close-up of the Color Tool widget, as it appears in the Venngage Editor. The top part of the widget is dominated by a color wheel, which represents a rainbow of colors that the user can choose from, using the circular selector dot to indicate which part of the wheel they are selecting a color from. In this case, the selector dot appears in an area with a light orange shade. A slider next to the color wheel represents the light/dark value of the color, with the circular selector dot indicating that the slider is set to the lightest value. Under the color wheel is a slider bar labeled 'Opacity', with the selector dot set to nearly the highest level of opacity. Below this, a large square with rounded corners appears, with the same light orange color that is selected on the color wheel. This is the color tile that previews the color the user has selected. Next to the color tile are two headings: one for HEX, which is a color coding language that represents digital colors with a string of six combined letters and numbers after a pound sign. Here, the light orange is represented as HEX #FFB458. Under this are the RGB values of the color, which similarly represent the same color by indicating its Red, Green, and Blue ratios and its opacity. R=255, G=180 and B=88, representing the light orange. The opacity level indicated by the slider is also represented by the a value; here it is displayed as A=99 out of a possible 100 opacity. The bottom section contains two headings, Brand Colors and Swatch Colors, under which appear multiple, small color tiles.

The color menu includes:

Find the color preview tile

The preview tile is the section of the Color Tool that will show you what the color you are customizing looks like in real time.

As you use the Color Picker, the light/dark slider and the opacity slider, or the HEX/RGBA fields to adjust a color, it will change on the canvas as well as in the preview tile.

A close-up of the Color Tool widget, as it appears in the Venngage Editor. The image is edited to be shadowed, except for the area where the color preview tile displays a light orange color. The preview tile appears underneath the color picker wheel and the opacity slider, to the left of the HEX Code and RGBA values section, and above the Brand Colors heading.

Keep an eye on it as you make adjustments, so you know when you get to the color you want!

Select and customize a color (Color Picker wheel, light/dark slider)

Select an icon, symbol, table or chart to bring up the Color Tool in the top toolbar. Click anywhere in the Color Picker wheel to select a color.

A close-up of the Color Tool widget, as it appears in the Venngage Editor. The image is edited to be shadowed, except for the area where the color picker wheel appears at the top, to the left of the light/dark value slider and above the opacity slider.

The selector dot will show you the area that the color you've selected is in, and the color preview tile will show you a close-up. You'll also see the element's color change on the canvas in real-time as you use the Color Tool. 

A partial view of a design in the Venngage Editor shows a canvas with a light blue background and a large number character '08' in dark blue. A user clicks to select the 08 and the Color Tool droplet icon appears in the top toolbar, in amongst other tools for styling the text. The user clicks the Color Tool icon and opens the Color Tool widget. The user clicks the selector dot in the Color Picker wheel, dragging it from the lower left part of the color picker and into the upper left corner. The preview tile changes color to correspond to where the user has moved the selector dot; the color of the 08 on the design canvas is also changing as the user moves the selector dot. The HEX Code and RGB values change to correspond to the user's selection in the color picker.

Want a more precise selection? Click and drag your cursor as you adjust the position of the selector to display more subtle hue variations. 

The light/dark slider next to the color wheel determines how much white or black is added to the color you selected on the wheel. 

A partial view of a design in the Venngage Editor shows a canvas with a light blue background and a large number character '08' in dark blue. The 08 is selected and the Color Tool widget is open, partially overlaying the design canvas. The user clicks the selector dot in the light/dark value slider to the right of the color picker wheel, moving it up and down to make the blue color of the 08 lighter or darker. The preview tile changes color to correspond to where the user has moved the selector dot; the color of the 08 on the design canvas is also changing as the user moves the selector dot. The HEX Code and RGB values change to correspond to the user's selection in the slider.

Change the opacity of a color

The opacity of a color determines how much of the elements/colors behind it are visible by controlling how opaque or transparent it is.

A close-up of the Color Tool widget, as it appears in the Venngage Editor. The image is edited to be shadowed, except for the area where the color picker wheel appears at the top, to the left of the light/dark value slider and above the opacity slider.

Use the slider with the label "Opacity" to increase or decrease the opacity level of a color on any element with customizable colors. 

Use the field under the "A" value (at the end of the row with RGB) to control the Opacity with a number: just type one between 0 and 100. Zero is most transparent and 100 is most opaque. 

Setting the Opacity to a lower value will create a see-through effect.

A close-up view of a design canvas in the Venngage Editor. A user selects a mono-color icon of a syrup bottle with a maple leaf on it. The icon is a light brown color, and the Color Tool icon in the top toolbar reflects the same light brown color. Tools appear in the top toolbar when the icon is selected. The user clicks the Fill % tool, which appears as a drop-down menu with a symbol of a circle that is half light, half dark, on it. When the drop-down menu opens, the fill is set to 100. The user scrolls up the menu and selects 70% fill. The icon of the syrup bottle now appears in two colors: the light brown color is the majority fill, and a bright red fills the top 30% of the icon. The top toolbar now displays two Color Tool icons: one for the light brown color fill, and one for the bright red color fill.

Enter the HEX code or RGB number of the color

Change the color of an element by entering the HEX code or RGB values, select the element you want and open the Color Tool widget by clicking on the icon in the top toolbar. 

A close-up of the Color Tool widget, as it appears in the Venngage Editor. The image is edited to be shadowed, except for the area where the HEX and RGBA value fields appear, which are under the Opacity slider and to the right of the color preview tile.

Enter the HEX Code characters in the text field under "Hex" or the R, G and B values in the field under each letter to manually change the color. Hit 'Enter' or click outside of the field to confirm the change.

Customize the color by changing the light/dark values, the opacity, or even moving the selector on the Color Picker to your preferred shade. 

A partial view of a design in the Venngage Editor shows a canvas with a light blue background and a large number character '08' in dark blue, and a dotted line underneath the number in a lighter blue. A user selects the dotted line and opens the Color Tool widget in the top toolbar, then clicks on the text field under HEX which shows the code for the light blue color, #2A90AD. The user then clicks into another tab in their browser which shows are partial view of Venngage's accessibile Color Palette generator. The user clicks on the Generate Random Palette button and then selects a color in the top row, which is a cranberry red. The user copies the HEX code for the red, which is #952547, and then clicks back into the Venngage Editor, where they select the dotted line again and open the Color Tool. The user clicks into the HEX code field and pastes the HEX code for the red, replacing the HEX code for the blue, and changing the color of the dotted line, which is now reflected on the canvas as well as by the color preview tile in the Color Tool widget. The user closes the Color Tool.

Use our color palette generator to create colors and copy the HEX codes to paste them directly into the color tool. It's easy to swatch a whole palette to use in your design. 

Sample a color with the Eye Dropper tool

The Eye Dropper is a small but mighty tool that allows you to sample color from anywhere on your device—including the design canvas itself.

A close-up of the Color Tool widget, as it appears in the Venngage Editor. The image is edited to be shadowed, except for the area where the eye dropper tool appears, to the right of the HEX code field. The eye dropper tool icon is also magnified to make it appear larger.

Select the icon or other element you want to change the color of, and open the Color Tool.

Click the Eye Dropper icon in the Color Tool widget and click on any element on your device screen with your desired color. The cursor becomes a magnifying lens that allows you to see close-up the color you're picking. This works on images with a high pixel count as well as simpler images like vectors. 

In the Venngage Editor, a canvas appears with a light blue background and a dark blue heading with the number 08 next to the text 'What is your biggest struggle when it comes to producing engaging content?' Under this heading, a bar chart appears with four bars, the top of which is a light red. The three bars beneath it are all a medium teal color. A user expands the Photos heading in the left sidebar and enters 'purple' into the search bar, returning multiple photos with shades of purple. The user selects one of the photos, of an LED lamp with different hues of purple and magenta, and adds it to the design canvas. The user then double-clicks on the bar chart to open the Chart Menu, and clicks the Color Tool icon next to the row in the spreadsheet that represents the light red colored top bar. The user clicks on the eye dropper in the Color Tool widget. The user's cursor is magnified, making the pixels it passes over more visible. The user moves the cursor over the photo of the purple LED lamp, and clicks on a part of the photo with a blue-purple color. The top bar of the bar chart changes to this blue-purple color, as well as the color preview tile in the Color Tool and the HEX/RGB values, to reflect the change. The user closes the Color Tool Widget and clicks on the design canvas, closing the Chart Menu. The user deletes the photo of the purple LED photo from the canvas.

Use the Eye Dropper to swatch a color, too; just select the color you want with the Eye Dropper and then click the circle with the + icon in it under Project Colors to save it as a swatch.

In the Venngage Editor, a canvas appears with a light blue background and a dark blue heading with the number 08 appearing next to the text 'What is your biggest struggle when it comes to producing engaging content?' Under this heading, a bar chart appears with four bars. In the corner of the design is an icon with two location markers, one red and one yellow, and a dotted line conntecting them. A user double-clicks on the text box around the number '08' to select the text. The user clicks on the Color Tool icon in the top toolbar, and selects the eyedropper tool from the widget. The user's cursor turns into a circle, which magnifies the elements on the design canvas in the Editor. The user moves the cursor over the yellow location marker in the icon in the lower right corner of the design, and selects the color, which moves the color wheel in the Color Tool widget to that same shade of yellow, and also changes the color of the '08' text to the same shade of yellow. The user then clicks the plus sign under the 'Swatch Colors' heading in the Color Tool widget, which adds that yellow color to the saved swatches in this design.

Use Brand or Swatch Colors

Brand Colors

Brand colors added to My Brand Kit are accessible from the color menu, so that you can easily apply them to different elements in your design. These are located under the color tile and the HEX code/RGB section.

A close-up of the Color Tool widget, as it appears in the Venngage Editor. The image is edited to be shadowed, except for the area where the Brand Colors appear as small color tiles under the heading 'Brand Colors'. Here, there are five available brand colors represented by five different tiles.

 

Switch between different Brand Kit colors from "My Brand Kit" in the left sidebar.

You can also apply your My Brand Kit colors to all of the elements in your design from the tool in the left sidebar. 

A simple design appears on a canvas in the Venngage Editor, showing a dark grey steamer ship with a red bottom floating on dark blue water and approaching a large dark blue mountain, against a light blue background. In the left sidebar, a user clicks on My Brand Kit to expand it and clicks on the tiles under 'Brand Colors' which appear under the user's Brand Logo and include a bright blue, magenta and dark orange. The colors in the Brand Colors tile are randomly applied to all of the elements on the design canvas, changing the color of the water from dark blue to orange, the moutanin to a bright blue, and the ship to a lighter orange. On the preview tiles under Brand Colors, a shuffle icon appears. As the user clicks the color tiles again, the Brand Colors are re-applied to the elements on the design canvas but shuffled, changing the color of the ship to magenta, the mountain to orange, etc.

 

When the shuffle icon appears over the Brand Colors, click them again to randomly reassign the colors to your design elements.

Swatch a color (add it to Swatch Colors)

Swatch Colors appear as tiles in their own section, below Brand Colors and the brand color tiles. These are pre-generated according to the colors that appear in the template.

The + sign that appears in a circle at the bottom of the last row of the Swatch Colors allows you to add custom colors of your own.

A close-up of the Color Tool widget, as it appears in the Venngage Editor. The image is edited to be shadowed, except for the area where the Swatch Colors appear as small color tiles under the heading 'Swatch Colors', at the bottom of the widget below Brand Colors. In this instance, there are three rows of color tiles, and in the last row at the right end, a grey plus sign appears, magnified to make it more visible.

Select any element on the canvas and open the Color Tool, then click a color tile under Swatch Colors to apply that color to the element on the canvas. 

When you change the color of an element in your design, you can save the color for future use on other elements. Select the element and open the Color Tool, then click the + sign at the end of the color tiles under Swatch Colors. The color will appear as its own tile under Swatch Colors. Select any other element with customizable color in your design, and you will find the color you swatched under Swatch Colors when you open the Color Tool; apply it to the elements in your design.

Remove a swatched color by hovering over the color tile in the Color Tool, and click the red 'x' that appears in the top-right corner of the tile. 

In the Venngage Editor, a canvas appears with a light blue background and a dark blue heading with the number 08 next to the text 'What is your biggest struggle when it comes to producing engaging content?' Under this heading, a bar chart appears with four bars, the top of which is a a dark, blue-purple. A user double-clicks on the bar chart to open the Chart Menu, and clicks the Color Tool icon next to the row in the spreadsheet that represents the blue-purple top bar. The user clicks on the plus sign at the end of the row of tiles under the heading 'Swatch Colors' in the widget to add the blue-purple color to the Swatch Colors.

Swatch a whole palette by generating one with our color palette tool and downloading the HEX codes.  

 

The feature(s) discussed in this article is available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

Curious about upgrading? Compare our plan features side by side.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request