Color

Use this utility props and classes to apply a custom background or stroke colour to an element.

Usage

If you are using the React package, wrap your component within the <Color /> component. For Pallote CSS, simply apply the classes to your element.

Text colour

The text colour is automatically applied using the contrast colour variables.

Props

Fill & Stroke

Add the following classes to an element to override the background color or border color. When you change the background color with the fill utility, the text color will update automatically.

Common

main

contrast

main

contrast

React

<Color fill="main"></Color>
<Color fill="contrast"></Color>

<Color stroke="main"></Color>
<Color stroke="contrast"></Color>

CSS

<div class="fill-main"></div>
<div class="fill-contrast"></div>

<div class="stroke-main"></div>
<div class="stroke-contrast"></div>

Grey

grey 90

grey 80

grey 70

grey 60

grey 50

grey 40

grey 30

grey 20

grey 10

grey 5

grey 90

grey 80

grey 70

grey 60

grey 50

grey 40

grey 30

grey 20

grey 10

grey 5

React

<Color fill="grey90"></Color>
<Color fill="grey80"></Color>
<Color fill="grey70"></Color>
<Color fill="grey60"></Color>
<Color fill="grey50"></Color>
<Color fill="grey40"></Color>
<Color fill="grey30"></Color>
<Color fill="grey20"></Color>
<Color fill="grey10"></Color>
<Color fill="grey5"></Color>

<Color stroke="grey90"></Color>
<Color stroke="grey80"></Color>
<Color stroke="grey70"></Color>
<Color stroke="grey60"></Color>
<Color stroke="grey50"></Color>
<Color stroke="grey40"></Color>
<Color stroke="grey30"></Color>
<Color stroke="grey20"></Color>
<Color stroke="grey10"></Color>
<Color stroke="grey5"></Color>

CSS

<div class="fill-grey90"></div>
<div class="fill-grey80"></div>
<div class="fill-grey70"></div>
<div class="fill-grey60"></div>
<div class="fill-grey50"></div>
<div class="fill-grey40"></div>
<div class="fill-grey30"></div>
<div class="fill-grey20"></div>
<div class="fill-grey10"></div>
<div class="fill-grey5"></div>

<div class="stroke-grey90"></div>
<div class="stroke-grey80"></div>
<div class="stroke-grey70"></div>
<div class="stroke-grey60"></div>
<div class="stroke-grey50"></div>
<div class="stroke-grey40"></div>
<div class="stroke-grey30"></div>
<div class="stroke-grey20"></div>
<div class="stroke-grey10"></div>
<div class="stroke-grey5"></div>

Background

default

paper

default

paper

React

<Color fill="default"></Color>
<Color fill="paper"></Color>

<Color stroke="default"></Color>
<Color stroke="paper"></Color>

CSS

<div class="fill-background"></div>
<div class="fill-paper"></div>

<div class="stroke-background"></div>
<div class="stroke-paper"></div>

Brand

primary

secondary

primary

secondary

React

<Color fill="primary"></Color>
<Color fill="secondary"></Color>

<Color stroke="primary"></Color>
<Color stroke="secondary"></Color>

CSS

<div class="fill-primary"></div>
<div class="fill-secondary"></div>

<div class="stroke-primary"></div>
<div class="stroke-secondary"></div>

Status

success

info

warning

error

success

info

warning

error

React

<Color fill="success"></Color>
<Color fill="info"></Color>
<Color fill="warning"></Color>
<Color fill="error"></Color>

<Color stroke="success"></Color>
<Color stroke="info"></Color>
<Color stroke="warning"></Color>
<Color stroke="error"></Color>

CSS

<div class="fill-success"></div>
<div class="fill-info"></div>
<div class="fill-warning"></div>
<div class="fill-error"></div>

<div class="stroke-success"></div>
<div class="stroke-info"></div>
<div class="stroke-warning"></div>
<div class="stroke-error"></div>

Misc

border

border

React

<Color fill="border"></Color>

<Color stroke="border"></Color>

CSS

<div class="fill-border"></div>

<div class="stroke-border"></div>

CustomFill and customStroke

For the react Color component, you can enter an hex value to add a custom fill or stroke color to an element.

custom fill

custom stroke

custom fill & stroke

React

<Color customFill="#C6882C"></Color>
<Color customStroke="#007BFF"></Color>
<Color customFill="#C6882C" customStroke="#007BFF"></Color>

Props details

Prop	Values	Default
fill	main contrast default paper grey90 grey80 grey70 grey60 grey50 grey40 grey30 grey20 grey10 grey5 primary secondary success info warning error border
stroke	main contrast default paper grey90 grey80 grey70 grey60 grey50 grey40 grey30 grey20 grey10 grey5 primary secondary success info warning error border
customFill	string
customStroke	string