Edit Page

#Color

Helper functions that allow you to define, manipulate, mix, compare and convert colors.

The Color function allows you to quickly define and edit color values. Here, we’re defining a blue color, dynamically making it lighter, and then applying the converted color value to a Frame.

To apply the color, we’re first converting it to a string value. The returned hex string value is #3377FF. These modification and conversion functions are especially useful when working with larger color schemes, and for subtly altering base colors with visual states like hover.

import * as React from "react"
import { Frame, Color } from "framer"

export function MyComponent() {
  const darkBlue = Color("#0055FF")
  const blue = Color.lighten(darkBlue, 10)

  return (
    <Frame
      background={Color.toHexString(blue)}
      size="100%"
    />
  )
}

#Create

#Color(color, r, g, b): Color

The Color function can be used to define colors, either as a string value or as an object. All colors are converted to a Color object with r, g, b, h, s, l and an a value. There are also various helpers on the Color function for working with, modifying and detecting colors.

// HEX
const blue = Color("#0099FF")

// RGB
const blue = Color("rgb(0, 153, 255)")
const blue = Color(0, 153, 255)
const blue = Color({r: 0, g: 153, b: 255})
const blue = Color({r: 0, g: 153, b: 255, a: 1})

// HSL
const blue = Color("hsl(204, 100, 50)")
const blue = Color({h: 204, s: 100, l: 50})
const blue = Color({h: 204, s: 100, l: 50, a: 1})
color: IncomingColor | Color | number
r: number
g: number
b: number
returns: Color

#Color.random(alphaValue): Color

Returns a Color instance with a random color value set.

const random = Color.random()
alphaValue: number

An optional alpha value, set to 1 by default.

returns: Color

#Modify

#Color.alpha(color, a): Color

Set the alpha value, also known as opacity, of the color.

const blue = Color("#0099FF")

const transparent = Color.alpha(blue, 0.1)
color: Color

The original color to modify.

a: number

A number from 1 to 0. Set to 1 by default.

returns: Color

#Color.brighten(color, amount): Color

Returns a brightened color.

const blue = Color("#0099FF")
const brightblue = Color.lighten(blue, 20)
color: Color

The color to brighten

amount: number

A number, from 0 to 100. Set to 10 by default.

returns: Color

#Color.darken(color, amount): Color

Add black and return a darkened color.

const blue = Color("#0099FF")
const darkblue = Color.darken(blue, 20)
color: Color

The color to darken.

amount: number

A number, from 0 to 100. Set to 10 by default.

returns: Color

#Color.desaturate(color, amount): Color

Decrease the saturation of a color.

const blue = Color("#0099FF")
const desaturated = Color.desaturate(blue, 100)
color: Color

The color to modify

amount: number

A number from 0 to 100. Set to 10 by default.

returns: Color

#Color.difference(colorA, colorB): number

Calculates the color difference using Euclidean distance fitting human perception. Returns a value between 0 and 765

colorA: Color

A first color.

colorB: Color

A second color.

returns: number

#Color.grayscale(color): Color

Return a fully desaturated color.

const blue = Color("#0099FF")
const gray = Color.grayscale(blue)
color: Color

The color to convert.

returns: Color

#Color.hueRotate(color, angle): Color

Returns a new color for the rotated hue.

color: Color

The color to manipulate

angle: number

The angle in degrees in which to rotate the hue.

returns: Color

#Color.interpolate(colorA, colorB, model): (progress: number) => Color

Returns a function that can be used to transition a color from one value to another. By default this will use the RGB mix model. Useful for providing to animation tools.

const blend = Color.interpolate(Color("red"), Color("blue"))

blend(0)   // Initial state (red)
blend(0.5) // Mid state (purple)
blend(1)   // Final state (blue)
colorA: Color

The starting color

colorB: Color

The final color

model: ColorMixModelType

The model to use for the mix. One of ColorMixModelType

returns: (progress: number) => Color

#Color.lighten(color, amount): Color

Add white and return a lightened color.

const blue = Color("#0099FF")
const lightblue = Color.lighten(blue, 20)
color: Color

The color to lighten

amount: number

A number, from 0 to 100. Set to 10 by default.

returns: Color

#Color.mix(from, toColor, { model }): (p: number) => string

Create a function that will mix two colors together and output the result as an rgb string.

from: Color

The starting color

toColor: Color

The final color

{ model }: { model?: ColorMixModelType | undefined; }

Options for the color mixer

returns: (p: number) => string

#Color.multiplyAlpha(color, alphaValue): Color

Change the alpha value, also know as opacity, by a multiplier.

const blue = Color("#0099FF")
const transparent = Color.multiplyAlpha(blue, 0.5)
color: Color

The original color to modify.

alphaValue: number

A number between 1 and 0, defaults to 1,

returns: Color

#Color.saturate(color, amount): Color

Increase the saturation of a color.

const blue = Color("#0099FF")
const saturated = Color.saturate(blue, 100)
color: Color

