Duo
Tone
darkSPACE

uno-1
uno-2
uno-3
uno-4
uno-5
duo-1
duo-2
duo-3
background
  
<html>
<head>
<title>DuoTone</title>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>Hi</body>
</html>
  
body {
padding: 1em;
color: hsl(0, 0%, 100%);
background-color: coral;
}
/* Viewport based padding */
@media (max-width: 800px) {
body { padding: 4vh 8vw; }
}
  
// Get a desaturated base color
function getBaseColor() {
let baseColor = chroma.random()
while (chroma(baseColor).hsl()[1] > 1 / 3) {
baseColor = chroma(baseColor).desaturate(1 / 8).hex()
}
return baseColor
}