{"id":20461400,"url":"https://github.com/antvis/color-schema","last_synced_at":"2025-04-13T06:17:35.942Z","repository":{"id":47106953,"uuid":"354063716","full_name":"antvis/color-schema","owner":"antvis","description":"A JSON schema used to regulate semantic color assets or palettes.","archived":false,"fork":false,"pushed_at":"2021-11-16T15:57:29.000Z","size":1092,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-29T21:05:30.096Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antvis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-02T15:47:55.000Z","updated_at":"2023-03-27T05:20:43.000Z","dependencies_parsed_at":"2022-08-30T23:22:23.905Z","dependency_job_id":null,"html_url":"https://github.com/antvis/color-schema","commit_stats":null,"previous_names":["neoddish/color-palette-json-schema"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fcolor-schema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fcolor-schema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fcolor-schema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fcolor-schema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/color-schema/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246725266,"owners_count":20823609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T12:25:18.487Z","updated_at":"2025-04-13T06:17:35.921Z","avatar_url":"https://github.com/antvis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg\" width=\"18\"\u003e English | [简体中文](./README.zh-CN.md)\n\n\u003ch1 align=\"center\"\u003e\n\u003cb\u003e@antv/color-schema\u003c/b\u003e\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\nA JSON schema used to regulate semantic color assets or palettes.\n\u003c/div\u003e\n\n## ✨ Features\n* **Validate**: Validate data with JSON schema.\n* **Develop**: Develop with types and interfaces.\n\n## 📖 Example\n\n```js\n{\n  brandName: \"antd\",\n  palettes: [\n    {\n      name: \"trinity\",\n      semantic: \"three\",\n      type: \"categorical\",\n      colors: [\n        {\n          model: \"rgb\",\n          value: { r: 255, g: 0, b: 0 },\n          name: \"red\",\n          undertone: \"warm\",\n          usage: [ \"danger\", \"apple\" ]\n        },\n        {\n          model: \"rgb\",\n          value: { r: 0, g: 255, b: 0 },\n          name: \"green\",\n          undertone: \"neutral\"\n        },\n        {\n          model: \"rgb\",\n          value: { r: 0, g: 0, b: 255 },\n          name: \"blue\",\n          undertone: \"cool\"\n        }\n      ]\n    },\n    {\n      name: \"Leaf Yellow\",\n      semantic: \"tranquil\",\n      type: \"discrete-scale\",\n      description: \"Colors of leaves in different seasons.\",\n      colors: [\n        { model: \"rgb\", value: { r: 255, g: 235, b: 176} },\n        { model: \"rgb\", value: { r: 255, g: 223, b: 128} },\n        { model: \"rgb\", value: { r: 250, g: 202, b: 62 },\n        { model: \"rgb\", value: { r: 230, g: 184, b: 1 },\n        { model: \"rgb\", value: { r: 181, g: 172, b: 35} },\n        { model: \"rgb\", value: { r: 106, g: 154, b: 72} },\n        { model: \"rgb\", value: { r: 32, g: 135, b: 107} },\n        { model: \"rgb\", value: { r: 6, g: 116, b: 107} },\n        { model: \"rgb\", value: { r: 4, g: 78, b: 72} }\n      ],\n      \"usage\": [\"visualization\"]\n    },\n    {\n      name: \"scale3\",\n      semantic: \"passional\",\n      type: \"continuous-scale\",\n      colors: [\n        { model: \"rgb\", value: {r: 255, g: 247, b: 236}, location: 0 },\n        { model: \"rgb\", value: {r: 252, g: 141, b: 89}, location: 0.2 },\n        { model: \"rgb\", value: {r: 127, g: 0, b: 0}, location: 1 }\n      ]\n    },\n    {\n      name: \"Matrix\",\n      semantic: \"mysterious\",\n      type: \"matrix\",\n      colors: [\n        [\n          { model: \"rgb\", value: { r: 139, g: 89, b: 255 } },\n          { model: \"rgb\", value: { r: 103, g: 82, b: 255 } },\n          { model: \"rgb\", value: { r: 20, g: 68, b: 237 } }\n        ],\n        [ \n          { model: \"rgb\", value: { r: 183, g: 141, b: 255 } },\n          { model: \"rgb\", value: { r: 136, g: 129, b: 255 } },\n          { model: \"rgb\", value: { r: 27, g: 107, b: 237 } }\n        ],\n        [\n          { model: \"rgb\", value: { r: 215, g: 209, b: 255 } },\n          { model: \"rgb\", value: { r: 160, g: 191, b: 255 } },\n          { model: \"rgb\", value: { r: 32, g: 159, b: 237 } }\n        ]\n      ],\n      origin: {\n        x: [ \n          { model: \"rgb\", value: { r: 215, g: 209, b: 255 } },\n          { model: \"rgb\", value: { r: 160, g: 191, b: 255 } },\n          { model: \"rgb\", value: { r: 32, g: 159, b: 237 } }\n        ],\n        y: [\n          { model: \"rgb\", value: { r: 215, g: 209, b: 255 } },\n          { model: \"rgb\", value: { r: 183, g: 141, b: 255 } },\n          { model: \"rgb\", value: { r: 139, g: 89, b: 255 } }\n        ]\n      }\n    }\n  ]\n}\n```\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://gw.alipayobjects.com/zos/antfincdn/OJkRfCvSxN/palettes.png\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n## 📦 Installation\n```bash\n$ npm install @antv/color-schema\n```\n\n## 🔨 Usage\n\n### Validate \nValidate by [Ajv](https://github.com/ajv-validator/ajv) (JSON schema validator):\n\n```js\nimport Ajv from \"ajv\";\nimport colorSchema from \"build/color-schema.json\";\n\nconst ajv = new Ajv();\nconst validate = ajv.compile(colorSchema);\nconst valid = validate(data);\n```\n\n### Types \u0026 Interfaces\n\nSome types and interfaces:\n\n```js\nimport { ColorSchema, Palette, Color } from '@antv/color-schema';\n```\n\n#### ColorSchema\nColor Schema is a color assets package consisting of a collection of palettes.\n```ts\ninterface ColorSchema {\n  brandName: string;\n  palettes: Palette[];\n}\n```\n\n#### Palette\nColor palette is a collection of colors.\n```ts\ninterface Palette {\n  id?: string;\n  name: string;\n  type: PaletteType;\n  semantic: string | null;\n  description?: string;\n  colorScheme?: ColorSchemeType;\n  usage?: string[];\n  colors: Color[] | ContinuousColor[] | colors: Color[][];\n  origin?: {\n    x: Color[];\n    y: Color[];\n  };\n}\n```\n\n#### PaletteType\nAccording to different data types and usage scenarios, four different [types](https://antv.vision/en/docs/specification/language/palette#6-%E5%A4%A7%E8%89%B2%E6%9D%BF%E7%B1%BB%E5%9E%8B) of color plates are provided.\n```ts\ntype PaletteType = \"categorical\" | \"discrete-scale\" | \"continuous-scale\" | \"matrix\";\n```\n\n#### ColorSchemeType\n[Color scheme](https://en.wikipedia.org/wiki/Color_scheme) is described in terms of logical combinations of colors on a color wheel. Different types of schemes, like monochromatic or complementary, are used.\n```ts\ntype ColorSchemeType = \n  | \"monochromatic\"\n  | \"complementary\"\n  | \"split-complementary\"\n  | \"achromatic\"\n  | \"analogous\"\n  | \"triadic\"\n  | \"tetradic\"\n  | \"polychromatic\"\n  | \"customized\";\n```\n\n#### Color\n```ts\ninterface Color {\n  model: ColorModel;\n  value: ColorValue;\n  id?: string;\n  name?: string;\n  undertone?: Undertone;\n  usage?: string[];\n}\n```\n\n#### ColorModel\n```ts\ntype ColorModel = \"hsl\" | \"hsv\" | \"hsi\" | \"rgb\" | \"rgba\" | \"lab\" | \"lch\" | \"cmyk\";\n```\n\n#### Undertone\n```ts\ntype Undertone = \"warm\" | \"neutral\" | \"cool\";\n```\n\n## 💻 Dev\n\n```bash\nnpm install\nnpm run start\n```\n\n## 🔗 Reference\n\n* [Ant Design Colors](https://ant.design/docs/spec/colors)\n* [AntV Color Design](https://antv.vision/en/docs/specification/language/palette)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fcolor-schema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2Fcolor-schema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fcolor-schema/lists"}