Html-color-names NPM

html-color-names

HTML has 148 named colors. What if you could generate a color palette using each one of them?

How to use it with Tailwind

Install the html-color-names npm package:

npm install --save-dev html-color-names

Import and add the colors to your tailwind.config.js

const hcn = require("html-color-names");
const { htmlcolors } = hcn;
const { firebrick } = htmlcolors; // destructure all the HTML colors you want to use

export default {
	content: [],
	theme: {
		extend: {
			colors: {
				firebrick, // HTML color
			},
		},
	},
	plugins: [],
}

Now you can use the following classes in you HTML:

Background	Text	Border	Outline
`.bg-firebrick-50`	`.text-firebrick-50`	`.border-firebrick-50`	`.outline-firebrick-50`
`.bg-firebrick-100`	`.text-firebrick-100`	`.border-firebrick-100`	`.outline-firebrick-100`
`.bg-firebrick-200`	`.text-firebrick-200`	`.border-firebrick-200`	`.outline-firebrick-200`
`.bg-firebrick-300`	`.text-firebrick-300`	`.border-firebrick-300`	`.outline-firebrick-300`
`.bg-firebrick-400`	`.text-firebrick-400`	`.border-firebrick-400`	`.outline-firebrick-400`
`.bg-firebrick-500`	`.text-firebrick-500`	`.border-firebrick-500`	`.outline-firebrick-500`
`.bg-firebrick-600`	`.text-firebrick-600`	`.border-firebrick-600`	`.outline-firebrick-600`
`.bg-firebrick-700`	`.text-firebrick-700`	`.border-firebrick-700`	`.outline-firebrick-700`
`.bg-firebrick-800`	`.text-firebrick-800`	`.border-firebrick-800`	`.outline-firebrick-800`
`.bg-firebrick-900`	`.text-firebrick-900`	`.border-firebrick-900`	`.outline-firebrick-900`
`.bg-firebrick-950`	`.text-firebrick-950`	`.border-firebrick-950`	`.outline-firebrick-950`

Importing all colors

You can import all 148 colors into your Tailwind project by putting this in your tailwind.config.js

const tailwindcolors = require('tailwindcss/colors');
const { slate, blue, white } = tailwindcolors; // destructure all the tailwind colors you want to use

const hcn = require("html-color-names");
const { htmlcolors } = hcn;

export default {
	content: [],
	theme: {
		colors: {
			...htmlcolors, // import all 148 color palettes
			slate, blue, white, // import all Tailwind colors, will overwrite colors if names clash
		},
		extend: {},
	},
	plugins: [],
}

Note that colors likered, blue and orange are present in both htmlcolors and tailwindcolors, so whichever you put last will overwrite the other. I recommend putting tailwindcolors last because its colors are handpicked and should be preferred over htmlcolors which is auto-generated.

How I generate palettes?

I am using python to automatically generate palettes for each color. The basic logic for generating a palette is as follows:

Each HTML color is assumed to be the basecolor and gets 5 tints and 5 shades to generate the palette.
tints are colors between the basecolor and White.
shades are colors between the basecolor and Black.
basecolor is set to be 500.
tints are named from 50, 100, 200, 300 and 400.
shades are named from 600, 700, 800, 900 and 950.
The higher the number, the darker the color.

Limitations

Since the palettes are automatically generated, there is no guarantee that the generated colors will look good. Some of the known problems you should watch out for, are:

Saturated colors like Red, Blue and Green don't always look very good.
Too light colors like LightCyan and LightGoldenRodYellow have too similar tints because there isn't enough gap between the color and White.
Too dark colors like DarkGreen and DarkBlue have too similar shades because there isn't enough gap between the color and Black.

List of HTML color palettes

