3 Ways to Dynamically Change Text Color in Your Bannerbear Images

Automatic text color modification gives your generated images more versatility. Here are three ways to transform text colors with Bannerbear.
by Julianne Youngberg ·

Contents

    The ability to automatically modify text in your generated images adds versatility. In addition to the content itself, you can adjust font, alignment, and even text and background color.

    Identifiable text colors can make your final results more distinguishable, which is helpful in use cases like…

    • Illustrating stock prices
    • Sorting news headlines
    • Categorizing product lines

    …and other situations that involve comparison or categorization.

    Once you’ve determined what to base text color changes on, setting up an image generation workflow that automatically considers these factors is quite simple. There are several methods to choose from depending on your needs—and you won’t need to write any code.

    In this article, we’ll discuss the text color modification features offered by Bannerbear and explore a few methods you can use to customize the text in your generated images dynamically.

    Feature Overview

    Bannerbear is a tool that you can use to create all types of graphic materials—images, videos, GIFs, and more. You can create a template, layer different elements on top of each other, and dynamically modify them to generate a unique image every time.

    One of the changes you can make to text and text containers in Bannerbear is color. This is possible by adding a hex code (eg. "#FF0000") to the modifications section of your API request.

    You can style your text color in three areas:

    • Primary text : The text passed in a request
    • Secondary text : The text passed in a request between asterisks (*)
    • Text container : The background of a text container

    It’s possible to modify any or all of them in a single API request depending on your design needs.

    Screenshot of Bannerbear template page with image output outlined in red

    Bear Tip 🐻: Other modifications you can make to text are font (primary and secondary) and alignment (vertical and horizontal).

    How to Modify Text Colors in Your Bannerbear Images

    There’s only one way to change text colors in your generated images: by passing parameters that include color modifications. However, various methods can be used to prepare the API request, allowing you to choose the one that best fits your needs.

    Let’s break down three different methods you can try:

    Method #1: Using the Bannerbear API Console

    The first method is not an automatic color-changing method, but it’s helpful for testing and small-scale generation needs.

    To generate an image with custom text color using the API console, you need to have a project and template set up.

    Screenshot of Bannerbear template page

    Bear Tip 🐻: To learn more about setting up your first Bannerbear template, visit the Knowledge Base or browse more of our tutorials.

    Make sure you’re on your template page, then scroll down to the API console.

    Screenshot of Bannerbear API console outlined in red

    The modifications object in the request body will list each element in your template and the preset modifications that come with it. You can view the full list of parameters in the API Reference.

    Each layer in your template can have a unique name, making it easy for you to spot text elements. By default, these have name, text, color, and background variables.

    Screenshot of Bannerbear API console with modifications outlined in red

    You can add additional variables for font, alignment, border width, and more.

    Any text containers in your templates have default settings matching your template design. As a result, variables like color and background have values of null in the API Console. If you change these values to your preferred color, Bannerbear will generate an image using your modifications instead.

    Look for the text element you want to modify. Change the null values for color and/or background to the hex code of your desired color.

    Your values must be enclosed in double quotation marks. The key-value pair should look something like this: "color": “#FFD700”.

    Screenshot of Bannerbear API console with color modification outlined in red

    Make any other changes needed to the request body, then click Send API Request.

    Screenshot of Bannerbear API console with red arrow pointing to send API request

    Bannerbear will generate the image, and you will see it appear under the Images section of your template page.

    Screenshot of Bannerbear API console with red box around output

    You will then have an image with text colored to match your modifications:

    Sample image generated with Bannerbear text color change

    Bear Tip 🐻: The API Console does not carry over the text from any dynamic text layers in your template, so be sure to add some sample text or use null in your request body before generating.

    Method #2: Using Airtable + Bannerbear + Zapier

    The second method combines Airtable and Bannerbear. Since we can use different fields and formulas for decision-making, this option is better for comparisons and use cases involving many possible outcomes, such as:

    • Sales promotions
    • Product classification
    • Topic categorization

    Every situation will require a different Airtable setup—different fields, formulas, and views. What they will have in common is a field that calculates a hex code for your graphic.

    🌳 We will use Grist.org to illustrate this example. As a nonprofit newsroom exploring solutions at the intersection of climate and justice, Grist relies on donations to keep running. Contribute today!

    In this sample, we’ll use text color to differentiate between content topics. Start with an Airtable base populated with the information you need to generate graphics.

    Bear Tip 🐻: If your data is pulled from a webpage online, consider using browser automation to make the process completely hands-off.

    Screenshot of Airtable base with sample data

    Since there’s already a field specifying each item’s topic, it’s easy to write a formula that determines a hex code. We’ll use nested IF formulas, producing the following:

    IF(Topic="Regulation","#CFDEE9",(IF(Topic="Solutions","#0D570A",(IF(Topic="Health", "#FFDC85", "")))))
    

    Airtable’s IF formula follows this format: IF(logical, value_if_true, value_if_false). To build your own, nest as many formulas as you have options and use logic that applies to your situation. The next IF formula will take the place of value_if_false.

    Screenshot of Airtable base with primary color field outlined in red

    If you’d like to have a secondary color that pairs with each color option, simply repeat the process with another formula field:

    IF({Primary Color}="#CFDEE9","#373737",(IF({Primary Color}="#0D570A","#F3F3F3",(IF({Primary Color}="#FFDC85","#F3F3F3","")))))
    

    Screenshot of Airtable base with secondary color outlined in red

    Each record should then have a primary and secondary color ready for use in the image generation step.

    Now, you can create a zap that generates images with your text colors.

    Log into your Zapier account and create a new zap, then set up the following events:

    Trigger: New Record in Airtable

    Choose Airtable as the app and New Record as the event. You might have to permit Zapier to access your base.

    Select the right base, table, and view.

    Screenshot of Zapier Airtable new record trigger

    Test the trigger to ensure Zapier can locate a record.

    Action: Create Image in Bannerbear

    Choose Bannerbear as the app and Create Image as the event. You will have to connect your account using the project API key found on the project’s Settings/API Key page.

    Toggle the Basic / Advanced settings option to Advanced. This will give you access to modifications beyond basic text and URL input.

    Screenshot of Zapier Bannerbear create image setup with advanced outlined in red

    Set up the action by mapping any images and text from Airtable to their respective containers.

    Layers that allow you to make color modifications will be appended with tags like color, color_2, background, and border_color. Identify the correct layers and color options, then add dynamic links to the hex codes on your Airtable base.

    Screenshot of Zapier Bannerbear create image action setup

    Test the action. You should be able to produce an image that looks something like this:

    Green sample image generated with Bannerbear

    Repeating the process with different records should yield graphics with different text colors.

    Blue sample image generated with Bannerbear

    Bear Tip 🐻: Make your generated graphics easier to find by adding links to your Airtable base. To do this, add a URL field to your base and create an update records action with the generated links mapped to it.

    Method #3: Using Zapier + Bannerbear

    The third method we will go over today combines Zapier and Bannerbear. It involves using Zapier’s built-in paths tool and is best for simple decisions without too many possible outcomes, such as:

    • Crypto pricing
    • Product rankings
    • Simple classification

    Your information can be sourced in a variety of ways—databases, webhooks, web scraping, and more. We will use Zapier to prepare the data for your template, and then add text color modifications.

    🪙 We will use CoinGecko as the source of data for this example. Their public API makes it easy to retrieve cryptocurrency market data around the clock.

    In this sample, we’ll use text color to illustrate whether a coin’s 24-hour percentage change is positive or negative.

    Log into your Zapier account and create a new zap, then set up the following events:

    Trigger: Every Day in Schedule by Zapier

    The frequency of image generation will depend on your use case, but we’ll opt for daily in this example.

    Choose Schedule by Zapier as the app and Every Day as the event.

    Screenshot of Zapier every day in schedule trigger

    Set the trigger up by specifying a time to run the automation and whether weekends should be included.

    Test the trigger, then continue.

    Action: GET in Webhooks by Zapier

    A webhook will pull daily crypto pricing information from CoinGecko, so we can use it to generate images.

    Choose Webhooks by Zapier as the event and GET as the event.

    Set up the action by inserting a request link into the URL field. This can be adjusted based on the information you need. We will use the following link:

    https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false%22,%22/name,/current_price,/market_cap,/price_change,/total_volume,/high_24h,/low_24h
    

    Bear Tip 🐻: Learn more about generating crypto graphics with CoinGecko by reading our guide or exploring their API documentation.

    Screenshot of Zapier GET in webhooks by Zapier action setup

    Test the action. You should see updated crypto pricing data appear in your test output.

    Actions: Formatter by Zapier

    Since the data retrieved from CoinGecko is in its raw form, you will have to clean it before image generation. This all depends on your template, so add as many Formatter by Zapier actions as needed to manipulate the retrieved data into the format needed.

    Screenshot of Zapier numbers in formatter action setup

    Once your data is formatted and ready, add another action for Paths by Zapier. This will allow you to set up actions that take place only when certain conditions are met.

    Action: Path A

    Path A should only continue when the 24-hour percentage change value is positive.

    Set up the path by creating the rule to continue only if the 24-hour percentage value is a number that’s greater than zero.

    Screenshot of Zapier path A setup with rule outlined in red

    Test the filter, then set up an action to Create Image in Bannerbear. Follow the same setup steps as in Method #2: choose your template, toggle for Advanced settings, then modify text color as you see fit.

    Screenshot of Zapier Bannerbear Path A create image action setup

    Action: Path B

    Path B should only continue when the 24-hour percentage change value is negative.

    Set up the path by creating the rule to continue only if the 24-hour percentage value is a number that’s less than zero.

    Screenshot of Zapier path B setup with rule outlined in red

    Test the filter, then set up an action to Create Image in Bannerbear. Follow the same setup steps as in Method #2: choose your template, toggle for Advanced settings, then modify text color as you see fit.

    Screenshot of Zapier Bannerbear Path B create image action setup

    Each time the automation runs, you should expect to see a crypto pricing graphic that displays positive and negative percentage changes in different text colors.

    Bear Tip 🐻: An easy way to emphasis the change even further is to use a dynamic image layer to insert red or green arrows based on the very same paths decision.

    Once you’re happy with your zap, you can end it here and click publish. Alternatively, add additional actions to store or publish your images wherever you see fit.

    Changing Text Color in Your Generated Images

    You can modify your generated image workflows in countless ways. The three options we’ve presented in this article are simply a few ideas to get you started, but they’ll have to be customized to your use case.

    Using the API Console to change your text color is manual, but it’s quick and easy without requiring additional apps. It’s best for generating a couple of images or testing a larger workflow.

    Using Airtable paired with Zapier is the best option if you require formulaic decision-making and more possible outcomes. However, it will involve integrating more apps.

    Using Zapier for decision-making is possible for simpler use cases with just a handful of possible outcomes. It’s also a great choice if you use a webhook or browser automation to retrieve data because it can combine those tasks with the same image-generating zap.

    About the authorJulianne Youngberg@paradoxicaljul
    Julianne is a technical content specialist fascinated with digital tools and how they can optimize our lives. She enjoys bridging product-user gaps using the power of words.

    How to Automatically Transcribe Audio Like a Pro using AI Tools and APIs

    In this article, we will guide you on how to transcribe audio, and list several tools for doing it automatically, such as Amazon Transcribe, Google Cloud Speech-to-Text, Whisper by OpenAI, Azure AI Speech, and AssemblyAI.

    What To Know About Zapier’s New Chatbots Feature

    Chatbots play a significant role in modern business communication. Thanks to AI and other technological developments, they are easier and cheaper than ever to add into your workflow—even if you can't code. Here's what to know about Zapier's new AI-powered Chatbots product.

    How to Auto-Generate Subtitles/Closed Captions for Tiktok & Instagram

    In this article, we will walk you through the steps of using Bannerbear’s API to automatically generate and add closed captions to videos. This helps you to add an auto-captioning feature for videos to your video editing application easily.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    3 Ways to Dynamically Change Text Color in Your Bannerbear Images
    3 Ways to Dynamically Change Text Color in Your Bannerbear Images