updated colors
This commit is contained in:
parent
637242021f
commit
ac2e0b75b2
97
colors.json
97
colors.json
@ -1,42 +1,39 @@
|
||||
[
|
||||
{
|
||||
"family": "Reds",
|
||||
"family": "Reds and Oranges",
|
||||
"colors": [
|
||||
{ "name": "Red", "hex": "#ef2a2f" },
|
||||
{ "name": "Maroon", "hex": "#80011f" },
|
||||
{ "name": "Cherry", "hex": "#DE3163" },
|
||||
{ "name": "Tomato", "hex": "#FF6347" },
|
||||
{ "name": "Maroon", "hex": "#800000" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"family": "Oranges",
|
||||
"colors": [
|
||||
{ "name": "Aloha", "hex": "#e05251" },
|
||||
{ "name": "Maroon", "hex": "#800000" },
|
||||
{ "name": "Orange", "hex": "#ff7600" },
|
||||
{ "name": "Burnt Orange", "hex": "#9d4223" },
|
||||
{ "name": "", "hex": "#FF7518" },
|
||||
{ "name": "Amber", "hex": "#FFBF00" },
|
||||
{ "name": "Burnt Orange", "hex": "#CC5500" }
|
||||
{ "name": "Terra Cotta", "hex": "#934c34" }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"family": "Yellows",
|
||||
"colors": [
|
||||
{ "name": "Yellow", "hex": "#f2e44b" },
|
||||
{ "name": "Gold", "hex": "#C39953" },
|
||||
{ "name": "Mustard", "hex": "#FFDB58" },
|
||||
{ "name": "Dandelion", "hex": "#FED85D" },
|
||||
{ "name": "Goldenrod", "hex": "#f7b615" },
|
||||
{ "name": "Mustard", "hex": "#e1a02e" },
|
||||
{ "name": "Sunflower", "hex": "#FFC512" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"family": "Greens",
|
||||
"colors": [
|
||||
{ "name": "Lime", "hex": "#95d051" },
|
||||
{ "name": "Grass Green", "hex": "#25a038" },
|
||||
{ "name": "Lime", "hex": "#8fc73e" },
|
||||
{ "name": "Grass Green", "hex": "#218b21" },
|
||||
{ "name": "Forest Green", "hex": "#228B22" },
|
||||
{ "name": "Mint", "hex": "#98FF98" },
|
||||
{ "name": "Sea Green", "hex": "#2E8B57" }
|
||||
{ "name": "Willow", "hex": "#4b715a" },
|
||||
{ "name": "Empowermint", "hex": "#759786" },
|
||||
{ "name": "Eucalyptus", "hex": "#a3bba1" },
|
||||
{ "name": "Forest Green", "hex": "#228B22" },
|
||||
{ "name": "Mint Green", "hex": "#acdba7" },
|
||||
{ "name": "Tropical Teal", "hex": "#0d868f" }
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -44,19 +41,19 @@
|
||||
"colors": [
|
||||
{ "name": "Light Blue", "hex": "#a5c4dd" },
|
||||
{ "name": "Medium Blue", "hex": "#1b70bc" },
|
||||
{ "name": "Royal Blue", "hex": "#00FFFF" },
|
||||
{ "name": "Navy", "hex": "#4169E1" },
|
||||
{ "name": "Sea Glass", "hex": "#008080" },
|
||||
{ "name": "Caribbean Blue", "hex": "#56cbd6"}
|
||||
{ "name": "Royal Blue", "hex": "#005ba4" },
|
||||
{ "name": "Navy", "hex": "#262266" },
|
||||
{ "name": "Sea Glass", "hex": "#73b5c1" },
|
||||
{ "name": "Blue Slate", "hex": "#327295" },
|
||||
{ "name": "Caribbean Blue", "hex": "#0bbbb6"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"family": "Purples",
|
||||
"colors": [
|
||||
{ "name": "Lavender", "hex": "#bd002b" },
|
||||
{ "name": "Lilac", "hex": "#dba8d0" },
|
||||
{ "name": "Violet", "hex": "#8F00FF" },
|
||||
{ "name": "Magenta", "hex": "#FF00FF" },
|
||||
{ "name": "Lavender", "hex": "#866c92" },
|
||||
{ "name": "Lilac", "hex": "#c69edb" },
|
||||
{ "name": "Violet", "hex": "#812a8c" },
|
||||
{ "name": "Plum", "hex": "#DDA0DD" }
|
||||
]
|
||||
},
|
||||
@ -65,9 +62,11 @@
|
||||
"colors": [
|
||||
{ "name": "Light Pink", "hex": "#FFC0CB" },
|
||||
{ "name": "Rose", "hex": "#e47d97" },
|
||||
{ "name": "Hot Pink", "hex": "#FF69B4" },
|
||||
{ "name": "Rosewood", "hex": "#ad7171" },
|
||||
{ "name": "Fuchia", "hex": "#eb4799" },
|
||||
{ "name": "Peach", "hex": "#FFE5B4" },
|
||||
{ "name": "Carnation", "hex": "#FFA6C9" }
|
||||
{ "name": "Melon", "hex": "#fac4bc" },
|
||||
{ "name": "Rose Gold", "hex": "#c67a6d", "metallic": true, "chromeType": "rosegold" }
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -81,43 +80,35 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"family": "Neutrals",
|
||||
"family": "Neutrals and Mutes",
|
||||
"colors": [
|
||||
{ "name": "White", "hex": "#FFFFFF" },
|
||||
{ "name": "Retro White", "hex": "#e8e3d9" },
|
||||
{ "name": "Fog", "hex": "#6b9098" },
|
||||
{ "name": "Black", "hex": "#000000" },
|
||||
{ "name": "Gray", "hex": "#808080" },
|
||||
{ "name": "Charcoal", "hex": "#36454F" },
|
||||
{ "name": "Gray", "hex": "#ced3d4" },
|
||||
{ "name": "Smokes", "hex": "#36454F" },
|
||||
{ "name": "Silver", "hex": "#A6A6A6" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"family": "Pastels",
|
||||
"colors": [
|
||||
{ "name": "Pastel Pink", "hex": "#FFD1DC" },
|
||||
{ "name": "Baby Blue", "hex": "#89CFF0" },
|
||||
{ "name": "Mint Cream", "hex": "#F5FFFA" },
|
||||
{ "name": "Lavender Mist", "hex": "#E6E6FA" },
|
||||
{ "name": "Pale Yellow", "hex": "#FFFFE0" }
|
||||
{ "name": "Pastel Pink", "hex": "#fcccda" },
|
||||
{ "name": "Baby Blue", "hex": "#89ccff" },
|
||||
{ "name": "Green Tea", "hex": "#b2ddc3" },
|
||||
{ "name": "Lilac", "hex": "#c69edb" },
|
||||
{ "name": "Pastel Yellow", "hex": "#fcfd96" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"family": "Dark Tones",
|
||||
"family": "Neon (blacklight reactive)",
|
||||
"colors": [
|
||||
{ "name": "Midnight Blue", "hex": "#191970" },
|
||||
{ "name": "Dark Olive", "hex": "#556B2F" },
|
||||
{ "name": "Deep Purple", "hex": "#301934" },
|
||||
{ "name": "Dark Red", "hex": "#8B0000" },
|
||||
{ "name": "Charcoal Gray", "hex": "#36454F" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"family": "Brights",
|
||||
"colors": [
|
||||
{ "name": "Neon Green", "hex": "#39FF14" },
|
||||
{ "name": "Electric Blue", "hex": "#7DF9FF" },
|
||||
{ "name": "Fluorescent Orange", "hex": "#FFBF00" },
|
||||
{ "name": "Hot Magenta", "hex": "#FF1DCE" },
|
||||
{ "name": "Lime Yellow", "hex": "#DFFF00" }
|
||||
{ "name": "Neon Green", "hex": "#a4ce46" },
|
||||
{ "name": "Neon Blue", "hex": "#4ca3da" },
|
||||
{ "name": "Neon Orange", "hex": "#f68d5c" },
|
||||
{ "name": "Neon Yellow", "hex": "#e6e751" },
|
||||
{ "name": "Neon Magenta", "hex": "#eb6faa" }
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -127,7 +118,7 @@
|
||||
{ "name": "Chrome Silver", "hex": "#a8a9a4", "metallic": true, "chromeType": "silver" },
|
||||
{ "name": "Chrome Rose Gold", "hex": "#FFBF00", "metallic": true, "chromeType": "rosegold" },
|
||||
{ "name": "Chrome Champagne", "hex": "#FF1DCE", "metallic": true, "chromeType": "champagne" },
|
||||
{ "name": "Chrome Blue", "hex": "#DFFF00", "metallic": true, "chromeType": "blue" },
|
||||
{ "name": "Chrome Blue", "hex": "#2d576f", "metallic": true, "chromeType": "blue" },
|
||||
{ "name": "Chrome Purple", "hex": "#DFFF00", "metallic": true, "chromeType": "purple" },
|
||||
{ "name": "Chrome Green", "hex": "#457066", "metallic": true, "chromeType": "green" }
|
||||
]
|
||||
|
||||
156
list.txt
156
list.txt
@ -1,92 +1,86 @@
|
||||
Browns & Neutrals:
|
||||
I. Whites & Neutrals
|
||||
|
||||
Retro White
|
||||
White
|
||||
Cameo
|
||||
Pearl White
|
||||
Sand
|
||||
Stone
|
||||
Coffee
|
||||
Willow
|
||||
Latte
|
||||
Grey Pearl White
|
||||
Smoke
|
||||
Grey
|
||||
Chrome Space Grey
|
||||
II. Pinks & Related Colors
|
||||
|
||||
Orange & Red Tones:
|
||||
Burnt Orange
|
||||
Terra Cotta
|
||||
Blush Pearl Red
|
||||
Coral
|
||||
Yellow & Gold Tones:
|
||||
Pastel Yellow
|
||||
Goldenrod
|
||||
Chrome Champagne
|
||||
Classic Gold
|
||||
Chrome Gold
|
||||
2. Cool & Calming Tones
|
||||
|
||||
Blues:
|
||||
Royal Blue
|
||||
Medium Blue
|
||||
Sky Blue
|
||||
Dark Blue
|
||||
Navy
|
||||
White Caribbean Blue
|
||||
Pearl Midnight Blue
|
||||
Pearl Sapphire
|
||||
Nautical Chrome Silver
|
||||
Greens:
|
||||
Pastel Green
|
||||
Grass Green
|
||||
Lime Green
|
||||
Seafoam
|
||||
Pearl Green
|
||||
Forest Green
|
||||
Purples & Violets:
|
||||
Orchid
|
||||
Lilac
|
||||
Pearl Periwinkle
|
||||
Pearl Violet
|
||||
Orange Violet
|
||||
Yellow Lavender
|
||||
3. Pastels & Soft Tones
|
||||
|
||||
Pink & Rose Tones:
|
||||
Cameo
|
||||
Light Pink
|
||||
Blush
|
||||
Rose Pink
|
||||
Fuchsia
|
||||
Rosewood
|
||||
Cayon Rose
|
||||
Rose Pink
|
||||
Coral
|
||||
Pearl Pink
|
||||
Sky Blue Pearl Pink
|
||||
Soft Greens & Blues:
|
||||
Sea Glass
|
||||
Empowermint
|
||||
Aloha (arguably warm/cool depending on specific shade)
|
||||
Light & Airy:
|
||||
Light Pink
|
||||
4. Vibrant & Bold Tones
|
||||
|
||||
Pinks & Purples:
|
||||
Fuchsia
|
||||
Rose Gold
|
||||
Chrome Rose Gold
|
||||
Pearl Fuchsia
|
||||
Wildberry
|
||||
Teals & Tropicals:
|
||||
Black Tropical Teal
|
||||
Unique:
|
||||
Neon Agate
|
||||
5. Metallic & Special Finishes
|
||||
III. Reds & Oranges
|
||||
|
||||
Chrome:
|
||||
Chrome Blue
|
||||
Chrome Purple
|
||||
Chrome Copper
|
||||
Chrome Truffle
|
||||
Chrome Pink
|
||||
Chrome Green
|
||||
Chrome Space Grey
|
||||
Nautical Chrome Silver
|
||||
Animal Print Chrome Pink
|
||||
Pearl:
|
||||
Pearl Blue
|
||||
Aloha*
|
||||
Red*
|
||||
Maroon*
|
||||
Burnt Orange
|
||||
Terra Cotta
|
||||
Chrome Red
|
||||
Pearl Red
|
||||
Orange
|
||||
IV. Yellows & Greens
|
||||
|
||||
Goldenrod
|
||||
Yellow
|
||||
Pastel Yellow
|
||||
Lime Green
|
||||
Grass Green
|
||||
Seafoam
|
||||
Pastel Green
|
||||
Pearl Green
|
||||
Forest Green
|
||||
Orchid
|
||||
V. Blues & Purples
|
||||
|
||||
Sky Blue
|
||||
Medium Blue
|
||||
Royal Blue
|
||||
Blue Slate
|
||||
Caribbean Blue
|
||||
Tropical Teal
|
||||
Dark Blue
|
||||
Navy
|
||||
Violet
|
||||
Lavender
|
||||
Wildberry
|
||||
Pearl Periwinkle
|
||||
Pearl Sapphire
|
||||
Pearl Violet
|
||||
Pearl Lilac
|
||||
Pearl White
|
||||
Classic:
|
||||
Classic Silver
|
||||
Smoke:
|
||||
Chrome Red Smoke
|
||||
Filigree
|
||||
Clear Filigree
|
||||
Pearl Blue
|
||||
Chrome Purple
|
||||
VI. Browns & Metallics
|
||||
|
||||
Coffee
|
||||
Chrome Champange
|
||||
Chrome Copper
|
||||
Chrome Gold
|
||||
Classic Gold
|
||||
Chrome Silver
|
||||
Pearl Fuchsia
|
||||
Chrome Truffle
|
||||
VII. Specialty/Unique
|
||||
|
||||
Fog
|
||||
Empowermint
|
||||
Ecualyptus
|
||||
Pastel Dusk
|
||||
Pearl Midnight Blue
|
||||
Chrome Green
|
||||
Chrome Pink
|
||||
10
style.css
10
style.css
@ -29,13 +29,15 @@ body {
|
||||
|
||||
#selected-palette {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
top: 10px;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
padding: 10px;
|
||||
border-bottom: 2px solid #ccc;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 10px;
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -367,7 +369,7 @@ background-image: url("https://www.transparenttextures.com/patterns/asfalt-light
|
||||
}
|
||||
|
||||
.chrome-blue {
|
||||
background: linear-gradient(145deg, #d0f0ff, #a1d8ff, #7ab9ff, #d0f0ff);
|
||||
background: linear-gradient(145deg, #d0f0ff, #4d7995, #2d576f, #d0f0ff);
|
||||
}
|
||||
|
||||
.chrome-purple {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user