GPT-3 powered colour palette generator with OpenAI

by | Nov 8, 2022

Following on from my recent foray into GPT-3, OpenAI and Squirrel365.  I have been trying to think of a use case for GPT-3 and Squirrel which is not gimmicky.   The chatbot I created, whilst fun and showcases what you can do with Squirrel, isn’t really something you would use in real life.  However, the colour sentiment analysis got me thinking about colour palettes.

Colours and colour palettes are important when you’re building a UI.  Whether it’s for styling buttons, text or even chart series.  You need a good selection of colours which complement each other.  With that thought in mind I dove back into the OpenAI playground to expand my colour sentiment analysis query into a colour palette generator query.

How do you use OpenAI?

Taking a step back, here’s a brief explanation of how OpenAI works.  Using the playground you write a phrase or question and submit it to the AI to respond.   There are loads of configuration options you can select, like:

  • which GPT-3 model to use,
  • how random you want the responses,
  • how many credits you want to spend on the query.

Note that the length of the question and the length of the answer all contribute to how much the query will cost.  Details of on the price breakdown can be found here.  But in brief, a token is used up for approximately for every 4 characters in your question and response.  Tokens for the GPT-3 model I was using cost $0.00002 each.

As an example this phrase would costs 15 tokens to ask the question.
OpenAI token usage

Using the playground I went through iterations refining my question.  I needed to ensure that I received the response I wanted.  For the colour sentiment analysis the phrase was simple:

What is the CSS code for a colour like value

Where the value is the text the user entered into the prompt in Squirrel.

Colour palette generator

For the colour picker I needed more than just one colour and I wanted to make sure the colours worked well together.  (as well as the AI thinks they work together).  Tying this all together I created a Squirrel project which puts a UI on front of the OpenAI query.  It allows you to provide a phrase or description, and then get the series of complimentary colours back.  You can paste these colours into your Squirrel spreadsheet and use them in your project.

AI Colour palette generator

You can also give it a try here

The PWA Hokey Pokey

The PWA Hokey Pokey

Read about he future trajectory of PWAs for Squirrel365 and the rollercoaster ride with Apple and the EU Digital Markets Act.