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.

The Color function does not support Shared Colors yet.
Learn how to import shared colors in Canvas Components.
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: 1, l: 0.5})
const blue = Color({h: 204, s: 1, l: 0.5, 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})