The color to modify

amount: number

A number from 0 to 100. Set to 10 by default.

returns: Color

#Color.transparent(color): Color

Set the alpha value, also known as opacity, of the color to zero.

const blue = Color("#0099FF")

const transparent = Color.alpha(blue)
color: Color

The original color to modify.

returns: Color

#Convert

#Color.toHex(color, allow3Char): string

Formats a Color instance into an hexidecimal value.

const blue = Color("#0099FF")

Color.toHex(blue) // "0099FF"
Color.toHex(Color("#FFAAFF"), true) // "FAF"
color: Color

The color to format

allow3Char: boolean

If true will return short hand colors if possible (defaults to false).

returns: string

#Color.toHexString(color, allow3Char): string

Formats a Color instance into an hexidecimal string.

const blue = Color("#0099FF")

Color.toHexString(blue) // "#0099FF"
Color.toHexString(Color("#FFAAFF"), true) // "#FAF"
color: Color

The color to format

allow3Char: boolean

If true will return short hand colors if possible (defaults to false).

returns: string

#Color.toHsl(color): ColorHSLA

Formats a color into an HSL object.

const blue = Color("#0099FF")

Color.toHsl(blue) // {h: 204, s: 1, l: 0.5, a: 1}
color: Color

The color to format

returns: ColorHSLA

#Color.toHslString(color): string

Formats a Color instance into an HSL string.

const blue = Color("#0099FF")

Color.toHslString(blue) // "hsl(204, 100%, 50%)"
color: Color

The color to format

returns: string

#Color.toHsv(color): ColorHSVA

Formats a Color instance into an HSV object.

const blue = Color("#0099FF")

Color.toHsv(blue) // {h: 204, s: 1, v: 1, a: 1}"
color: Color

The color to format

returns: ColorHSVA

#Color.toHsvString(color): string

Formats a Color instance into an HSV string.

const blue = Color("#0099FF")

Color.toHslString(blue) // "hsv(204, 100%, 50%)"
color: Color

The color to format

returns: string

#Color.toHusl(color): ColorHSLA

Formats a Color instance into an HUSL object.

const blue = Color("#0099FF")

Color.toHusl(blue) // {h: 250, s: 100, l: 50, a: 1}
color: Color

The color to format

returns: ColorHSLA

#Color.toName(color): string | false

Formats a Color instance into CSS name or returns false if unspecified.

const green = Color("#8FBC8F")

Color.toName(green) // "darkseagreen"
color: Color

The color to format

returns: string | false

#Color.toRgb(color): ColorRGBA

Formats a color into an RGB object.

const blue = Color("#0099FF")

Color.toRgb(blue) // {r: 40, g: 175, b: 250, a: 1}
color: Color

The color to format

returns: ColorRGBA

#Color.toRgbString(color): string

Formats a Color instance into an RGB string.

const blue = Color("#0099FF")

Color.toRgbString(blue) // "rgb(0, 153, 255)"
color: Color

The color to format

returns: string

#Color.toString(color): string

Formats a Color instance into an RGB string.

const blue = Color("#0099FF")

Color.toString(blue) // "rgb(0, 153, 255)"
color: Color

The color to format

returns: string

#Compare

#Color.inspect(color, initialValue): string

Formats a Color object into a readable string for debugging.

const blue = Color("#0099FF")

Color.inspect(blue)
color: Color

The Color object to format

initialValue: string

A canonical hex string to be used instead of an rgba() value.

returns: string

#Color.isColor(color): boolean

Checks if the value is a valid color object or color string. Returns true or false.

Color.isColor("#0099FF") // true
Color.isColor(Color("#0099FF")) // true
color: string | Color

The potential color value to validate

returns: boolean

#Color.isColorObject(color): color is object & Color

Checks if the value is a valid Color object. Returns true or false.

const blue = Color("#0099FF")

Color.isColorObject(blue) // true
Color.isColorObject("#0099FF") // false
color: any

An object representing a color.

returns: color is object & Color

#Color.isColorString(colorString): boolean

Checks if the value is a valid color string. Returns true or false.

Color.isColorString("#0099FF") // true
colorString: string | object

A string representing a color

returns: boolean

#Models

#ColorMixModelType

Various Color functions, such as Color.mix and Color.interpolate, take an optional color model that determines how two colors are mixed together.

const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSL})

#ColorMixModelType.HSL

Use the HSL color space with an alpha value

const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSL})

#ColorMixModelType.HSLA

Use the HSL color space with an alpha value

const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HSLA})

#ColorMixModelType.HUSL

Use the HSLuv human friendly color model

const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.HUSL})

#ColorMixModelType.RGB

Use the RGB color space without an alpha value

const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.RGB})

#ColorMixModelType.RGBA

Use the RGB color space color space with an alpha value

const newColor = Color.mix(Color("red"), Color("blue"), {model: ColorMixModelType.RGBA})