What if naming tokens was easy?
Managing your design system colors just got a little easier with Colorama™!
The perfect plugin for designers and creators.
- Systems Designer
- Front-End Developer
- Brand Manager
- Creative Director
Easy Primitive Token Naming
Need: As a systems designer, I want to accurately name my primitive color variables to keep my design system organized.
Outcome: Well-named colors lead to consistent and organized work for my team.
How it works
- Launch the plugin using Figma
- Paste in your hexadecimal color
- COLORAMA™ evaluates hue and brightness
- Your color is assigned a hue name
- Click the token or hex to copy/paste to a collection
You can even paste in a comma-separated list of hex values!
Naming Format
All primitive names follow the format: [hue] [dash] [number].orange-250 for example.
Colorama uses 15 of the most common color hue names. Orange, teal, gray, black, white, etc.
The number indicates brightness on a scale from 0 (lightest) to 1000 (darkest). Feel free to adjust this scale based on your system's needs.
All CSS Color Names
While Colorama generalizes hue names for simplicity, you can use any canonical CSS names to generate specific colors. This reference can help you create unique names tailored to your brand palette.
Red
-
indianred:
#CD5C5C -
lightcoral:
#F08080 -
salmon:
#FA8072 -
darksalmon:
#E9967A -
lightsalmon:
#FFA07A -
crimson:
#DC143C -
red:
#FF0000 -
firebrick:
#B22222 -
darkred:
#8B0000
Orange
-
coral:
#FF7F50 -
tomato:
#FF6347 -
orangered:
#FF4500 -
gold:
#FFD700 -
orange:
#FFA500 -
darkorange:
#FF8C00
Yellow
-
lightyellow:
#FFFFE0 -
lemonchiffon:
#FFFACD -
lightgoldenrodyellow:
#FAFAD2 -
papayawhip:
#FFEFD5 -
moccasin:
#FFE4B5 -
peachpuff:
#FFDAB9 -
palegoldenrod:
#EEE8AA -
khaki:
#F0E68C -
darkkhaki:
#BDB76B -
yellow:
#FFFF00
Green
-
lawngreen:
#7CFC00 -
chartreuse:
#7FFF00 -
limegreen:
#32CD32 -
lime:
#00FF00 -
forestgreen:
#228B22 -
green:
#008000 -
darkgreen:
#006400 -
greenyellow:
#ADFF2F -
yellowgreen:
#9ACD32 -
springgreen:
#00FF7F -
mediumspringgreen:
#00FA9A -
lightgreen:
#90EE90 -
palegreen:
#98FB98 -
darkseagreen:
#8FBC8F -
mediumseagreen:
#3CB371 -
seagreen:
#2E8B57 -
olive:
#808000 -
darkolivegreen:
#556B2F -
olivedrab:
#6B8E23
Blue
-
lightcyan:
#E0FFFF -
cyan:
#00FFFF -
aqua:
#00FFFF -
aquamarine:
#7FFFD4 -
mediumaquamarine:
#66CDAA -
paleturquoise:
#AFEEEE -
turquoise:
#40E0D0 -
mediumturquoise:
#48D1CC -
darkturquoise:
#00CED1 -
lightseagreen:
#20B2AA -
cadetblue:
#5F9EA0 -
darkcyan:
#008B8B -
teal:
#008080 -
powderblue:
#B0E0E6 -
lightblue:
#ADD8E6 -
lightskyblue:
#87CEFA -
skyblue:
#87CEEB -
deepskyblue:
#00BFFF -
dodgerblue:
#1E90FF -
cornflowerblue:
#6495ED -
steelblue:
#4682B4 -
royalblue:
#4169E1 -
blue:
#0000FF -
mediumblue:
#0000CD -
darkblue:
#00008B -
navy:
#000080
Indigo
-
blueviolet:
#8A2BE2 -
indigo:
#4B0082 -
darkslateblue:
#483D8B -
slateblue:
#6A5ACD -
mediumslateblue:
#7B68EE -
mediumpurple:
#9370DB -
rebeccapurple:
#663399
Violet
-
lavender:
#E6E6FA -
thistle:
#D8BFD8 -
plum:
#DDA0DD -
violet:
#EE82EE -
orchid:
#DA70D6 -
fuchsia:
#FF00FF -
magenta:
#FF00FF -
mediumvioletred:
#C71585 -
deeppink:
#FF1493 -
hotpink:
#FF69B4 -
palevioletred:
#DB7093 -
lightpink:
#FFB6C1 -
pink:
#FFC0CB
Neutrals and Grays
-
antiquewhite:
#FAEBD7 -
beige:
#F5F5DC -
bisque:
#FFE4C4 -
blanchedalmond:
#FFEBCD -
wheat:
#F5DEB3 -
cornsilk:
#FFF8DC -
burlywood:
#DEB887 -
tan:
#D2B48C -
rosybrown:
#BC8F8F -
sandybrown:
#F4A460 -
goldenrod:
#DAA520 -
darkgoldenrod:
#B8860B -
peru:
#CD853F -
chocolate:
#D2691E -
saddlebrown:
#8B4513 -
sienna:
#A0522D -
brown:
#A52A2A -
maroon:
#800000 -
white:
#FFFFFF -
snow:
#FFFAFA -
honeydew:
#F0FFF0 -
mintcream:
#F5FFFA -
azure:
#F0FFFF -
aliceblue:
#F0F8FF -
ghostwhite:
#F8F8FF -
whitesmoke:
#F5F5F5 -
seashell:
#FFF5EE -
oldlace:
#FDF5E6 -
floralwhite:
#FFFAF0 -
ivory:
#FFFFF0 -
yellow:
#FFFF00 -
gold:
#FFD700 -
orange:
#FFA500 -
orangered:
#FF4500 -
tomato:
#FF6347 -
coral:
#FF7F50 -
deeppink:
#FF1493 -
hotpink:
#FF69B4 -
lightpink:
#FFB6C1 -
pink:
#FFC0CB