| ▲ | seanwilson 2 days ago | |
I'm still tweaking my tool for creating accessible Tailwind-style color palettes for web/UI design that pass WCAG 2 contrast requirements: https://www.inclusivecolors.com/ There's 100s of color palette generation tools, where most only let you customize a single color then try to autogenerate tints/shades without much thought about accessibility or tints/shades customization. The main features of this tool are: - Emphasis on accessibility. A live UI mockup using your palette warns you if your tints/shades are lacking contrast when used in practice for headings, paragraphs, borders, and buttons, and teaches you the WCAG rules. Fixing contrast issues and exploring accessible color options is also made much easier using an HSLuv color picker, where only the lightness slider alters the contrast checks, and not the hue/saturation sliders (most tools use HSL, where hue/saturation changes counterintuitively alter contrast checks which makes accessibility really tough!). - You can tweak the hue/saturation/lightness of every tint/shade. This is useful because autogenerated colors are never quite right, and customization is really important for branding work when you have to include specific tints/shades. The curve-based hue/saturation/lightness editing UI also makes this a really quick process. - Instead of just a handful of colors, this tool lets you create a full palette. For example, if your primary color is blue, you always end up needing other colors like green for success, red for danger, and gray for text, then 11 tints/shades for all of these, so you want a tool that lets you tweak, check, compare and manage them all at once. It's mostly a demo on mobile so check it on desktop. I'm still working on making it easier to use as it probably requires some design background to understand, but really open to feedback! | ||