#	Name	className	Hex	CSS	JSON
1	AliceBlue	`aliceblue`	`#f0f8ff`	CSS	JSON
2	AntiqueWhite	`antiquewhite`	`#faebd7`	CSS	JSON
3	Aqua	`aqua`	`#00ffff`	CSS	JSON
4	Aquamarine	`aquamarine`	`#7fffd4`	CSS	JSON
5	Azure	`azure`	`#f0ffff`	CSS	JSON
6	Beige	`beige`	`#f5f5dc`	CSS	JSON
7	Bisque	`bisque`	`#ffe4c4`	CSS	JSON
8	Black	`black`	`#000000`	CSS	JSON
9	BlanchedAlmond	`blanchedalmond`	`#ffebcd`	CSS	JSON
10	Blue	`blue`	`#0000ff`	CSS	JSON
11	BlueViolet	`blueviolet`	`#8a2be2`	CSS	JSON
12	Brown	`brown`	`#a52a2a`	CSS	JSON
13	BurlyWood	`burlywood`	`#deb887`	CSS	JSON
14	CadetBlue	`cadetblue`	`#5f9ea0`	CSS	JSON
15	Chartreuse	`chartreuse`	`#7fff00`	CSS	JSON
16	Chocolate	`chocolate`	`#d2691e`	CSS	JSON
17	Coral	`coral`	`#ff7f50`	CSS	JSON
18	CornflowerBlue	`cornflowerblue`	`#6495ed`	CSS	JSON
19	Cornsilk	`cornsilk`	`#fff8dc`	CSS	JSON
20	Crimson	`crimson`	`#dc143c`	CSS	JSON
21	Cyan	`cyan`	`#00ffff`	CSS	JSON
22	DarkBlue	`darkblue`	`#00008b`	CSS	JSON
23	DarkCyan	`darkcyan`	`#008b8b`	CSS	JSON
24	DarkGoldenRod	`darkgoldenrod`	`#b8860b`	CSS	JSON
25	DarkGray	`darkgray`	`#a9a9a9`	CSS	JSON
26	DarkGrey	`darkgrey`	`#a9a9a9`	CSS	JSON
27	DarkGreen	`darkgreen`	`#006400`	CSS	JSON
28	DarkKhaki	`darkkhaki`	`#bdb76b`	CSS	JSON
29	DarkMagenta	`darkmagenta`	`#8b008b`	CSS	JSON
30	DarkOliveGreen	`darkolivegreen`	`#556b2f`	CSS	JSON
31	DarkOrange	`darkorange`	`#ff8c00`	CSS	JSON
32	DarkOrchid	`darkorchid`	`#9932cc`	CSS	JSON
33	DarkRed	`darkred`	`#8b0000`	CSS	JSON
34	DarkSalmon	`darksalmon`	`#e9967a`	CSS	JSON
35	DarkSeaGreen	`darkseagreen`	`#8fbc8f`	CSS	JSON
36	DarkSlateBlue	`darkslateblue`	`#483d8b`	CSS	JSON
37	DarkSlateGray	`darkslategray`	`#2f4f4f`	CSS	JSON
38	DarkSlateGrey	`darkslategrey`	`#2f4f4f`	CSS	JSON
39	DarkTurquoise	`darkturquoise`	`#00ced1`	CSS	JSON
40	DarkViolet	`darkviolet`	`#9400d3`	CSS	JSON
41	DeepPink	`deeppink`	`#ff1493`	CSS	JSON
42	DeepSkyBlue	`deepskyblue`	`#00bfff`	CSS	JSON
43	DimGray	`dimgray`	`#696969`	CSS	JSON
44	DimGrey	`dimgrey`	`#696969`	CSS	JSON
45	DodgerBlue	`dodgerblue`	`#1e90ff`	CSS	JSON
46	FireBrick	`firebrick`	`#b22222`	CSS	JSON
47	FloralWhite	`floralwhite`	`#fffaf0`	CSS	JSON
48	ForestGreen	`forestgreen`	`#228b22`	CSS	JSON
49	Fuchsia	`fuchsia`	`#ff00ff`	CSS	JSON
50	Gainsboro	`gainsboro`	`#dcdcdc`	CSS	JSON
51	GhostWhite	`ghostwhite`	`#f8f8ff`	CSS	JSON
52	Gold	`gold`	`#ffd700`	CSS	JSON
53	GoldenRod	`goldenrod`	`#daa520`	CSS	JSON
54	Gray	`gray`	`#808080`	CSS	JSON
55	Grey	`grey`	`#808080`	CSS	JSON
56	Green	`green`	`#008000`	CSS	JSON
57	GreenYellow	`greenyellow`	`#adff2f`	CSS	JSON
58	HoneyDew	`honeydew`	`#f0fff0`	CSS	JSON
59	HotPink	`hotpink`	`#ff69b4`	CSS	JSON
60	IndianRed	`indianred`	`#cd5c5c`	CSS	JSON
61	Indigo	`indigo`	`#4b0082`	CSS	JSON
62	Ivory	`ivory`	`#fffff0`	CSS	JSON
63	Khaki	`khaki`	`#f0e68c`	CSS	JSON
64	Lavender	`lavender`	`#e6e6fa`	CSS	JSON
65	LavenderBlush	`lavenderblush`	`#fff0f5`	CSS	JSON
66	LawnGreen	`lawngreen`	`#7cfc00`	CSS	JSON
67	LemonChiffon	`lemonchiffon`	`#fffacd`	CSS	JSON
68	LightBlue	`lightblue`	`#add8e6`	CSS	JSON
69	LightCoral	`lightcoral`	`#f08080`	CSS	JSON
70	LightCyan	`lightcyan`	`#e0ffff`	CSS	JSON
71	LightGoldenRodYellow	`lightgoldenrodyellow`	`#fafad2`	CSS	JSON
72	LightGray	`lightgray`	`#d3d3d3`	CSS	JSON
73	LightGrey	`lightgrey`	`#d3d3d3`	CSS	JSON
74	LightGreen	`lightgreen`	`#90ee90`	CSS	JSON
75	LightPink	`lightpink`	`#ffb6c1`	CSS	JSON
76	LightSalmon	`lightsalmon`	`#ffa07a`	CSS	JSON
77	LightSeaGreen	`lightseagreen`	`#20b2aa`	CSS	JSON
78	LightSkyBlue	`lightskyblue`	`#87cefa`	CSS	JSON
79	LightSlateGray	`lightslategray`	`#778899`	CSS	JSON
80	LightSlateGrey	`lightslategrey`	`#778899`	CSS	JSON
81	LightSteelBlue	`lightsteelblue`	`#b0c4de`	CSS	JSON
82	LightYellow	`lightyellow`	`#ffffe0`	CSS	JSON
83	Lime	`lime`	`#00ff00`	CSS	JSON
84	LimeGreen	`limegreen`	`#32cd32`	CSS	JSON
85	Linen	`linen`	`#faf0e6`	CSS	JSON
86	Magenta	`magenta`	`#ff00ff`	CSS	JSON
87	Maroon	`maroon`	`#800000`	CSS	JSON
88	MediumAquaMarine	`mediumaquamarine`	`#66cdaa`	CSS	JSON
89	MediumBlue	`mediumblue`	`#0000cd`	CSS	JSON
90	MediumOrchid	`mediumorchid`	`#ba55d3`	CSS	JSON
91	MediumPurple	`mediumpurple`	`#9370db`	CSS	JSON
92	MediumSeaGreen	`mediumseagreen`	`#3cb371`	CSS	JSON
93	MediumSlateBlue	`mediumslateblue`	`#7b68ee`	CSS	JSON
94	MediumSpringGreen	`mediumspringgreen`	`#00fa9a`	CSS	JSON
95	MediumTurquoise	`mediumturquoise`	`#48d1cc`	CSS	JSON
96	MediumVioletRed	`mediumvioletred`	`#c71585`	CSS	JSON
97	MidnightBlue	`midnightblue`	`#191970`	CSS	JSON
98	MintCream	`mintcream`	`#f5fffa`	CSS	JSON
99	MistyRose	`mistyrose`	`#ffe4e1`	CSS	JSON
100	Moccasin	`moccasin`	`#ffe4b5`	CSS	JSON
101	NavajoWhite	`navajowhite`	`#ffdead`	CSS	JSON
102	Navy	`navy`	`#000080`	CSS	JSON
103	OldLace	`oldlace`	`#fdf5e6`	CSS	JSON
104	Olive	`olive`	`#808000`	CSS	JSON
105	OliveDrab	`olivedrab`	`#6b8e23`	CSS	JSON
106	Orange	`orange`	`#ffa500`	CSS	JSON
107	OrangeRed	`orangered`	`#ff4500`	CSS	JSON
108	Orchid	`orchid`	`#da70d6`	CSS	JSON
109	PaleGoldenRod	`palegoldenrod`	`#eee8aa`	CSS	JSON
110	PaleGreen	`palegreen`	`#98fb98`	CSS	JSON
111	PaleTurquoise	`paleturquoise`	`#afeeee`	CSS	JSON
112	PaleVioletRed	`palevioletred`	`#db7093`	CSS	JSON
113	PapayaWhip	`papayawhip`	`#ffefd5`	CSS	JSON
114	PeachPuff	`peachpuff`	`#ffdab9`	CSS	JSON
115	Peru	`peru`	`#cd853f`	CSS	JSON
116	Pink	`pink`	`#ffc0cb`	CSS	JSON
117	Plum	`plum`	`#dda0dd`	CSS	JSON
118	PowderBlue	`powderblue`	`#b0e0e6`	CSS	JSON
119	Purple	`purple`	`#800080`	CSS	JSON
120	RebeccaPurple	`rebeccapurple`	`#663399`	CSS	JSON
121	Red	`red`	`#ff0000`	CSS	JSON
122	RosyBrown	`rosybrown`	`#bc8f8f`	CSS	JSON
123	RoyalBlue	`royalblue`	`#4169e1`	CSS	JSON
124	SaddleBrown	`saddlebrown`	`#8b4513`	CSS	JSON
125	Salmon	`salmon`	`#fa8072`	CSS	JSON
126	SandyBrown	`sandybrown`	`#f4a460`	CSS	JSON
127	SeaGreen	`seagreen`	`#2e8b57`	CSS	JSON
128	SeaShell	`seashell`	`#fff5ee`	CSS	JSON
129	Sienna	`sienna`	`#a0522d`	CSS	JSON
130	Silver	`silver`	`#c0c0c0`	CSS	JSON
131	SkyBlue	`skyblue`	`#87ceeb`	CSS	JSON
132	SlateBlue	`slateblue`	`#6a5acd`	CSS	JSON
133	SlateGray	`slategray`	`#708090`	CSS	JSON
134	SlateGrey	`slategrey`	`#708090`	CSS	JSON
135	Snow	`snow`	`#fffafa`	CSS	JSON
136	SpringGreen	`springgreen`	`#00ff7f`	CSS	JSON
137	SteelBlue	`steelblue`	`#4682b4`	CSS	JSON
138	Tan	`tan`	`#d2b48c`	CSS	JSON
139	Teal	`teal`	`#008080`	CSS	JSON
140	Thistle	`thistle`	`#d8bfd8`	CSS	JSON
141	Tomato	`tomato`	`#ff6347`	CSS	JSON
142	Turquoise	`turquoise`	`#40e0d0`	CSS	JSON
143	Violet	`violet`	`#ee82ee`	CSS	JSON
144	Wheat	`wheat`	`#f5deb3`	CSS	JSON
145	White	`white`	`#ffffff`	CSS	JSON
146	WhiteSmoke	`whitesmoke`	`#f5f5f5`	CSS	JSON
147	Yellow	`yellow`	`#ffff00`	CSS	JSON
148	YellowGreen	`yellowgreen`	`#9acd32`	CSS	JSON