Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@theme-ui/color

Package Overview
Dependencies
Maintainers
2
Versions
430
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@theme-ui/color

Color manipulation utilities for Theme UI

  • 0.2.40
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9K
decreased by-16.29%
Maintainers
2
Weekly downloads
 
Created
Source

@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.

/** @jsx jsx */
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'
// darken('primary', amount)

lighten

Lighten a color by an amount 0–1

import { lighten } from '@theme-ui/color'
// lighten('primary', amount)

rotate

Rotate the hue of a color by an amount 0–360

import { rotate } from '@theme-ui/color'
// rotate('primary', degrees)

hue

Set the hue of a color to a degree 0–360

import { hue } from '@theme-ui/color'
// hue('primary', degrees)

saturation

Set the saturation of a color to an amount 0–1

import { saturation } from '@theme-ui/color'
// saturation('primary', amount)

lightness

Set the lightness of a color to an amount 0–1

import { lightness } from '@theme-ui/color'
// lightness('primary', amount)

desaturate

Desaturate a color by an amount 0–1

import { desaturate } from '@theme-ui/color'
// desaturate('primary', amount)

saturate

Saturate a color by an amount 0–1

import { saturate } from '@theme-ui/color'
// saturate('primary', amount)

shade

Shade a color by an amount 0–1

import { shade } from '@theme-ui/color'
// shade('primary', amount)

tint

Tint a color by an amount 0–1

import { tint } from '@theme-ui/color'
// tint('primary', amount)

mix

Mix two colors by a specific ratio

import { mix } from '@theme-ui/color'
// mix('primary', 'secondary', ratio)

complement

Get the complement of a color

import { complement } from '@theme-ui/color'
// complement('primary')

invert

Get the inverted color

import { invert } from '@theme-ui/color'
// invert('primary')
  • Polished

FAQs

Package last updated on 03 Sep 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc