跳到正文
GuideMake
指南
Getting started Assets
标识
Logo Brand attributes Co-branding
色彩
Foundation colors 基础渐变
字形
Chinese typeface English typeface
图形
Diagrams Iconography Illustration
品牌感受
Long image themes Moodboard Presentations Social Swag
动效
Overview
用户_84520…免费
MCP 服务
生活号 BrandKit/色彩/基础渐变

全局基础渐变,全局十二组渐变,三个分支共同引用。

README 约束 Skill

十二组基础渐变

可整体作背景,也可使用其中一组配色。保留原稿色标;统一基础黄不意味着替换渐变中的所有黄色。

GD01

linear-gradient(0deg, #FFFFFF 19.7115%, #336AFE 46.1538%, #020B50 82.6923%, #000000 100%)

GD02

linear-gradient(180deg, #000000 0%, #020B50 50.4808%, #0019FF 68.1767%, #ECEDFD 100%)

GD03

linear-gradient(180deg, #000000 40.8654%, #0019FF 91.8269%, #ECEDFD 100%)

GD04

linear-gradient(180deg, #2F93FF 0%, #9F83F4 35.4646%, #0009DA 83.47%, #000000 100%)

GD05

linear-gradient(180deg, #2F93FF 0%, #0009DA 24.5192%, #000000 100%)

GD06

linear-gradient(180deg, #035AFF 0%, #4485FC 48.5577%, #93B7FB 71.6346%, #FFFFFF 100%)

GD07

linear-gradient(180deg, #1D96FF 0%, #3DC8FF 14.6878%, #6FBEFF 46.6346%, #FFFFFF 100%)

GL01

linear-gradient(180deg, #FFFFFF 40.8654%, #336AFE 91.8269%, #ECEDFD 100%)

GL02

linear-gradient(0deg, #336AFE 0%, #336AFE 17.3077%, #FFFFFF 80.2885%)

GL03

linear-gradient(0deg, #2FB0FD 0%, #FBFFD0 85.7014%, #FFCE35 100%)

GL04

linear-gradient(180deg, #FCA166 0%, #F8DCCE 11.5385%, #2C7EF9 100%)

GL05

linear-gradient(180deg, #FF730A 0%, #FFD13D 48.5577%, #F1FBD3 71.6346%, #FFFFFF 100%)

这条规范如何写成代码

{
  "brand.gradients.gd01": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "alpha": 1
        },
        "position": 0.19711536169052124
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.2,
            0.41568627450980394,
            0.996078431372549
          ],
          "alpha": 1
        },
        "position": 0.4615384638309479
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.00784313725490196,
            0.043137254901960784,
            0.3137254901960784
          ],
          "alpha": 1
        },
        "position": 0.8269230723381042
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gd02": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.00784313725490196,
            0.043137254901960784,
            0.3137254901960784
          ],
          "alpha": 1
        },
        "position": 0.504807710647583
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.09803921568627451,
            1
          ],
          "alpha": 1
        },
        "position": 0.6817670464515686
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.9254901960784314,
            0.9294117647058824,
            0.9921568627450981
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gd03": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "alpha": 1
        },
        "position": 0.4086538553237915
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.09803921568627451,
            1
          ],
          "alpha": 1
        },
        "position": 0.9182692170143127
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.9254901960784314,
            0.9294117647058824,
            0.9921568627450981
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gd04": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.1843137254901961,
            0.5764705882352941,
            1
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.6235294117647059,
            0.5137254901960784,
            0.9568627450980393
          ],
          "alpha": 1
        },
        "position": 0.3546459972858429
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.03529411764705882,
            0.8549019607843137
          ],
          "alpha": 1
        },
        "position": 0.8347000479698181
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gd05": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.1843137254901961,
            0.5764705882352941,
            1
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.03529411764705882,
            0.8549019607843137
          ],
          "alpha": 1
        },
        "position": 0.24519230425357819
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0,
            0,
            0
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gd06": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.011764705882352941,
            0.35294117647058826,
            1
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.26666666666666666,
            0.5215686274509804,
            0.9882352941176471
          ],
          "alpha": 1
        },
        "position": 0.48557692766189575
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.5764705882352941,
            0.7176470588235294,
            0.984313725490196
          ],
          "alpha": 1
        },
        "position": 0.7163461446762085
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gd07": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.11372549019607843,
            0.5882352941176471,
            1
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.23921568627450981,
            0.7843137254901961,
            1
          ],
          "alpha": 1
        },
        "position": 0.14687806367874146
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.43529411764705883,
            0.7450980392156863,
            1
          ],
          "alpha": 1
        },
        "position": 0.4663461446762085
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gl01": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "alpha": 1
        },
        "position": 0.4086538553237915
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.2,
            0.41568627450980394,
            0.996078431372549
          ],
          "alpha": 1
        },
        "position": 0.9182692170143127
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.9254901960784314,
            0.9294117647058824,
            0.9921568627450981
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gl02": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.2,
            0.41568627450980394,
            0.996078431372549
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.2,
            0.41568627450980394,
            0.996078431372549
          ],
          "alpha": 1
        },
        "position": 0.17307692766189575
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "alpha": 1
        },
        "position": 0.8028846383094788
      }
    ]
  },
  "brand.gradients.gl03": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.1843137254901961,
            0.6901960784313725,
            0.9921568627450981
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.984313725490196,
            1,
            0.8156862745098039
          ],
          "alpha": 1
        },
        "position": 0.8570142984390259
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.807843137254902,
            0.20784313725490197
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gl04": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.9882352941176471,
            0.6313725490196078,
            0.4
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.9725490196078431,
            0.8627450980392157,
            0.807843137254902
          ],
          "alpha": 1
        },
        "position": 0.11538461595773697
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.17254901960784313,
            0.49411764705882355,
            0.9764705882352941
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  },
  "brand.gradients.gl05": {
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.45098039215686275,
            0.0392156862745098
          ],
          "alpha": 1
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8196078431372549,
            0.23921568627450981
          ],
          "alpha": 1
        },
        "position": 0.48557692766189575
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.9450980392156862,
            0.984313725490196,
            0.8274509803921568
          ],
          "alpha": 1
        },
        "position": 0.7163461446762085
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "alpha": 1
        },
        "position": 1
      }
    ]
  }
}

brand.gradients.gd01GD01

brand.gradients.gd02GD02

brand.gradients.gd03GD03

brand.gradients.gd04GD04

brand.gradients.gd05GD05

brand.gradients.gd06GD06

brand.gradients.gd07GD07

brand.gradients.gl01GL01

brand.gradients.gl02GL02

brand.gradients.gl03GL03

brand.gradients.gl04GL04

brand.gradients.gl05GL05

本页

基础渐变