Comment by seanwilson | Hacker News Reader

Comment by seanwilson | Hacker News Reader

https://www.inclusivecolors.com/

Iterating on an accessible color palette creator, for custom Tailwind-style palettes of multiple swatches, where you can check your colors have sufficient WCAG/ACPA color contrast on a live UI mockup. You can export the colors for use with Tailwind, CSS, Figma, and Adobe.

I started working on this because for design projects I was almost always getting handed brand style guides that were missing thought into accessible colors pairs and lacked tints/shades, where I had to fill in the gaps. There's lots of color tools out there, but this supports multiple swatches, checking the contrast of multiple color pairs at the same time and the HSLuv based color picker makes it easier to explore accessible colors.

It's really only usable on desktop right now but I'd love any feedback good or bad on if it's useful and what to work on next! There's actually a lot of directions to go in, and it's tricky to balance more features with keeping it simple. Some tips:

- The "Load examples" menu in the top-left lets you compare the colors from Tailwind, IBM Carbon and United States Web Design System.

- The "contrast" menu lets you see how WCAG 2 contrast checks compare against APCA when "vs black/white" is turned on. WCAG 2 has known inaccuracies, especially for dark mode. APCA is the candidate contrast method for WCAG 3 that's meant to improve on this.

- Use the "..." menu to create a swatch based on a brand color.

- Use the "..." menu to "flip to dark/light palette" to create a dark theme. Or just manually flip the lightness curves horizontally.

I'm a big fan of HSLuv and I've been looking for a way to generate 12 distinct colors for data visualization, so that small points in those colors against a black or dark blue background will be visually distinct to everyone including my red-green colorblind coworker.

I like HSLuv too as its color picker looks familiar while having a Lightness slider that works the way you'd expect compared to HSL. I see color nerds promoting OKLCH but OKLCH color pickers can look intimidating.

> generate 12 distinct colors for data visualization, so that small points in those colors against a black or dark blue background will be visually distinct to everyone including my red-green colorblind coworker.

Did you get anywhere with this? When there's multiple kinds of color blindness changing the perceived colors in different ways, I'm not sure 12 colors that are distinct to everyone is feasible. You could use different symbols though, or changes in size or pattern.

fwiw I was very confused with what I was supposed to do on this site and I run a few websites using Tailwind colors. I don't really get how the color selector on the right interacts with the mock previews on the left. It also wasn't obvious I'm supposed to hover over each element in the mock preview.

Thanks, that's helpful! The color selector on the far right is mostly there to let you change which color you're editing if you're not interested in the mockup preview on the far left, and to add new colors. You can mostly ignore it if you'd rather select colors by clicking on the mockup.

For what you're supposed to do, you're meant to drag the points or curves in the hue/saturation/lightness columns to customize the colors swatches to create your own custom palette. The mockup will update as you make changes and warn you if there's any accessibility contrast issues. You can click elements on the mockup to select colors to edit and check their color contrast.

Does that help at all? Any more hints on what part wasn't obvious and what would make it more obvious? I could hide the color selector by default maybe? Add better labels or hints?

Reply on news.ycombinator.com