Lesson Length -


Add a splash of color to your Text, Rectangles, Icons and more
Close Video


Let's Get Creative With Colors

If you’ve already been modifying the colors of your Text and Rectangles, in the color dropdown you’ve probably noticed the various Color collections available:

Later on in our Accessibility & Compatibility section, we’re going to discuss how we use these collections effectively, especially as it relates to Dark Mode.

This lesson however is about making our own Custom Colors.

In Judo, there are two different ways to make our own Color:

  • Custom
  • Document Colors


If we select Custom from our Color dropdown, we can use the two sliders to find our color, or type in our HEX color value.

We can also modify the opacity of our color:

But let’s say we add another screen, and we want to use the same background color... We'd have to make our custom color again from scratch.

This is where Document Colors become very useful.

Document Colors

Document Colors are any colors we are going to reuse throughout our layout.

To add a Document Color, instead of Custom, we select Document Colors, then hit the Plus button:

Then we can create our color, we'll give our Custom Color a name that helps indicate what it's to be used for, and now when we hit save, this Document Color is readily available to use for any other element throughout our layout where we have a color option.

We can also ignore the dropdown that says Universal for now, because again, we're going to cover this in our Accessibility & Compatibility Section later on.

That’s it for Colors, next up is Gradients.

Was this lesson helpful?