Skip to content

iaseth/html-color-names

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

59 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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