Wheeee! Another fun experiment from Cameron.
This article by Cassie is so, so good!
First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
My goodness, Meagan’s new site design is absolutely gorgeous! The colour palette, the typography, the texture, the motion design …it all communicates character and personality. Beautiful work!
I love this idea of comparing human colour choices to those of a computer:
I decided to do two things: the top three most used colours of the photo decided by “a computer” and my hand picked choices. This method ended up revealing a couple of things about me.
I also love that this was the biggest obstacle to finding representative imagery:
I wanted this to be an exciting task but instead I only found repeated photos of my cat.
Another good reason to use the
currentColor value in SVGs.
Some advice from Andy on creating a dark theme for your website. It’s not just about the colours—there are typography implications too.
A search engine for colours.
I don’t really understand what this colour tool is doing or what it’s for, but I like it.
Colour palettes throughout the ages that you can copy and use.
Inclusive design is also future-proofing technology for everyone. Swan noted that many more developers and designers are considering accessibility issues as they age and encounter poor eyesight or other impairments.
A lot of the issues here are with abuses of the
placeholder attribute—using it as a label, using it for additional information, etc.—whereas using it quite literally as a placeholder can be thought of as an enhancement (I almost always preface mine with “e.g.”).
Still, there’s no getting around that terrible colour contrast issue: if the contrast were greater, it would look too much like an actual pre-filled value, and that’s potentially worse.
On Ev’s blog, Marcin goes into great detail on theming an interface using CSS custom properties, SVG, HSL, and a smattering of CSS filters.
I was kind of amazed that all of this could happen via CSS and CSS alone: the colours, the transitions, the vectors, and even the images.
These are beautiful!
Featured below is a chronology of various attempts through the last four centuries to visually organise and make sense of colour.
Some colour palette inspiration from films.
A primer on accessible colour contrast with links to some handy tools for testing.
Go deep, deep down the rabbit hole of Rob’s brain in all its colourful glory. Seriously, this is simultaneously a great write-up of how he came up with his site’s lovely colour scheme(s), and it’s a terrific primer on colour theory and why the HSL value in CSS is so, so wonderful!
Suggestions for small interface tweaks.
A nice clear explanation of specifying colour using HSB (not to be confused with HSL).
Liberally licensed SVG illustrations by Katerina Limpitsouni with customisable colour schemes.