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.

Sample decision

#d35084

#06b4e0

#181818

#f7f7f7

Model:

color-set/explicit

Params:

values

oklch(61.92% 0.1717 358.75)oklch(71.53% 0.1332 223.66)oklch(20.9% 0 0)oklch(97.61% 0 0)

Sample data

{
  "name": "Color Set Explicit Sample",
  "model": "color-set/explicit",
  "params": {
    "values": [
      "oklch(61.92% 0.1717 358.75)",
      "oklch(71.53% 0.1332 223.66)",
      "oklch(20.9% 0 0)",
      "oklch(97.61% 0 0)"
    ]
  }
}

🐘 Help wanted: Documenting schemas

Bounded

Defines a gradient set interpolating linearly between two colors.

Sample decision

#dd3f3f

#c34e63

#a85780

#8d5a99

#7159b2

#5354c9

#3049e0

Model:

color-set/bounded

Params:

from

#DD3F3F
to

#3049e0
steps

5

Sample data

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

🐘 Help wanted: Documenting schemas

Anchored

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

Sample decision

#b43c6c

#c84277

#d35084

#d581a2

#dcadc0

#e8d4dc

Model:

color-set/anchored

Params:

anchor

#d35084
before

[object Object]
after

[object Object]

Sample data

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