Cobalt

Appearance

Color ​

A CSS-valid color as defined in 8.1.

json
{
  "blue": {
    "600": {
      "$type": "color",
      "$value": "oklch(60% 0.216564 269)"
    }
  }
}
yaml
blue:
  600:
    $type: color
    $value: oklch(60% 0.216564 269)
PropertyTypeDescription
$typestringRequired. "color"
$valuestringRequired. Though the spec limits valid colors to hex, Cobalt allows any color (parsed by Culori
$descriptionstring(Optional) A description of this token and its intended usage.

See also ​

Color is a frequently-used base token that can be aliased within the following composite token types:

Global options ​

See color-specific configuration options

Tips & recommendations ​

  • Culori is the preferred library for working with color. It’s great both as an accurate, complete color science library that can parse & generate any format. But is also easy-to-use for simple color operations and is fast and lightweight (even on the client).
  • Prefer the OKLCH format for declaring colors (why?). It’s not only a futureproof standard; it also allows for better color manipulation than sRGB/hex and is more perceptually-even.
  • To generate accessible color ramps, give Leonardo a try.