Text Color

Atomic Props	CSS Properties
{colorName}	color: {named color};
color={value}	color: {value};

Use color in design system

Result

Loading...

Live Editor

<Box textXL toEvenly> <Box gray600>gray600</Box> <Box red500>red500</Box> <Box green400>green400</Box> </Box>

<Box textXL toEvenly>
  <Box gray600>gray600</Box>
  <Box red500>red500</Box>
  <Box green400>green400</Box>
</Box>

call preset color：Color palette

Use color props

Result

Loading...

Live Editor

<Box textXL toEvenly> <Box color="orange400">orange400</Box> <Box color="deeppink">deeppink</Box> <Box color="#4fd1c5">#4fd1c5</Box> </Box>

<Box textXL toEvenly>
  <Box color="orange400">orange400</Box>
  <Box color="deeppink">deeppink</Box>
  <Box color="#4fd1c5">#4fd1c5</Box>
</Box>

Color opacity

transparentize color:

Result

Loading...

Live Editor

<Box row toEvenly> <Box orange500>orange500</Box> <Box orange500--T40>orange500--T40</Box> <Box color="red500">red500</Box> <Box color="red500--T40">red500--T40</Box> <Box color="#4fd1c5">#4fd1c5</Box> <Box color="#4fd1c5--T40">#4fd1c5-T40</Box> </Box>

<Box row toEvenly>
  <Box orange500>orange500</Box>
  <Box orange500--T40>orange500--T40</Box>
  <Box color="red500">red500</Box>
  <Box color="red500--T40">red500--T40</Box>
  <Box color="#4fd1c5">#4fd1c5</Box>
  <Box color="#4fd1c5--T40">#4fd1c5-T40</Box>
</Box>

opacify color

Result

Loading...

Live Editor

<Box row toEvenly> <Box color="rgba(0,0,0,0.2)">rgba(0,0,0,0.2)</Box> <Box color="rgba(0,0,0,0.2)--O40">rgba(0,0,0,0.2)--O40</Box> <Box color="rgba(0,0,0,0.2)--O60">rgba(0,0,0,0.2)--O60</Box> <Box color="rgba(0,0,0,0.2)--O80">rgba(0,0,0,0.2)--O80</Box> </Box>

<Box row toEvenly>
  <Box color="rgba(0,0,0,0.2)">rgba(0,0,0,0.2)</Box>
  <Box color="rgba(0,0,0,0.2)--O40">rgba(0,0,0,0.2)--O40</Box>
  <Box color="rgba(0,0,0,0.2)--O60">rgba(0,0,0,0.2)--O60</Box>
  <Box color="rgba(0,0,0,0.2)--O80">rgba(0,0,0,0.2)--O80</Box>
</Box>

lighten color

Result

Loading...

Live Editor

<Box row toEvenly> <Box orange500>orange500</Box> <Box orange500--L40>orange500--L40</Box> <Box color="red500">red500</Box> <Box color="red500--L40">red500--L40</Box> <Box color="#4fd1c5">#4fd1c5</Box> <Box color="#4fd1c5--L40">#4fd1c5--L40</Box> </Box>

<Box row toEvenly>
  <Box orange500>orange500</Box>
  <Box orange500--L40>orange500--L40</Box>
  <Box color="red500">red500</Box>
  <Box color="red500--L40">red500--L40</Box>
  <Box color="#4fd1c5">#4fd1c5</Box>
  <Box color="#4fd1c5--L40">#4fd1c5--L40</Box>
</Box>

darken color

Result

Loading...

Live Editor

<Box row toEvenly> <Box orange500>orange500</Box> <Box orange500--D30>orange500--D30</Box> <Box color="red500">red500</Box> <Box color="red500--D30">red500--D30</Box> <Box color="#4fd1c5">#4fd1c5</Box> <Box color="#4fd1c5--D30">#4fd1c5--D30</Box> </Box>

<Box row toEvenly>
  <Box orange500>orange500</Box>
  <Box orange500--D30>orange500--D30</Box>
  <Box color="red500">red500</Box>
  <Box color="red500--D30">red500--D30</Box>
  <Box color="#4fd1c5">#4fd1c5</Box>
  <Box color="#4fd1c5--D30">#4fd1c5--D30</Box>
</Box>

Hover

Result

Loading...

Live Editor

<Box textXL row toEvenly> <Box green400 red400--hover> Hello </Box> <Box color="#4fd1c5" color--hover="purple"> Hello </Box> </Box>

<Box textXL row toEvenly>
  <Box green400 red400--hover>
    Hello
  </Box>
  <Box color="#4fd1c5" color--hover="purple">
    Hello
  </Box>
</Box>

hover with transparentize, lighten, darken:

Result

Loading...

Live Editor

<Box textXL row toEvenly> <Box green400 green400--T60--hover> Hello </Box> <Box green400 green400--L30--hover> Hello </Box> <Box green400 green400--D30--hover> Hello </Box> </Box>

<Box textXL row toEvenly>
  <Box green400 green400--T60--hover>
    Hello
  </Box>
  <Box green400 green400--L30--hover>
    Hello
  </Box>
  <Box green400 green400--D30--hover>
    Hello
  </Box>
</Box>

Focus

Result

Loading...

Live Editor

<Box as="input" defaultValue="Focus me" outlineNone border p2 green400 red400--focus />

<Box as="input" defaultValue="Focus me" outlineNone border p2 green400 red400--focus />