Gathering detailed insights and metrics for html-color-names
Gathering detailed insights and metrics for html-color-names
Gathering detailed insights and metrics for html-color-names
Gathering detailed insights and metrics for html-color-names
html-colors
Get a list of all the HTML and CSS color names and their hex values.
color_name_converter
"converts html color names to a format of your choice"
@chalkpot/colors
Colors is JSON with the names of colors, their values and localization. Colors are based on HTML color names and CSS keywords.
@won-ui/styles
* 베이스 색상 참고 : https://htmlcolors.com/color-names * palette tool : https://toolness.github.io/accessible-color-matrix * shade tool : https://colorkit.io/shades-tints * 위 도구들 이용해서 만들었으며, 색상에서 RGB 커스텀 조정하여 구성함
npm install html-color-names
Typescript
Module System
Node Version
NPM Version
76.3
Supply Chain
98.7
Quality
75.9
Maintenance
100
Vulnerability
100
License
CSS (98.14%)
Python (1.22%)
HTML (0.27%)
TypeScript (0.18%)
JavaScript (0.12%)
Makefile (0.06%)
Total Downloads
2,613
Last Day
3
Last Week
4
Last Month
15
Last Year
693
MIT License
22 Stars
59 Commits
4 Watchers
1 Branches
1 Contributors
Updated on Apr 29, 2025
Minified
Minified + Gzipped
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
Cumulative downloads
Total Downloads
Last Day
0%
3
Compared to previous day
Last Week
0%
4
Compared to previous week
Last Month
-55.9%
15
Compared to previous month
Last Year
40.3%
693
Compared to previous year
No dependencies detected.
HTML has 148 named colors. What if you could generate a color palette using each one of them?
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 |
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.
I am using python
to automatically generate palettes for each color. The basic logic for generating a palette is as follows:
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
.number
, the darker the color.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:
Red
, Blue
and Green
don't always look very good.LightCyan
and LightGoldenRodYellow
have too similar tints
because there isn't enough gap between the color and White
.DarkGreen
and DarkBlue
have too similar shades
because there isn't enough gap between the color and Black
.# | 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.