Origami Frontend Components & Services

Readme: o-colors active

The color palette for the FT masterbrand and sub-brand products.


There are a number of ways of using colors in your component or product. o-colors can be used via the Build Service, but it is recommended you import the Sass into your project to make use of the many Sass mixins and functions available.


As with all Origami components, o-colors has a silent mode. To use its compiled CSS (rather than incorporating its mixins into your own Sass) set $o-colors-is-silent : false; in your Sass before you import the o-colors Sass:

$o-colors-is-silent: false;
@import 'o-colors/main';

Colors and accessibility

o-colors has been built to help bridge the gap between design and development by providing functionality to help create colors dynamically from a central palette as well as generate contrasted text colors based on an elements background color.

You can create tints of a color with the oColorsGetTint function. The function takes a palette color name and a brightness value (based on HSB color) to return a tint of the palette color.

To work with text colors the oColorsFor mixin and oColorsGetTextColor function will output a text color based on the background color, which will be a mix of either black or white with the background at the percentage requested. You can also mix two colors manually using the oColorsMix function, providing two colors (either hex or palette color names) and a percentage at which to mix them.

When working with the oColorsFor and oColorsGetTextColor features, the Sass will also automatically test the background color with the generated text color to see if the combination passes Web Content Accessibility Guidelines (WCAG). If the combination fails to pass at least WCAG AA you will see an error, if the combination passes AA but only at a larger font size (18px+), there will be a warning.

For manually testing color contrasts, you can use Lea Verou's Contrast Ratio tool.

Mixins and functions

o-colors has a number of mixins and functions for you to access the color palette in your project, here they are listed from the most to least preferred methods of working with o-colors.

Use case mixin

Use the oColorsFor mixin to add color-related properties to your ruleset:

.my-thing {
    @include oColorsFor(custom-box box, background text, 80);

Will output:

.my-thing {
    background-color: #f2dfce;
    color: #302d29; // black mixed with #f2dfce at 80%

It takes three arguments:

In the example above, the background and text colors are set, preferably from the custom-box use case, and if either of those properties are not available for that use case, from the box use case. If the text use case is not set, the function will output a text color based on either black or white (depending on the brightness of the background) blended with the background color at the text level specified.

Use case function

If you need to use a color value as part of a more complex CSS rule, e.g. a border color for just one side, or a gradient background, use the oColorsGetColorFor function:

.my-thing {
    color: oColorsGetColorFor(article-life-arts-body article-body body, text, (default: blue));

The oColorsGetColorFor function takes three arguments:

This function will not generate a text color based on the use case like oColorsFor to get a text color based on a use case, use oColorsGetTextColor

Palette color function

If you have a color use case not covered by those built into the colors module, consider defining a custom use case (see below) and then using the use case mixin or function described above. However, if you need to use a particular color in one single place only, it may be worth using the oColorsGetPaletteColor function, which returns the CSS color for a palette color name:

.my-thing {
    color: oColorsGetPaletteColor('white-60');

Generated text colors

oColorsGetTextColor will return a text color based on the background and an opacity specified. The base of the text color is either black or white depending on the brightness of the background color and then mixed with the background at the specified opacity using oColorsMix.

Warning: if the combination of background and text color created by the function would not pass WCAG AA level, o-colors will throw an error.


.o-colors-palette-teal {
    color: oColorsGetTextColor(oColorsGetPaletteColor('teal'), 80);


.o-colors-palette-teal {
    color: #cce3e5;

Tint palette colors

oColorsGetTint will return a tinted palette color based on a specified brightness.
The function takes the name of a palette color and an HSB brightness value between 0-100. For every colour except black, increasing the HSB brightness makes it appear lighter (ie claret becomes much pinker). Increasing the HSB brightness value of black will make it blacker. Take a look at the registry demo for a visual demo of this.


.o-colors-tinted-color {
    background-color: oColorsGetTint('jade', 90);


.o-colors-tinted-color {
    background-color: #177ee6;

Mix colors

oColorsMix will mix two colors based on a percentage. This gives the impression of the base color appearing at the percentage opacity over the background color. oColorsMix will accept either a color value or the name of an o-colors palette color as arguments.


.o-colors-palette-white {
    border: 1px solid oColorsMix(black, white, 20);


.o-colors-palette-white {
    border: 1px solid #cccccc;

Defining custom use cases

You can add use cases for your particular component or product. This is done using the oColorsSetUseCase mixin:

@include oColorsSetUseCase(email, text, 'black-60');

It takes three arguments:

If you are creating a use case for a component, you must namespace your use case name with the name of your component.

You can also use oColorsGetUseCase to retrieve the palette color name (eg paper) defined against a usecase. This can be useful when you need the palette color name to use with another Sass mixin.


When using the build service or importing the module with silent mode set to false, o-colors provides you with helper classes to access the color palette. All palette colors are available as .o-colors-palette-[NAME] (which style just background-color) and use cases are available as .o-colors-[USECASE]-[PROPERTY] (which style the appropriate property):

<p class="o-colors-body-text">Article text</p>

CSS Variables

When using the build service or importing the module with silent mode set to false, o-colors will output all the palette colors as CSS Variables. These will use the format --o-colors-{name} (e.g. --o-colors-black and --o-colors-teal).

Migration guide

Upgrading from v3.x.x to v4.x.x

o-colors v4.x.x updates the entire palette of colors and adds a lot more functionality through new mixins and functions. The palette has been reduced from over 60 colors to a base palette of around 20 colors. These colors can be manipulated using new mixins to get a wide range of on brand colors accessibility compliant colors.

To migrate from v3.x.x to use v4.x.x you will need to update the palette colors you are requesting using oColorsFor, oColorsSetUseCase, and oColorsGetPaletteColor. To work out which color names you need to update, we've created a table showing which colors should now be used in place of the old v3.x.x palette colors.

New use cases have been added for opinion, hero and highlight branding.
The product-brand use case has been removed.


If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-colors

If using the Build Service, add o-colors@^4.1.5 to your link tag.

If running a Manual Build, run bower install --save "o-colors@^4.1.5".

Help & Support

o-colors is maintained directly by the Origami team. If you have any questions about o-colors or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com