@antv/color-schema

English | 简体中文

@antv/color-schema

A JSON schema used to regulate semantic color assets or palettes.

✨ Features

• Validate: Validate data with JSON schema.
• Develop: Develop with types and interfaces.

📖 Example

{
  brandName: "antd",
  palettes: [
    {
      name: "trinity",
      semantic: "three",
      type: "categorical",
      colors: [
        {
          model: "rgb",
          value: { r: 255, g: 0, b: 0 },
          name: "red",
          undertone: "warm",
          usage: [ "danger", "apple" ]
        },
        {
          model: "rgb",
          value: { r: 0, g: 255, b: 0 },
          name: "green",
          undertone: "neutral"
        },
        {
          model: "rgb",
          value: { r: 0, g: 0, b: 255 },
          name: "blue",
          undertone: "cool"
        }
      ]
    },
    {
      name: "Leaf Yellow",
      semantic: "tranquil",
      type: "discrete-scale",
      description: "Colors of leaves in different seasons.",
      colors: [
        { model: "rgb", value: { r: 255, g: 235, b: 176} },
        { model: "rgb", value: { r: 255, g: 223, b: 128} },
        { model: "rgb", value: { r: 250, g: 202, b: 62 },
        { model: "rgb", value: { r: 230, g: 184, b: 1 },
        { model: "rgb", value: { r: 181, g: 172, b: 35} },
        { model: "rgb", value: { r: 106, g: 154, b: 72} },
        { model: "rgb", value: { r: 32, g: 135, b: 107} },
        { model: "rgb", value: { r: 6, g: 116, b: 107} },
        { model: "rgb", value: { r: 4, g: 78, b: 72} }
      ],
      "usage": ["visualization"]
    },
    {
      name: "scale3",
      semantic: "passional",
      type: "continuous-scale",
      colors: [
        { model: "rgb", value: {r: 255, g: 247, b: 236}, location: 0 },
        { model: "rgb", value: {r: 252, g: 141, b: 89}, location: 0.2 },
        { model: "rgb", value: {r: 127, g: 0, b: 0}, location: 1 }
      ]
    },
    {
      name: "Matrix",
      semantic: "mysterious",
      type: "matrix",
      colors: [
        [
          { model: "rgb", value: { r: 139, g: 89, b: 255 } },
          { model: "rgb", value: { r: 103, g: 82, b: 255 } },
          { model: "rgb", value: { r: 20, g: 68, b: 237 } }
        ],
        [ 
          { model: "rgb", value: { r: 183, g: 141, b: 255 } },
          { model: "rgb", value: { r: 136, g: 129, b: 255 } },
          { model: "rgb", value: { r: 27, g: 107, b: 237 } }
        ],
        [
          { model: "rgb", value: { r: 215, g: 209, b: 255 } },
          { model: "rgb", value: { r: 160, g: 191, b: 255 } },
          { model: "rgb", value: { r: 32, g: 159, b: 237 } }
        ]
      ],
      origin: {
        x: [ 
          { model: "rgb", value: { r: 215, g: 209, b: 255 } },
          { model: "rgb", value: { r: 160, g: 191, b: 255 } },
          { model: "rgb", value: { r: 32, g: 159, b: 237 } }
        ],
        y: [
          { model: "rgb", value: { r: 215, g: 209, b: 255 } },
          { model: "rgb", value: { r: 183, g: 141, b: 255 } },
          { model: "rgb", value: { r: 139, g: 89, b: 255 } }
        ]
      }
    }
  ]
}

📦 Installation

$ npm install @antv/color-schema

🔨 Usage

Validate

Validate by Ajv (JSON schema validator):

import Ajv from "ajv";
import colorSchema from "build/color-schema.json";

const ajv = new Ajv();
const validate = ajv.compile(colorSchema);
const valid = validate(data);

Types & Interfaces

Some types and interfaces:

import { ColorSchema, Palette, Color } from '@antv/color-schema';

ColorSchema

Color Schema is a color assets package consisting of a collection of palettes.

interface ColorSchema {
  brandName: string;
  palettes: Palette[];
}

Palette

Color palette is a collection of colors.

interface Palette {
  id?: string;
  name: string;
  type: PaletteType;
  semantic: string | null;
  description?: string;
  colorScheme?: ColorSchemeType;
  usage?: string[];
  colors: Color[] | ContinuousColor[] | colors: Color[][];
  origin?: {
    x: Color[];
    y: Color[];
  };
}

PaletteType

According to different data types and usage scenarios, four different types of color plates are provided.

type PaletteType = "categorical" | "discrete-scale" | "continuous-scale" | "matrix";

ColorSchemeType

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.

type ColorSchemeType = 
  | "monochromatic"
  | "complementary"
  | "split-complementary"
  | "achromatic"
  | "analogous"
  | "triadic"
  | "tetradic"
  | "polychromatic"
  | "customized";

Color

interface Color {
  model: ColorModel;
  value: ColorValue;
  id?: string;
  name?: string;
  undertone?: Undertone;
  usage?: string[];
}

ColorModel

type ColorModel = "hsl" | "hsv" | "hsi" | "rgb" | "rgba" | "lab" | "lch" | "cmyk";

Undertone

type Undertone = "warm" | "neutral" | "cool";

💻 Dev

npm install
npm run start

🔗 Reference

• Ant Design Colors
• AntV Color Design

License

MIT