Discover Color

Developer
Andreas Larsen
Size
5,363 Kb
Views
58,696
  1. Discover Color Previews
  2. Discover Color HTML Codes
  3. Discover Color CSS Codes
  4. Discover Color JS Codes

How do I make an discover color?

What is a discover color? How do you make a discover color? This script and codes were developed by Andreas Larsen on 25 July 2022, Monday.

Discover Color Previews
IQ Test

Discover Color - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Discover Color</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Discover Color - Script Codes CSS Codes

:root { --image-grayscale: 0.6; --image-contrast: 1.2; --image-brightness: 0.9;
}
* { box-sizing: border-box; margin: 0; padding: 0;
}
body { padding: 2rem; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 700;
}
.container { display: flex; flex-wrap: wrap; justify-content: space-around;
}
.card { height: calc(100vw/10 - 1rem); width: calc(100vw/10 - 1rem); margin: 1.5rem .5rem; box-sizing: border-box; position: relative; overflow: hidden;
}
.card.mono { border-radius: 20px;
}
.card-gradient, .card-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.card-gradient { opacity: 0.75;
}
.card-text { padding: 1rem; position: absolute; bottom: 0; font-size: 1vw; line-height: 1.3;
}
.card-image { object-fit: cover; max-width: 100%; filter: grayscale(var(--image-grayscale)) contrast(var(--image-contrast)) brightness(var(--image-brightness));
}
.color-demo { min-width: calc(8vw - 1rem/9); padding: 1rem; margin: .5rem; border-radius: 5px;
}

Discover Color - Script Codes JS Codes

"use strict";
var hueSteps = 80; // 132 for romantic-active,
var hueShift = 1; // how much a monochromatic gradient should shift in hue relative to the lightness steps
var monoChrome = '';
var colorMap = { romantic: { "name": "romantic", "hue": 339, "sat": 68, "lightness": 43 }, fancy: { "name": "fancy", "hue": 312, "sat": 67, "lightness": 30 }, active: { "name": "active", "hue": 207, "sat": 100, "lightness": 36 }, peaceful: { "name": "peaceful", "hue": 197, "sat": 61, "lightness": 49 }, cultural: { "name": "cultural", "hue": 183, "sat": 100, "lightness": 22 }, family_friendly: { "name": "family_friendly", "hue": 163, "sat": 100, "lightness": 39 }, lively: { "name": "lively", "hue": 83, "sat": 58, "lightness": 69 }, essential: { "name": "essential", "hue": 40, "sat": 100, "lightness": 70 }, alternative: { "name": "alternative", "hue": 20, "sat": 93, "lightness": 64 }, unique: { "name": "unique", "hue": 347, "sat": 93, "lightness": 59 }
};
var keys = Object.keys(colorMap);
var articleData = [];
for (var _iterator = keys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var outerKey = _ref; for (var _iterator4 = keys, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) { var _ref4; if (_isArray4) { if (_i4 >= _iterator4.length) break; _ref4 = _iterator4[_i4++]; } else { _i4 = _iterator4.next(); if (_i4.done) break; _ref4 = _i4.value; } var innerKey = _ref4; if (innerKey !== outerKey) { articleData.push({ adjectives: [outerKey, innerKey] }); } }
}
function getColors(primary, remaining) { var valid = remaining.filter(function (adj) { return !isBlacklisted(primary, adj); }).filter(function (adj) { return isJuxtaposed(primary, adj, hueSteps, 360); }); return valid.length ? [primary, valid[0]] : [primary];
}
function isBlacklisted() { return false;
}
function generateHsl(color) { var modifier = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; return "hsl(" + (color.hue + modifier * hueShift) + ", " + color.sat + "%, " + (color.lightness + modifier) + "%)";
}
function generateGradient(colors) { monoChrome = ''; if (colors.length === 1) { monoChrome = 'mono:'; return "linear-gradient(45deg, " + generateHsl(colors[0], -10) + ", " + generateHsl(colors[0], 10) + ")"; } var colorTween = { "hue": tweenHue(colors[0].hue, colors[1].hue), "sat": (colors[0].sat + colors[1].sat) / 2, "lightness": (colors[0].lightness + colors[1].lightness) / 2 }; return "linear-gradient(45deg, " + generateHsl(colors[0]) + " 0, " + generateHsl(colors[1]) + " 100%)";
}
function tweenHue(hueOne, hueTwo) { var diff = Math.abs(hueOne - hueTwo);
}
function isJuxtaposed(primary, adj, jump, max) { var diff = Math.abs(primary.hue - adj.hue); return diff >= max - jump || diff <= jump;
}
function outputHtml(data) { var container = document.createElement("div"); container.className = "container"; for (var _iterator2 = data, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { var _ref2; if (_isArray2) { if (_i2 >= _iterator2.length) break; _ref2 = _iterator2[_i2++]; } else { _i2 = _iterator2.next(); if (_i2.done) break; _ref2 = _i2.value; } var article = _ref2; var primary = colorMap[article.adjectives[0]]; var remaining = article.adjectives.slice(1).filter(function (adj) { return !!adj; }).map(function (adj) { return colorMap[adj]; }); var colors = getColors(primary, remaining); var gradient = generateGradient(colors); var el = document.createElement("div"); var elGrad = document.createElement("div"); var elText = document.createElement("div"); var elImg = document.createElement("img"); el.className = "card"; var cacheBuster = Math.floor(Math.random() * 10000); elImg.setAttribute("src", "https://unsplash.it/600/600/?random&cb=" + cacheBuster); elImg.className = "card-image"; el.appendChild(elImg); elGrad.setAttribute("style", "background-image: " + gradient + ";"); elGrad.className = "card-gradient"; el.appendChild(elGrad); if (monoChrome) { el.classList.add("mono"); } elText.innerHTML = article.adjectives.join("<br>").replace("_", " "); elText.className = "card-text"; el.appendChild(elText); container.appendChild(el); } document.body.appendChild(container);
}
function showColors(data) { var container = document.createElement("div"); container.className = "container"; for (var _iterator3 = data, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) { var _ref3; if (_isArray3) { if (_i3 >= _iterator3.length) break; _ref3 = _iterator3[_i3++]; } else { _i3 = _iterator3.next(); if (_i3.done) break; _ref3 = _i3.value; } var color = _ref3; var colorName = color; var colorValue = generateHsl(colorMap[color]); var elColor = document.createElement("div"); elColor.className = "color-demo"; elColor.setAttribute("style", "background-color: " + colorValue + ";"); elColor.appendChild(document.createTextNode(colorName)); container.appendChild(elColor); } document.body.appendChild(container);
}
showColors(keys);
// kickoff
outputHtml(articleData);
Discover Color - Script Codes
Discover Color - Script Codes
Home Page Home
Developer Andreas Larsen
Username larsenwork
Uploaded July 25, 2022
Rating 3
Size 5,363 Kb
Views 58,696
Do you need developer help for Discover Color?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andreas Larsen (larsenwork) Script Codes
Name
Layout code-off
Layout code-off completed
Thanks for downloading
EaseInOutSine Gradient Demo
Pure CSS Responsive Grid Overlay
Optimised SVG Flags
2 shadows are better than 1
Snap.svg letter morph animation
Easing gradients - take 2
CphRain code off
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!