Skip to main content

Text Color

Atomic PropsCSS Properties
{colorName}color: {named color};
color={value}color: {value};

Use color in design system

Result
gray600
red500
green400
Live Editor

call preset color:Color palette

Use color props

Result
orange400
deeppink
#4fd1c5
Live Editor

Color opacity

transparentize color:

Result
orange500
orange500--T40
red500
red500--T40
#4fd1c5
#4fd1c5-T40
Live Editor

opacify color

Result
rgba(0,0,0,0.2)
rgba(0,0,0,0.2)--O40
rgba(0,0,0,0.2)--O60
rgba(0,0,0,0.2)--O80
Live Editor

lighten color

Result
orange500
orange500--L40
red500
red500--L40
#4fd1c5
#4fd1c5--L40
Live Editor

darken color

Result
orange500
orange500--D30
red500
red500--D30
#4fd1c5
#4fd1c5--D30
Live Editor

Hover

Result
Hello
Hello
Live Editor

hover with transparentize, lighten, darken:

Result
Hello
Hello
Hello
Live Editor

Focus

Result
Live Editor