Color Set

color scale

type: color-set
A decision to define a color set.

Models

The following models can be used to produce a Color Set decision.

Explicit value

Defines a color set with arbitrary color values.

🚧 Schema

Sample data

{
  "model": "color-set/explicit",
  "name": "Color Set Explicit Sample",
  "params": {
    "values": [
      "#d35084",
      "#06b4e0",
      "#181818",
      "#f7f7f7"
    ]
  }
}

Color Set Explicit Sample

#d35084

#06b4e0

#181818

#f7f7f7

Model:

color-set/explicit

Params:

values

#d35084#06b4e0#181818#f7f7f7

Bounded

Defines a gradient set interpolating linearly between two colors.

🚧 Schema

Sample data

{
  "model": "color-set/bounded",
  "name": "Color Set Bounded Sample",
  "params": {
    "from": "#DD3F3F",
    "to": "#3049e0",
    "steps": 5
  }
}

Color Set Bounded Sample

#dd3f3f

#b55372

#8d5a99

#6257bd

#3049e0

Model:

color-set/bounded

Params:

from

#DD3F3F
to

#3049e0
steps

5

Anchored

Defines a color set from an anchor value applying modifiers to generate items before and/or after the anchor .

🚧 Schema

Sample data

{
  "model": "color-set/anchored",
  "name": "Color Set Anchored Sample",
  "params": {
    "anchor": "#d35084",
    "after": {
      "steps": 4,
      "modifier": {
        "space": "hsl",
        "l": {
          "mode": "linear",
          "by": 0.07
        },
        "s": {
          "mode": "linear",
          "by": -0.05
        }
      }
    },
    "before": {
      "steps": 4,
      "modifier": {
        "space": "hsl",
        "l": {
          "mode": "linear",
          "by": -0.1
        },
        "s": {
          "mode": "linear",
          "by": -0.05
        }
      }
    }
  }
}

Color Set Anchored Sample

#3d1a28

#64263e

#8e2f55

#ba366a

#d35084

#d67199

#da90ad

#e0aec2

#e8c9d6

Model:

color-set/anchored

Params:

anchor

#d35084
after

[object Object]
before

[object Object]