Gathering detailed insights and metrics for html-color-names
Gathering detailed insights and metrics for html-color-names
Installations
npm install html-color-namesDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.12.1
NPM Version
9.4.2
Score
76.3
Supply Chain
98.7
Quality
75.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
6
CSS
Python
HTML
TypeScript
JavaScript
Makefile
CSS (98.14%)
Python (1.22%)
HTML (0.27%)
TypeScript (0.18%)
JavaScript (0.12%)
Makefile (0.06%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
22 Stars
59 Commits
4 Watchers
1 Branches
1 Contributors
Updated on Apr 29, 2025
Bundle Size
134.22 kB
Minified
16.93 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.3.2
Package Id
html-color-names@0.3.2
Unpacked Size
256.77 kB
Size
26.06 kB
File Count
7
NPM Version
9.4.2
Node Version
18.12.1
Published on
Apr 29, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
No dependencies detected.
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
1const hcn = require("html-color-names"); 2const { htmlcolors } = hcn; 3const { firebrick } = htmlcolors; // destructure all the HTML colors you want to use 4 5export default { 6 content: [], 7 theme: { 8 extend: { 9 colors: { 10 firebrick, // HTML color 11 }, 12 }, 13 }, 14 plugins: [], 15}
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
1const tailwindcolors = require('tailwindcss/colors'); 2const { slate, blue, white } = tailwindcolors; // destructure all the tailwind colors you want to use 3 4const hcn = require("html-color-names"); 5const { htmlcolors } = hcn; 6 7export default { 8 content: [], 9 theme: { 10 colors: { 11 ...htmlcolors, // import all 148 color palettes 12 slate, blue, white, // import all Tailwind colors, will overwrite colors if names clash 13 }, 14 extend: {}, 15 }, 16 plugins: [], 17}
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
basecolorand gets 5tintsand 5shadesto generate the palette. tintsare colors between thebasecolorandWhite.shadesare colors between thebasecolorandBlack.basecoloris set to be500.tintsare named from50,100,200,300and400.shadesare named from600,700,800,900and950.- 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,BlueandGreendon't always look very good. - Too light colors like
LightCyanandLightGoldenRodYellowhave too similartintsbecause there isn't enough gap between the color andWhite. - Too dark colors like
DarkGreenandDarkBluehave too similarshadesbecause 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 |
No vulnerabilities found.
No security vulnerabilities found.