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 |