css-color.json

{
  "spec": {
    "title": "CSS Color Module Level 4",
    "url": "https://www.w3.org/TR/css-color-4/"
  },
  "properties": {
    "color": {
      "name": "color",
      "value": "<color>",
      "initial": "CanvasText",
      "appliesTo": "all elements and text",
      "inherited": "yes",
      "percentages": "N/A",
      "computedValue": "computed color, see resolving color values",
      "canonicalOrder": "per grammar",
      "animationType": "by computed value type",
      "styleDeclaration": [
        "color"
      ]
    },
    "opacity": {
      "name": "opacity",
      "value": "<alpha-value>",
      "initial": "1",
      "appliesTo": "all elements",
      "inherited": "no",
      "percentages": "map to the range [0,1]",
      "computedValue": "specified number, clamped to the range [0,1]",
      "canonicalOrder": "per grammar",
      "animationType": "by computed value type",
      "styleDeclaration": [
        "opacity"
      ]
    }
  },
  "descriptors": {
    "src": [
      {
        "name": "src",
        "for": "@color-profile",
        "value": "<url>",
        "initial": "n/a"
      }
    ],
    "rendering-intent": [
      {
        "name": "rendering-intent",
        "for": "@color-profile",
        "value": "relative-colorimetric | absolute-colorimetric | perceptual | saturation",
        "initial": "relative-colorimetric"
      }
    ],
    "components": [
      {
        "name": "components",
        "for": "@color-profile",
        "value": "<ident>#",
        "initial": "n/a"
      }
    ]
  },
  "valuespaces": {
    "<color>": {
      "value": "<hex-color> | <named-color> | currentcolor | transparent | <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <color()> | <device-cmyk()> | <system-color>"
    },
    "<hue>": {
      "value": "<number> | <angle>"
    },
    "<rgb()>": {
      "value": "rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? )"
    },
    "<alpha-value>": {
      "value": "<number> | <percentage>"
    },
    "<hsl()>": {
      "value": "hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? )"
    },
    "<hwb()>": {
      "value": "hwb( <hue> <percentage> <percentage> [ / <alpha-value> ]? )"
    },
    "<lab()>": {
      "value": "lab( <percentage> <number> <number> [ / <alpha-value> ]? )"
    },
    "<lch()>": {
      "value": "lch( <percentage> <number> <hue> [ / <alpha-value> ]? )"
    },
    "<color()>": {
      "value": "color( [<ident> | <dashed-ident>] [ <number-percentage>+ ] [ / <alpha-value> ]? )"
    },
    "<device-cmyk()>": {
      "value": "device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? )"
    },
    "<cmyk-component>": {
      "value": "<number> | <percentage>"
    }
  }
}