ColorBox

by @kvyn_

Resources

Import

Export

Export

Copy JSON

[ { "properties": { "steps": 11, "hue": { "start": 220, "end": 240, "curve": "easeOutQuad" }, "saturation": { "start": 0.08, "end": 1, "rate": 1, "curve": "easeOutQuad" }, "brightness": { "start": 1, "end": 0.2, "curve": "easeInQuart" } }, "options": { "minorSteps": [ 0, 1 ], "name": "Blue", "provideInverted": false, "rotation": "clockwise" } } ]

Share URL

Copy URL

Figma Plugin

Open

Algorithm

Open

Colors

Blue

01.1318.56#ebf1ffH(220)S(0.08)B(1)

0.51.3116.01#d4e1ffH(221.9)S(0.17)B(1)

11.5513.55#becffeH(223.7)S(0.25)B(1)

1.51.8511.36#a8bdfdH(225.6)S(0.34)B(0.99)

22.259.33#93a9fdH(227.4)S(0.42)B(0.99)

3:1 (#FFFFFF) ↓

33.376.22#6c82fbH(230.6)S(0.57)B(0.98)

4.5:1 (#FFFFFF) ↓

44.94.29#4c5ff7H(233.3)S(0.69)B(0.97)

56.563.2#3342f2H(235.4)S(0.79)B(0.95)

68.172.57#202ae9H(237.1)S(0.86)B(0.91)

79.872.13#1117d7H(238.3)S(0.92)B(0.84)

812.681.66#070aadH(239.1)S(0.96)B(0.68)

917.161.22#02026bH(239.7)S(0.99)B(0.42)

1020.041.05#000033H(240)S(1)B(0.2)

Properties

Options

Hue

Start

End

Rotation

Clockwise

Counter

Curve

LinearCubicQuadQuartSineQuint

Direction

easeIneaseOuteaseInOut

Saturation

Start

End

Rate

Curve

LinearCubicQuadQuartSineQuint

Direction

easeIneaseOuteaseInOut

Brightness

Start

End

Curve

LinearCubicQuadQuartSineQuint

Direction

easeIneaseOuteaseInOut

Major Steps

Set number of colors to be returned

Steps

Minor Steps

Add extra step(s) between two other steps without modifying progression

Minor Step

011.52345678910

Minor Step

00.512345678910

Lock Hex

Forces color progression through a hex value

Hex Value

Auto Dark Mode

Creates an linked inverted color set

Manual Dark Mode

Creates an editable inverted color set