Hello Color JS! / Andrew Wooldridge

Andrew Wooldridge

📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.

Workspace

Published

Edited

Jun 19, 2022

1 star

Working Libraries

Hello, Smart Shape!Hello, messagepipe!Hello, Atomico!Hello, Markdown-Tag !Hello, js-sdl!Hello Trivia API!Hello auto-animate!Hello, papa parse!Hello, lazy.js!Hello, mout!Hello, sugar js!Hello, lil-gui!Hello, owoify-js!Hello, Maverick JS -> Observables!Hello, Canvas Confetti!Hello, OWL!Hello, Bunny Fonts!

Hello Color JS!

Hello, Kute.js !Hello Color Legend Element!Hello, is-online!Hello, pretty-ms!Hello, Liveblocks!Convex Chat Hello, filesize.js!Hello, SVG.js Hello, Counter-element!Hello, Ramda!Hello, Block Protocol!Hello, Reef!Hello, Croquet!Hello, Markdoc!Hello, Multiavatar!Hello, Tableful!Hello, kdl-js Hello, Wild Wild Path!Hello, Lexical!Hello, Statery!Hello, pdfme!Shuffle an Array Hello, Pikaso Hello, Miniplex!Hello, CandyGraph!Hello, Supabase!Hello, Embla Carousel!Hello, core-js!Hello, tinybase Hello, umbrellajs Hello, pintora Skypack Pixijs Hello, sortablejs Hello, JS-YAML Testing bitECS for Tempest Hello jService!Hello, iro.js Hello, Splide Hello, Cosmic JS Hello, singui Kaboom JS Template Hello, JSPDF Hello, Awesome Dev Jokes Random DAD Joke Hello, model-viewer The Oracle Tarot Utilities Hello, lokiJS Hello, cash ( cash-dom )Hello, Dice Roller Hello, Slide-Element Hello, tsParticles Kaboom - dynamic values Hello Lit.dev Hello, Melon JS Hello Kontra

Also listed in…

Tips and Utilities

# Hello Color JS!

color = (await import('https://cdn.skypack.dev/color@4.2.3?min')).default

colors = {

const a = color('rgb(255, 255, 255)')

const b = color({r: 255, g: 255, b: 255})

const c = color.rgb(255, 255, 255)

const d = color.rgb([255, 255, 255])

yield {a,b,c,d}

}

colors.a.hsl().string()

colors.b.cmyk().round().array()

sample_color = color('#7743CE').alpha(0.5).lighten(0.5);

{

const cc = color("purple")

yield html`<div style="background-color:${cc.alpha(alphaRange).lighten(lightenRange)}; padding: 20px;"></div>`

}

viewof alphaRange = Inputs.range([0, 1], {label: "Alpha", step: .1})

viewof lightenRange = Inputs.range([0, 1], {label: "Lighten", step: .1})

{

const cc = color("purple")

yield html`<div style="background-color:${cc.mix(color("yellow"), mixRange)}; padding: 20px;"></div>`

}

viewof mixRange = Inputs.range([0, 1], {label: "Mix", step: .1})

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.

Learn more