Useful Webdev Links

Some of my favorite tools for web development, including reference material on new web standards.

Color Palettes

Color Palette Pro: Recommended — Ryan Feigenbaum’s generator takes interface cues from synthesizers. You choose a single color and a color harmony (analogous, complementary, etc.) to derive other colors, then tweak the set with a series of synth-like dials. If you are picking hues by hand, put them in one at a time and set the strategy to TAS to get tints and shades of that color. Here’s his explanation. (Thanks, Tom)
Perceptual Palettes: This generator will let you pick multiple colors by hand and then generate tints and shades for each with consistent luminance. It does this by converting your hex-code colors, converting them into the OKLCH space, calculating the gradient, and then converting those back into hex code. Which works great only if you think in hex codes and are staying out of the HDR color range.
Paletton: Also stays firmly in RGB-land and generates fewer colors for you. It’s similar to Color Palette Pro but with much less flexibility. On the other hand, it mocks up a page with those colors and attempts color-blindness simulation.
RampenSau: Generates color ramps / hues based on color harmony and a root color you provide, similar to Palette Pro. Seems to stay in the HSL color space, which has some issues.

Iconify: Lots of icon sets available under permissive licenses (MIT, Apache, OFL…). (Thanks, Aron)

SVGOMG: SVG tool for cleaning up, compressing, and simplifying SVGs. I often use this after exporting an SVG from a tool like Figma.
Josh Comeau’s Shadow Palette Generator: Generate nice looking, naturalistic drop shadows in CSS.
Wakamai Fondue (font analysis): Web app that can analyze a font file and tell you lots of stuff about it, including the color palettes (if any) and what axes are available.
Flexbox Labs: A great way to try out different flexbox properties and see what they do; familiar iconography might help make the dubiously intuitive property names stick in your head a little better.
Anchoreum: Similar to above; an interactive playground for anchor-based positioning. (Browser support is chrome-only at the moment, but on the roadmap for Firefox and Safari.)
Easing Wizard: Tool for creating and visualizing different timing functions. I’ve mostly relied on the keywords and haven’t felt the need to go beyond because I’ve been following the rule that most UI interactions should not animate more than .3 seconds, but Josh Comeau’s course has convinced me that it’s more nuanced an issue than that.

Design Beyond Barriers: Lots of good tips here on how to design for accessibility.
Every Layout: Heydon Pickering & Andy Bell’s composable styles for common layout problems, with a lot of explanation for the thought behind the styles. The layouts themselves are a paid product, but the introductory material is both valuable and free.
Ahmad Shadeed’s Interactive Guide to CSS Container Queries: Not just the what, but the why.
CUBE CSS: Andy Bell’s CSS organization strategy based partly on BEM but less opinionated on naming conventions.
Navigating the Web Platform: A collection of links on how to keep up with changes to the web platform & how to participate in its development.

CSS Popover + Anchor Positioning is Magical: Kevin Powell explains both the basics of popovers and anchor positioning in about 20 minutes.