0.3.2 • Published 2 years ago

html-color-names v0.3.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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:

BackgroundTextBorderOutline
.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

#NameclassNameHexCSSJSON
1AliceBlue AliceBluealiceblue#f0f8ffCSSJSON
2AntiqueWhite AntiqueWhiteantiquewhite#faebd7CSSJSON
3Aqua Aquaaqua#00ffffCSSJSON
4Aquamarine Aquamarineaquamarine#7fffd4CSSJSON
5Azure Azureazure#f0ffffCSSJSON
6Beige Beigebeige#f5f5dcCSSJSON
7Bisque Bisquebisque#ffe4c4CSSJSON
8Black Blackblack#000000CSSJSON
9BlanchedAlmond BlanchedAlmondblanchedalmond#ffebcdCSSJSON
10Blue Blueblue#0000ffCSSJSON
11BlueViolet BlueVioletblueviolet#8a2be2CSSJSON
12Brown Brownbrown#a52a2aCSSJSON
13BurlyWood BurlyWoodburlywood#deb887CSSJSON
14CadetBlue CadetBluecadetblue#5f9ea0CSSJSON
15Chartreuse Chartreusechartreuse#7fff00CSSJSON
16Chocolate Chocolatechocolate#d2691eCSSJSON
17Coral Coralcoral#ff7f50CSSJSON
18CornflowerBlue CornflowerBluecornflowerblue#6495edCSSJSON
19Cornsilk Cornsilkcornsilk#fff8dcCSSJSON
20Crimson Crimsoncrimson#dc143cCSSJSON
21Cyan Cyancyan#00ffffCSSJSON
22DarkBlue DarkBluedarkblue#00008bCSSJSON
23DarkCyan DarkCyandarkcyan#008b8bCSSJSON
24DarkGoldenRod DarkGoldenRoddarkgoldenrod#b8860bCSSJSON
25DarkGray DarkGraydarkgray#a9a9a9CSSJSON
26DarkGrey DarkGreydarkgrey#a9a9a9CSSJSON
27DarkGreen DarkGreendarkgreen#006400CSSJSON
28DarkKhaki DarkKhakidarkkhaki#bdb76bCSSJSON
29DarkMagenta DarkMagentadarkmagenta#8b008bCSSJSON
30DarkOliveGreen DarkOliveGreendarkolivegreen#556b2fCSSJSON
31DarkOrange DarkOrangedarkorange#ff8c00CSSJSON
32DarkOrchid DarkOrchiddarkorchid#9932ccCSSJSON
33DarkRed DarkReddarkred#8b0000CSSJSON
34DarkSalmon DarkSalmondarksalmon#e9967aCSSJSON
35DarkSeaGreen DarkSeaGreendarkseagreen#8fbc8fCSSJSON
36DarkSlateBlue DarkSlateBluedarkslateblue#483d8bCSSJSON
37DarkSlateGray DarkSlateGraydarkslategray#2f4f4fCSSJSON
38DarkSlateGrey DarkSlateGreydarkslategrey#2f4f4fCSSJSON
39DarkTurquoise DarkTurquoisedarkturquoise#00ced1CSSJSON
40DarkViolet DarkVioletdarkviolet#9400d3CSSJSON
41DeepPink DeepPinkdeeppink#ff1493CSSJSON
42DeepSkyBlue DeepSkyBluedeepskyblue#00bfffCSSJSON
43DimGray DimGraydimgray#696969CSSJSON
44DimGrey DimGreydimgrey#696969CSSJSON
45DodgerBlue DodgerBluedodgerblue#1e90ffCSSJSON
46FireBrick FireBrickfirebrick#b22222CSSJSON
47FloralWhite FloralWhitefloralwhite#fffaf0CSSJSON
48ForestGreen ForestGreenforestgreen#228b22CSSJSON
49Fuchsia Fuchsiafuchsia#ff00ffCSSJSON
50Gainsboro Gainsborogainsboro#dcdcdcCSSJSON
51GhostWhite GhostWhiteghostwhite#f8f8ffCSSJSON
52Gold Goldgold#ffd700CSSJSON
53GoldenRod GoldenRodgoldenrod#daa520CSSJSON
54Gray Graygray#808080CSSJSON
55Grey Greygrey#808080CSSJSON
56Green Greengreen#008000CSSJSON
57GreenYellow GreenYellowgreenyellow#adff2fCSSJSON
58HoneyDew HoneyDewhoneydew#f0fff0CSSJSON
59HotPink HotPinkhotpink#ff69b4CSSJSON
60IndianRed IndianRedindianred#cd5c5cCSSJSON
61Indigo Indigoindigo#4b0082CSSJSON
62Ivory Ivoryivory#fffff0CSSJSON
63Khaki Khakikhaki#f0e68cCSSJSON
64Lavender Lavenderlavender#e6e6faCSSJSON
65LavenderBlush LavenderBlushlavenderblush#fff0f5CSSJSON
66LawnGreen LawnGreenlawngreen#7cfc00CSSJSON
67LemonChiffon LemonChiffonlemonchiffon#fffacdCSSJSON
68LightBlue LightBluelightblue#add8e6CSSJSON
69LightCoral LightCorallightcoral#f08080CSSJSON
70LightCyan LightCyanlightcyan#e0ffffCSSJSON
71LightGoldenRodYellow LightGoldenRodYellowlightgoldenrodyellow#fafad2CSSJSON
72LightGray LightGraylightgray#d3d3d3CSSJSON
73LightGrey LightGreylightgrey#d3d3d3CSSJSON
74LightGreen LightGreenlightgreen#90ee90CSSJSON
75LightPink LightPinklightpink#ffb6c1CSSJSON
76LightSalmon LightSalmonlightsalmon#ffa07aCSSJSON
77LightSeaGreen LightSeaGreenlightseagreen#20b2aaCSSJSON
78LightSkyBlue LightSkyBluelightskyblue#87cefaCSSJSON
79LightSlateGray LightSlateGraylightslategray#778899CSSJSON
80LightSlateGrey LightSlateGreylightslategrey#778899CSSJSON
81LightSteelBlue LightSteelBluelightsteelblue#b0c4deCSSJSON
82LightYellow LightYellowlightyellow#ffffe0CSSJSON
83Lime Limelime#00ff00CSSJSON
84LimeGreen LimeGreenlimegreen#32cd32CSSJSON
85Linen Linenlinen#faf0e6CSSJSON
86Magenta Magentamagenta#ff00ffCSSJSON
87Maroon Maroonmaroon#800000CSSJSON
88MediumAquaMarine MediumAquaMarinemediumaquamarine#66cdaaCSSJSON
89MediumBlue MediumBluemediumblue#0000cdCSSJSON
90MediumOrchid MediumOrchidmediumorchid#ba55d3CSSJSON
91MediumPurple MediumPurplemediumpurple#9370dbCSSJSON
92MediumSeaGreen MediumSeaGreenmediumseagreen#3cb371CSSJSON
93MediumSlateBlue MediumSlateBluemediumslateblue#7b68eeCSSJSON
94MediumSpringGreen MediumSpringGreenmediumspringgreen#00fa9aCSSJSON
95MediumTurquoise MediumTurquoisemediumturquoise#48d1ccCSSJSON
96MediumVioletRed MediumVioletRedmediumvioletred#c71585CSSJSON
97MidnightBlue MidnightBluemidnightblue#191970CSSJSON
98MintCream MintCreammintcream#f5fffaCSSJSON
99MistyRose MistyRosemistyrose#ffe4e1CSSJSON
100Moccasin Moccasinmoccasin#ffe4b5CSSJSON
101NavajoWhite NavajoWhitenavajowhite#ffdeadCSSJSON
102Navy Navynavy#000080CSSJSON
103OldLace OldLaceoldlace#fdf5e6CSSJSON
104Olive Oliveolive#808000CSSJSON
105OliveDrab OliveDrabolivedrab#6b8e23CSSJSON
106Orange Orangeorange#ffa500CSSJSON
107OrangeRed OrangeRedorangered#ff4500CSSJSON
108Orchid Orchidorchid#da70d6CSSJSON
109PaleGoldenRod PaleGoldenRodpalegoldenrod#eee8aaCSSJSON
110PaleGreen PaleGreenpalegreen#98fb98CSSJSON
111PaleTurquoise PaleTurquoisepaleturquoise#afeeeeCSSJSON
112PaleVioletRed PaleVioletRedpalevioletred#db7093CSSJSON
113PapayaWhip PapayaWhippapayawhip#ffefd5CSSJSON
114PeachPuff PeachPuffpeachpuff#ffdab9CSSJSON
115Peru Peruperu#cd853fCSSJSON
116Pink Pinkpink#ffc0cbCSSJSON
117Plum Plumplum#dda0ddCSSJSON
118PowderBlue PowderBluepowderblue#b0e0e6CSSJSON
119Purple Purplepurple#800080CSSJSON
120RebeccaPurple RebeccaPurplerebeccapurple#663399CSSJSON
121Red Redred#ff0000CSSJSON
122RosyBrown RosyBrownrosybrown#bc8f8fCSSJSON
123RoyalBlue RoyalBlueroyalblue#4169e1CSSJSON
124SaddleBrown SaddleBrownsaddlebrown#8b4513CSSJSON
125Salmon Salmonsalmon#fa8072CSSJSON
126SandyBrown SandyBrownsandybrown#f4a460CSSJSON
127SeaGreen SeaGreenseagreen#2e8b57CSSJSON
128SeaShell SeaShellseashell#fff5eeCSSJSON
129Sienna Siennasienna#a0522dCSSJSON
130Silver Silversilver#c0c0c0CSSJSON
131SkyBlue SkyBlueskyblue#87ceebCSSJSON
132SlateBlue SlateBlueslateblue#6a5acdCSSJSON
133SlateGray SlateGrayslategray#708090CSSJSON
134SlateGrey SlateGreyslategrey#708090CSSJSON
135Snow Snowsnow#fffafaCSSJSON
136SpringGreen SpringGreenspringgreen#00ff7fCSSJSON
137SteelBlue SteelBluesteelblue#4682b4CSSJSON
138Tan Tantan#d2b48cCSSJSON
139Teal Tealteal#008080CSSJSON
140Thistle Thistlethistle#d8bfd8CSSJSON
141Tomato Tomatotomato#ff6347CSSJSON
142Turquoise Turquoiseturquoise#40e0d0CSSJSON
143Violet Violetviolet#ee82eeCSSJSON
144Wheat Wheatwheat#f5deb3CSSJSON
145White Whitewhite#ffffffCSSJSON
146WhiteSmoke WhiteSmokewhitesmoke#f5f5f5CSSJSON
147Yellow Yellowyellow#ffff00CSSJSON
148YellowGreen YellowGreenyellowgreen#9acd32CSSJSON
htmlcssjsoncolorcolors
@everything-registry/sub-chunk-1867
0.3.2

2 years ago

0.3.1

2 years ago

0.3.0

2 years ago

0.2.8

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago