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