Text Color

Utilities for controlling the text color of an element.

React propsCSS Properties
color={color}color: {color};


Control the text color of an element using the color={color} utilities.

<x.div color="red-500">Computers have ...</x.div> <x.div color="emerald-700">Computers have ...</x.div> <x.div color="light-blue-700-a50">Computers have ...</x.div> <x.div color="#f59e0b">Computers have ...</x.div> <x.div color="rgba(4, 120, 87, 0.5)">Computers have ...</x.div>


To control the text color of an element on hover, use color={{ hover: color }} utility.

<x.div color={{ _: 'red-400', hover: 'red-800' }}> Computers have lots of memory but no imagination. </x.div>


To control the text color of an element on hover, use color={{ focus: color }} utility.

<x.input defaultValue="Something" color={{ _: 'red-600', focus: 'red-800' }} />


To control the placeholder color of an element, use color={{ placeholder: color }} utility.

<x.input placeholder="Type something..." color={{ _: 'red-600', placeholder: 'red-300' }} />


To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property color={{ md: "red-600" }} to an element would apply the color="red-600" utility at medium screen sizes and above.

<x.div color={{ md: 'red-600' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.



If you'd like to customize your values for kind of colors, use the theme.colors section of your theme.

  // theme.js
  import { th, generateHexAlphaVariants } from '@xstyled/styled-components'

  export const theme = {
    colors: generateHexAlphaVariants({
      // ...
+     'deep-blue': '#00008b',
+     'primary': th.color('red-600'),
Edit this page on GitHub