Managing design system colors just got easier with Colorama™!
The perfect plugin for designers and creators.
- Systems Designer
- Front-End Developer
- Brand Manager
- Creative Director
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!
Swatches on the Figma Canvas
Now you can add all of the generated hex and primitive values onto a fully editable frame inside of Figma. Great for visualizing the work and using it to build more documentation for your design system libraries.
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. Check the full list of CSS names below for more ideas.
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.
Every CSS Color Name
While Colorama generalizes color names for simplicity, you can use any exact CSS names to generate specific colors or groups of color in your design system. 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