@theme-ui/color
Color manipulation utilities for Theme UI
npm i @theme-ui/color
Import utilities from the @theme-ui/color
package and use them with colors in the sx
prop.
import { jsx } from 'theme-ui'
import { darken, lighten } from '@theme-ui/color'
export default props =>
<div
{...props}
sx={{
color: darken('primary', .25),
bg: lighten('primary', .875),
}}
/>
API
darken
Darken a color by an amount 0–1
import { darken } from '@theme-ui/color'
lighten
Lighten a color by an amount 0–1
import { lighten } from '@theme-ui/color'
rotate
Rotate the hue of a color by an amount 0–360
import { rotate } from '@theme-ui/color'
hue
Set the hue of a color to a degree 0–360
import { hue } from '@theme-ui/color'
saturation
Set the saturation of a color to an amount 0–1
import { saturation } from '@theme-ui/color'
lightness
Set the lightness of a color to an amount 0–1
import { lightness } from '@theme-ui/color'
desaturate
Desaturate a color by an amount 0–1
import { desaturate } from '@theme-ui/color'
saturate
Saturate a color by an amount 0–1
import { saturate } from '@theme-ui/color'
shade
Shade a color by an amount 0–1
import { shade } from '@theme-ui/color'
tint
Tint a color by an amount 0–1
import { tint } from '@theme-ui/color'
alpha
Set the transparency of a color to an amount 0-1
import { alpha } from '@theme-ui/color'
transparentize
Similar to alpha
, but decreases opacity by the given amount.
import { transparentize } from '@theme-ui/color'
mix
Mix two colors by a specific ratio
import { mix } from '@theme-ui/color'
complement
Get the complement of a color
import { complement } from '@theme-ui/color'
invert
Get the inverted color
import { invert } from '@theme-ui/color'
Related