Color Set

color set

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
- 0
  
  oklch(61.92% 0.1717 358.75)
- 1
  
  oklch(71.53% 0.1332 223.66)
- 2
  
  oklch(20.9% 0 0)
- 3
  
  oklch(97.61% 0 0)

Sample data

{
  "uuid": "2af4408e72930c91ca66fc3a5970586e",
  "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

#d43169

#c42d8e

#ac31af

#8e37ca

#683edb

#3049e0

Model:

color-set/bounded

Params:

from

#DD3F3F
to

#3049e0
steps

5

Sample data

{
  "uuid": "3c494d549bd6a063397753793c93b34b",
  "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
- 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

Sample data

{
  "uuid": "17ce4ff8891660639a5ece66ef9172ec",
  "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
        }
      }
    }
  }
}