Text Color
Atomic Props | CSS 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