Chi · Color

Color

Use shorthand color utility classes to quickly apply or remove a background color.

Notation

Color utility classes can be defined using the format -bg-{breakpoint}--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints

Color utility classes with no breakpoint defined apply to all screen sizes.

Color Class	Value	Result
`-bg--none`	`background: none;`
`-bg--primary`	`background-color:#0047BB`
`-bg--secondary`	`background-color:#48D597`
`-bg--white`	`background-color:#FFFFFF`
`-bg--black`	`background-color:#000000`
`-bg--muted`	`background-color:#72767A`
`-bg--grey`	`background-color:#53565A`
`-bg--grey-10`	`background-color:#F8F9F9`
`-bg--grey-20`	`background-color:#EDF0F2`
`-bg--grey-30`	`background-color:#D0D4D9`
`-bg--success`	`background-color:#097A49`
`-bg--warning`	`background-color:#854E03`
`-bg--danger`	`background-color:#B50D12`

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Color Class	Value
`-bg-sm--none`	Visible only from `sm`
`-bg-sm--primary`	Visible only from `sm`
`-bg-sm--secondary`	Visible only from `sm`
`-bg-sm--white`	Visible only from `sm`
`-bg-sm--black`	Visible only from `sm`
`-bg-sm--muted`	Visible only from `sm`
`-bg-sm--grey`	Visible only from `sm`
`-bg-sm--grey-10`	Visible only from `sm`
`-bg-sm--grey-20`	Visible only from `sm`
`-bg-sm--grey-30`	Visible only from `sm`
`-bg-sm--success`	Visible only from `sm`
`-bg-sm--warning`	Visible only from `sm`
`-bg-sm--danger`	Visible only from `sm`
`-bg-md--none`	Visible only from `md`
`-bg-md--primary`	Visible only from `md`
`-bg-md--secondary`	Visible only from `md`
`-bg-md--white`	Visible only from `md`
`-bg-md--black`	Visible only from `md`
`-bg-md--muted`	Visible only from `md`
`-bg-md--grey`	Visible only from `md`
`-bg-md--grey-10`	Visible only from `md`
`-bg-md--grey-20`	Visible only from `md`
`-bg-md--grey-30`	Visible only from `md`
`-bg-md--success`	Visible only from `md`
`-bg-md--warning`	Visible only from `md`
`-bg-md--danger`	Visible only from `md`
`-bg-lg--none`	Visible only from `lg`
`-bg-lg--primary`	Visible only from `lg`
`-bg-lg--secondary`	Visible only from `lg`
`-bg-lg--white`	Visible only from `lg`
`-bg-lg--black`	Visible only from `lg`
`-bg-lg--muted`	Visible only from `lg`
`-bg-lg--grey`	Visible only from `lg`
`-bg-lg--grey-10`	Visible only from `lg`
`-bg-lg--grey-20`	Visible only from `lg`
`-bg-lg--grey-30`	Visible only from `lg`
`-bg-lg--success`	Visible only from `lg`
`-bg-lg--warning`	Visible only from `lg`
`-bg-lg--danger`	Visible only from `lg`
`-bg-xl--none`	Visible only from `xl`
`-bg-xl--primary`	Visible only from `xl`
`-bg-xl--secondary`	Visible only from `xl`
`-bg-xl--white`	Visible only from `xl`
`-bg-xl--black`	Visible only from `xl`
`-bg-xl--muted`	Visible only from `xl`
`-bg-xl--grey`	Visible only from `xl`
`-bg-xl--grey-10`	Visible only from `xl`
`-bg-xl--grey-20`	Visible only from `xl`
`-bg-xl--grey-30`	Visible only from `xl`
`-bg-xl--success`	Visible only from `xl`
`-bg-xl--warning`	Visible only from `xl`
`-bg-xl--danger`	Visible only from `xl`

Examples

-bg--primary

-bg-sm--secondary

-bg-md--warning

-bg-lg--danger

-bg-xl--black

-bg--none

<!-- background-color primary on all breakpoints -->
<div class="-bg--primary"></div>
<!-- background-color secondary from sm -->
<div class="-bg-sm--secondary"></div>
<!-- background-color warning from md -->
<div class="-bg-md--warning"></div>
<!-- background-color danger from lg -->
<div class="-bg-lg--danger"></div>
<!-- background-color black from xl -->
<div class="-bg-xl--black"></div>
<!-- background none on all breakpoints -->
<div class="-bg--none"></div>