Tip:
Highlight text to annotate it
X
This video is all about creating and using color schemes.
You can create as many color schemes as you'd like and configure
them with a myriad of colors, and then you can specify where
to make these color schemes available for adding color
to various elements, like texts, borders or backgrounds
in various contexts, like design templates or simply directly
while editing a page.
So let's jump right in. We'll first create a new color scheme
and add some colors.
We can create a new color palette under
'Design & Layout > Colour palettes'.
Here we can see an overview of the existing color palettes.
I could just hit create up here at the top, and then I'd start
with brand new colors and an empty color palette.
I might also choose to make a copy of an existing color scheme
so I have some colors to start with, which I'll do now.
So if I choose 'System' and then hit 'Copy', I get a new palette
called 'Copy of System'. I can then select this scheme and choose
'Edit', or simply double click, and then I come into
the new color scheme.
What we see here are a bunch of colors, and a bunch of empty cells.
To add a new color, I need to double-click on an empty slot
or just hit the 'Add' button here at the bottom. When I do this
I get an interface up here where I can choose a color with
the color picker, where I can visually select a hue
and saturation in the main window as well as luminosity
by using the slider.
I can also define a specific color using the RGB or Hex color models
if I needed to match a color that I have defined elsewhere with
one of these systems. I addition, note here too that you can type
in an existing HTML color name, like black, white, orange
or some of the funky ones out there like plum or peachpuff.
No, we didn't invent those names.
They are the so-called web-safe colors defined to service
the limited color displays of some computer screens.
Web-safe colors have become less of a factor as computer screens
now typically have more robust color support. The HTML name is distinct
from Tangora's 'Display name' where you decide yourself
what a given color should be called.
To add the color then, I just need to hit 'Ok' in the interface
and we'll see that it appears in our palette.
So that was how you create color palettes and add colors.
A word on color selection: it's good to note here that colors
like so many factors in a web page, are going to display differently
depending on your visitor's particular setup. So whether you
choose web-safe colors or otherwise, you're going
to have to think about that.
So you're best not to get too attached to
a particular shade of peach.
On the topic of color, I'd also like to point out that color
selection is actually a quite important factor regarding
the accessibility of your site.
If you have color blind or otherwise visually impaired user
you'll want to avoid conveying important meaning through
color use, and you'll also want to avoid low contrast color schemes.
But now, let's take a look at saving your palette as well as
editing and deleting your colors.
I'll then also show you a cool alternative way to choose colors
by lifting them from images in your solution.
I can save the whole scheme here at the bottom by clicking 'Save'.
The 'Ok' button also saves, but then would send me back
to the overview of my color schemes.
To edit a color, I have to select the color, and then hit 'edit'
or simply by double clicking on an existing color swatch.
To reorder, I just need to drag and drop a color to that slot
where I'd like it to appear. I need to position it right
over the slot, and wait for the other swatches
to reposition themselves, and then release.
Try it a couple of times, and you'll get the hang of it.
To delete, I can just select a swatch and hit 'remove'
and note here too, that I can remove all of my colors
if I wanted to do that
and if I were to do this, I'd get a chance to change my mind
as a dialog box comes up asking me for my confirmation.
So I mentioned that there's a cool alternative way to choose a color
and this is by choosing colors from images you have uploaded
in your solution. When I add a color, I have a link here called
'Use user-defined palette image'.
If I click on this, then I am presented with a popup window
to my central image archive. Here I can choose an existing image
(or indeed upload a whole new image)
and then this will appear in place of my hue and saturation picker.
I have magnifying-glass buttons here to zoom in and zoom out
and a repositioning button to move the whole image in my window
and then a picker button. Note here too, that you can still adjust
the luminosity, which can be really handy if you want
to just vary the color a bit.
So that's how you create and save color schemes, as well as how
you add, edit, order and delete colors. We also saw a cool way
to select colors using a color picker to choose colors
directly from an image.
You can have many different color palettes, and though you can easily
change which palette is being used in a given context, you can only
use one color palette at a time in a given interface.
So now we need to understand how activate a color scheme
for a given interface.
There are two places where your available color palettes
are defined. First, we have what is called our
'Default colour palette' which we'll find under this button here.
The choice made here
is what will be applicable to all of your universal design
elements such as snippets, mini calendars which are popup calendars
that you can define
and typographies. The default color palette will also automatically
be set for any site layouts that you create, though you can change
this color scheme in your site layout.
In the context of page editing, module layouts and page layouts
you'll inherit the color scheme that is defined
in the active site layout
and if you want to use another color scheme in these contexts
you'll change it up in your site design.
So if I have a given page here that I want to edit
we can see that it uses the color scheme defined in
the site layout. To change it, I just need to find
the site layout in use and change the active color scheme.
I'll just right click on the page
enter into the pages properties' interface, and then click
on edit by the page's site layout, which in this case I can see
is the site's default as indicated by the 'select' option
being visible. Then, in my site layout under
the Tangora button > properties
under the 'Manager tab' I'll just change my color scheme
to whatever I'd like. And now when I save and publish my site layout
and return to my page
we'll notice that the new color scheme is available now.
Now here's an important piece of information: once a color
has been set to an element, the color remains.
That is to say, that if you change a color in a given slot
in a given color scheme, or switch color schemes
there is no retroactive effect on your colors
that you've already applied.
That is to say that changing a color palette will never lead
to a situation where your colors change automatically
so you can toggle your color palette choice whenever
you'd like without ever having to worry about messing anything up.
So that's everything you need to know
about color schemes.
Thank you for watching.