This demo shows off color palettes using the widget from coolors.co, a color palette generation source. Using this demo helps you to display palettes in a similar way as coolors.co on your website. This is useful to display different palettes you have used before or may be thinking of using in the future. The loaded script allows you to copy the colors, and includes a button to open the palette on coolors.co website. Also, contrast is taken into consideration when hovering over the palettes. Darker backgounds show white text for the hexadecimal code, while light backgrounds show black text.
The HTML code for this demo is short; and is mostly for loading a script and assigning colors to be shown in the palette, along with the palette's name. First, the script needs to load the widget from coolors.co. Then a new object needs to be created with the colors and palette name to show the widget. Some of the other things the script allows is hovering over the colors, opening the palette on coolors.co, and allowing you to copy individual colors from a palette.
<script src="https://coolors.co/palette-widget/widget.js"></script>
<script data-id="03801035329304008">
new CoolorsPaletteWidget("03801035329304008",
["104F55", "32746D", "9EC5AB", "01200F", "011502"], "future use?");
new CoolorsPaletteWidget("03801035329304008",
["668586", "82AEB1", "93C6D6", "A7ACD9", "9E8FB2"], "github project");
new CoolorsPaletteWidget("03801035329304008",
["36413E", "5D5E60", "8D8D92", "BEB2C8", "D7D6D6"], "web emerging tech");
new CoolorsPaletteWidget("03801035329304008",
["000080", "6060A0", "A8A8B8", "C0C0C0", "808080"], "accuratemachine final");
</script>
/*Coooolers Demo BEGIN*/
body {
display: flex !important;
justify-items: center;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
justify-content: center;
align-items: center;
}
.coolors-palette-widget {
all: initial;
background: #fff;
border-radius: 14px !important;
display: block !important;
overflow: hidden;
height: 175px !important;
margin: 18pt !important;
width: 26% !important;
background-color: #2c313e !important;
border-bottom: 2px solid #888;
box-shadow: -1px 1px 5px black, 0px 0px 5px black inset !important;
}
.coolors-palette-widget .coolors-palette-widget_info_link {
font-weight: 300 !important;
font-family: Roboto !important;
}
.coolors-palette-widget_info {
background-color: #2c313e;
border-bottom: 2px solid #888;
box-shadow: -1px 1px 5px black, 0px 0px 5px black inset;
text-shadow: 0px -1px 1px #888;
color: #2c313e;
}
.coolors-palette-widget .coolors-palette-widget_colors {
height: 140px !important;
}
.coolors-palette-widget .coolors-palette-widget_info_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 36px;
color: white !important;
text-align: center;
text-shadow: 1px 1px 1px #352f31, -1px 1px 1px #161415, 1px -1px 1px #2f292b,
-1px -1px 1px #424242, 0 0 2px #302a2c, 0 0 4px #160d10 !important;
text-transform: uppercase !important;
font-size: 13px !important;
letter-spacing: 0.75px !important;
font-family: Roboto !important;
font-weight: 400 !important;
}
/*Coooolers Demo END*/