Twine for Beginners: Colouring Text
Colouring text in Twine is incredibly simple, but also incredibly useful. If you’re dealing with important information – whether that’s a particularly significant word or phrase, or a stat the player must recognise at a glance – then it helps to format it in some way that immediately sets it apart from the rest of the text on screen.
If you’re unfamiliar with Twine, you might like to familiarise yourself with it using this tutorial which will get you started in just four clicks – and possibly take a glance at some of the others in the series – but many of the following techniques will be very straightforward. If all you want to do is change the colour of specific bits of text in Twine, this tutorial will help you do just that.
In fact, this tutorial is so simple that you can probably just glance through the example story, Snazzy Susan and the Majestic Markup, which will contain most of the following information (as well as a few examples of how to style text in other ways). This post will only go into marginally more detail, but will also link to some handy external resources so do pop back if you get stuck.
How to change text colour:
The easiest way to change the colour of your text is with the (text-colour:) macro. Essentially, you write something like this:
(text-colour: “red”)[Some text you want to appear red.]
and it produces this:
Some text you want to appear red.
Here’s how it’ll look in the editor:
And here’s how it’ll look when run:
Note that (text-colour: “transparent”)[anything you write] will essentially turn anything you write invisible. This is obviously unhelpful for drawing attention to it, but can be useful under other circumstances.
There are a lot of options when it comes to colours you can just write in like this. 140, in fact: here’s a list of all of them. This is probably enough for anyone, but if you want to include one that isn’t in there (or sufficiently similar to one that is), there are several ways to manually pick any colour that you like. Those will be covered below.
Advanced text colour:
Earlier on I mentioned that if you wanted to produce a colour not on this list, there would be ways of doing that. Here’s the simplest:
(text-colour: (rgb: 255, 0, 0))[Some text you want to appear red.]
rgb stands for red, green, blue, with the numbers 255, 0, 0 dictating how much of each the computer should add to the mix. 0 is the minimum and 255 is the maximum so (text-colour: (rgb: 255, 0, 0)) does exactly the same thing as (text-colour: “red”). It means: “as much red as possible, no green, no blue.” For comparison, (rgb: 0, 0, 0) would be black (no colour), while (rgb: 255, 255, 255) would be white (all three colours lit up as bright as possible on screen). By specifying numbers in this way, you can create any colour you like. This site lets you see what different combinations look like before you type them into Twine.
However, the 140 named colours really should be enough for anyone when it comes to formatting in-game text. The real reason you might want to step beyond those 140 named colours and use the rgb method is that the numbers can be provided by variables.
This example uses a (live:) macro (which are covered in a different tutorial), but the basic idea is very simple: $randomRed, $randomGreen and $randomBlue are all variables representing a number from 0 to 255.
I’ve made those numbers random (and set them to refresh once per second) to make the effect clear in the example, but you could just as easily use variables that are already significant to your game. Perhaps your protagonist is a reptile who can perform good or evil actions over the course of the game. You might set their name to appear in a colour that reflects that:
(text-colour: (rgb: $karma, $karma, $karma))[Chameleon]
If you set $karma to somewhere between 0 and 255 at the start of the game (perhaps about 150), the character’s name will initially appear grey. From that point on, you can use $karma to keep track of the character’s moral choices (for example, having other characters respect them if it’s risen above 200 or fear them if it’s dropped below 100), and the name itself will appear lighter or darker to reflect their light side/dark side status.
If you’re wondering, “Do I really have to type out (text-colour: (rgb: $karma, $karma, $karma))[Chameleon] every time I want to write my character’s name?” then this other tutorial will give you some tips on how to keep this sort of thing tucked away and recycle it when necessary.
More advanced text colour:
The problem with the (rgb:) method is that you have to specify three different values to generate one colour. Not only does something like (rgb: $karma, $karma, $karma) look awkward in the editor, it’s also quite difficult to ensure that every combination of values (if you’re using multiple different variables) will mix together to make a decent colour. In this specific example, since we’re only using one variable, a more elegant solution might be to add an alpha value to specify opacity:
(text-colour: (rgba: 255, 255, 255, $karma))[Chameleon]
This alpha value can be anywhere between 0 (completely transparent) and 1 (100% opaque). If you’re using Twine’s standard black background, setting the text colour to white (which is what (rgb: 255, 255, 255) gets you) and then changing the opacity will give the appearance of multiple shades of grey. To make this work in-game, we’ll need to have $karma start around 0.75 and then only change by tiny amounts over the course of the game. Perhaps anything over 0.9 is saintly and anything under 0.6 is pure evil. Alternatively, $karma could be anything between 0 and 100 (starting at around 75) and we could simply set the alpha value as ($karma / 100). It works exactly the same either way – it just depends which you find easier to work with.
But this still doesn’t address the problem of reliably changing colours using a single variable. For that, we’ll need a different method of doing things altogether. Here’s yet another way of producing red text.
(text-colour: (hsl: 0, 1, 0.5))[Some text you want to appear red.]
hsl stands for hue, saturation, lightness. It’s not quite as intuitive as rgb, but the key thing is that hue allows you to choose a colour by specifying degrees around a colour wheel. Here’s how that works:
Basically, 0 (degrees) gets us red, right up at the top. 90 would give us a greenish-yellow, 180 would give us cyan, 270 would give us a sort of bluey-purple, and 360 would finish our lap of the colour wheel and take us back to red. You can actually use any number you like for hue – 450 (one lap and a quarter) gives you exactly the same shade of orangey-yellow as 90 – which is how this next example works.
This produces a similar effect to the DANCE PARTY!!! one above, but instead of flashing random colours it moves around the colour wheel ten degrees at a time.
This makes for a nice visual effect, but also opens up some options when it comes to displaying in-game information using colour. Perhaps the protagonist is operating a nuclear reactor and we want to show how it’s doing at a glance:
(text-colour: (hsl: $safety, 1, 0.5))[REACTOR STATUS]
This lets us set the hue of REACTOR STATUS based on a variable: $safety. If we start $safety at an initial value of 120 (green), we can both use it to track events in the game (with $safety getting lower if the reactor is damaged) and to display the text in a corresponding colour. If $safety drops to 60 or so, REACTOR STATUS will appear in yellow, while if it gets really low – approaching 0 – it’ll be red.
The other values – saturation and lightness – affect other properties of the colour you’ve chosen, and can be anywhere between 0 and 1, just like the alpha value mentioned above. For the most part you’ll want to keep these set at 1 and 0.5 respectively. This is because no matter what hue you set, 0 saturation will make it grey, 0 lightness will make it black, and 1 lightness will make it white. This page will let you play around with those values and see what you get, but do bear in mind that it gives you percentages, while you’ll have to give Twine values between 0 and 0.1.
Speaking of alpha, by the way, (hsla:) gives you that option in just the same way as (rgba:). There aren’t all that many occasions you’d be likely to use it, but you can if you want to.
Summary:
This has been a long tutorial, but really it’s all just different ways of doing the same thing: colouring text in Twine. The really key points to remember are:
- (text-colour: (some sort of colour)) will allow you to colour your text.
- (some sort of colour) can be a colour name, (rgb:) values, or (hsl:) values.
- Any of those values (including the colour name) can be provided by a $variable, which you can use to change it over the course of the game as appropriate.
That’s all there is to it! If you want to open up Snazzy Susan and the Majestic Markup for yourself, you can import it into Twine by following this tutorial.
If you have any questions, feel free to ask them below! You can comment here without an account or even an email address (though obviously if you choose not to supply an email address, you can’t be notified of replies). Whatever your problem, I’ll do my best to help.
If you’ve found this tutorial useful, you might like a look at the others in my Twine for Beginners series.
Damon L. Wakes 
2 comments