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 5tints
and 5shades
to generate the palette. tints
are colors between thebasecolor
andWhite
.shades
are colors between thebasecolor
andBlack
.basecolor
is set to be500
.tints
are named from50
,100
,200
,300
and400
.shades
are named from600
,700
,800
,900
and950
.- 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
andGreen
don't always look very good. - Too light colors like
LightCyan
andLightGoldenRodYellow
have too similartints
because there isn't enough gap between the color andWhite
. - Too dark colors like
DarkGreen
andDarkBlue
have too similarshades
because there isn't enough gap between the color andBlack
.
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 |