I am a very very creative app but it seems to have work hard and it doesn't even open. (written using predictive text)
Public
Edited
Apr 9, 2023
md`# Color Palettes`
html`
<style>
.container {
display: flex;
// gap: .5rem;
}
.color-block {
width: 50px;
height: 50px;
display: flex;
flex-direction: column;
color: white;
text-shadow: 1px 1px black;
}
</style>
`
function colorRow(colors) {
return html`<div class="container">${colors.map(
(color, i) =>
`<div class="color-block" style="background-color: ${color};"></div>`
)}</div>`;
}
colorRow(allColors)
paletteAngles = [
0, 30, 45, 60, 75, 120, 165, 180, 195, 210, 240, 270, 285, 300, 330
]
paletteColors = paletteAngles.map((angle) => `hsl(${angle}deg 100% 50%)`)
colorRow(paletteColors)
darkPalette = paletteAngles.map((angle) => `hsl(${angle}deg 100% 33.3%)`)
colorRow(darkPalette)
lightPalette = paletteAngles.map(angle => `hsl(${angle}deg 100% 80%)`)
colorRow(lightPalette)
desaturatedPalette = paletteAngles.map(angle => `hsl(${angle}deg 16.6% 66.7%)`)
colorRow(desaturatedPalette)
fullGreys = _.range(0, 101, 100/16).map(percent => `hsl(0deg 0% ${percent}%)`)
colorRow(fullGreys)
colorRow(radians)
radians = _.range(0, 20).map(rad => culori.formatHex({ mode: 'lch', l: 75, c: 100, h: rad * phi / 2 / (2 * Math.PI) * 360}))
allColors = _.range(0, 360, 15).map(angle => `hsl(${angle}deg 100% 50%)`)
phi = (1 + Math.sqrt(5)) / 2
culori = require('culori')
_ = require('lodash')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
