Include color names

[tomlroach]

We have a large color library we use for our design system and Sketch palettes is the ideal way for designers in Sketch to import colors. For accessiblity purposes, we have specific color names (Grey 10, grey 20, grey 50 and so on) which we use to refer to colors and to ensure one color is accessible on another.

It's therefore very important for us to be able to see the names of the colour, not just the hex values.

Could Sketch palette support color names, and displaying those color names inside Sketch in some way. For example including a color name in addition to the hex value when a user hovers over the swatch

[guylepage3]

+1 This would be extremely helpful.

[nhellberg]

That would be awesome. I just searched for a possibility to add names but couldn't find any solutions.

[andrewfiorillo]

Good news! In the forthcoming Sketch 53 release, support for naming colors will be added. So I will then be able to add the ability to save preset names with a palette.

[kaelig]

Great news! I'll be on the lookout for what format should be generated from our design tokens in order to support names.

[chasemccoy]

Me too for our design token library: https://github.com/sproutsocial/seeds-packets

[andrewfiorillo]

Good news! This has now been implemented for the latest version of Sketch. Grab the latest version of the plugin to use it.

[guylepage3]

Awesome news!!

[chasemccoy]

@andrewfiorillo Is there an example anywhere of the format we need to use for this?

[andrewfiorillo]

@chasemccoy sure. It's very similar to the previous format, it just adds a "name" key for each color, which is just a string. Below is an example. I've also attached the file.

{
  "compatibleVersion": "2.0",
  "pluginVersion": "2.21",
  "colors": [
    {
      "name": "Black",
      "red": 0,
      "green": 0,
      "blue": 0,
      "alpha": 1
    },
    {
      "name": "Dark Gray",
      "red": 0.5568627450980392,
      "green": 0.5568627450980392,
      "blue": 0.5764705882352941,
      "alpha": 1
    },
    {
      "name": "Light Gray",
      "red": 0.9372549019607843,
      "green": 0.9372549019607843,
      "blue": 0.9568627450980391,
      "alpha": 1
    },
    {
      "name": "White",
      "red": 1,
      "green": 1,
      "blue": 1,
      "alpha": 1
    },
    {
      "name": "Blue",
      "red": 0,
      "green": 0.4784313725490196,
      "blue": 1,
      "alpha": 1
    },
    {
      "name": "Green",
      "red": 0.2980392156862745,
      "green": 0.8509803921568627,
      "blue": 0.39215686274509803,
      "alpha": 1
    },
    {
      "name": "Yellow",
      "red": 1,
      "green": 0.8,
      "blue": 0,
      "alpha": 1
    },
    {
      "name": "Orange",
      "red": 1,
      "green": 0.5843137254901961,
      "blue": 0,
      "alpha": 1
    },
    {
      "name": "Red",
      "red": 1,
      "green": 0.1764705882352941,
      "blue": 0.3333333333333333,
      "alpha": 1
    }
  ],
  "gradients": [],
  "images": []
}

palette-with-names.zip

[chasemccoy]

@andrewfiorillo Thanks so much!

[Korotovsky-Taras]

sketch 58 not support this feature