Thanks! You mean plot the editable HSL curves going left-to-right across the palette/swatches rather than plots going top-to-bottom across a single swatch? If it helps, you can make whatever kinds of gradients you want within a swatch right now. Quick example www.inclusivecolors.com?style_dictio...

inclusivecolors.com is featured in today's sidebar.io newsletter. 😄 Thanks @uxcollective.bsky.social!

#designsky #design #webdesign #css #ux #accessibility #a11y #buildinpublic

Did you try on desktop? Click an element on the mockup to show the current contrast ratio, the target ratio (e.g. 4.5:1 for body text, 3:1 for border), and if it passes. :) The contrast menu at the top lets you compare any color pair. Mobile has limited space but outlines mockup failures.
#a11y

Added basic mobile support to my color palette creator and lots of little bug fixes. 😄 Please reach out if you have any feature requests or challenging problems with creating your own branded palettes! www.inclusivecolors.com #designsky #a11y #design #webdesign #css #ux #accessibility #buildinpublic

i redesigned my website is it good or bad

chriscoyier.net

Here's the last issue of Frontend Focus for the year, and it's a round-up of just what went down in 2024: frontendfoc.us/issues/673

❖ How to create typography variables in Figma👇

Text styles use variables for:

◆ Font family
◆ Font weight
◆ Font size
◆ Line height

Makes it faster & easier to customise typography.

From my Practical Ui Figma design system:
www.practical-ui.com

What do yours look like?

@frontendfocus.bsky.social Thanks for the mention of my color palette creator inclusivecolors.com in the latest Frontend Focus newsletter frontendfoc.us/issues/672! I wasn't sure where all the extra traffic was coming from at first. 😄

Making sustainable/green websites has lots of overlap with making fast loading websites, but with emphasis on overall page weight (including below-the-fold) and green web hosting? It's interesting to see standards here evolve! #webdesign #webdev #climatechange

developer.mozilla.org/en-US/blog/i...

Quick accessible dark mode palette exploration using my inclusivecolors.com tool. 🙂 I'm curious what steps designers follow to make a dark mode palette from an existing light mode palette, and how they keep them both in sync as they tweak colors later? #designsky #a11y #design #webdesign #css #ux

Hello Bluesky! 😄 Just to see how this works, for my first post, here's my side project inclusivecolors.com for creating WCAG accessible color palettes for web/UI design. Feedback very welcome! #accessibility #a11y #wcag #design #graphicdesign #webdev #webdesign #uidesign #css #figma #tailwind #ux