Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind color palette generator

tints.dev

Post reply on HN
Print view View original

61–70 of 83 posts

Re: Tailwind color palette generator

#61

Post by csande17 »

tomrod wrote: post #47
darekkay wrote: post #44

I would love to see such tools have some accessibility DX built-in. The idea is to define the color palette in such a way that we know whether a color combination is accessible just by looking at the color name. For example, using the USWDS design system, I know that blue-30 on gray-80 is accessible (WCAG AA), because the difference between both values is 50+. I once wrote a blog post about this (niche) concept: http…

You identified the concept as niche, but I would argue this should be a first-class priority in web design. We will all be disabled at some point, permanently or temporarily. So many great tools are unusable due to accessibility reasons (like Streamlit!).

The concept of color contrast isn't niche, but building your color palette around the WCAG contrast algorithm kind of is. It's useful for checking boxes if you're required to do WCAG audits, but is neither necessary nor sufficient to ensure actual users with disabilities are able to read your text.

For example, #F00 text on an #000 background passes WCAG AA, but will be unreadable for users with a common form of color blindness: https://accessibility.psu.edu/color/colorvisiondetails/

Re: Tailwind color palette generator

#62

Post by outofpaper »

tomrod wrote: post #47
darekkay wrote: post #44

I would love to see such tools have some accessibility DX built-in. The idea is to define the color palette in such a way that we know whether a color combination is accessible just by looking at the color name. For example, using the USWDS design system, I know that blue-30 on gray-80 is accessible (WCAG AA), because the difference between both values is 50+. I once wrote a blog post about this (niche) concept: http…

You identified the concept as niche, but I would argue this should be a first-class priority in web design. We will all be disabled at some point, permanently or temporarily. So many great tools are unusable due to accessibility reasons (like Streamlit!).

What accessibility issues does the streamlit library have?

Re: Tailwind color palette generator

#63

Post by outofpaper »

danielvaughn wrote: post #9
Brajeshwar wrote: post #4

I love playing with color. This is another nice tool. Here are few other good alternatives/otpions; - https://adevade.github.io/color-scheme-generator/ - https://colorcolor.in (do not generate tailwind directly but a well done one) - http://colormind.io - https://uicolors.app/create

For a long time, I've been on the lookout for the perfect color tool, but so far haven't found it yet. Something that lets you get as advanced as what's presented by this library: https://colorjs.io/

What's going on with that page? I haven't check thr code but it drops my frame rate through the floor.

Re: Tailwind color palette generator

#64

Post by grinich »

darekkay wrote: post #44

I would love to see such tools have some accessibility DX built-in. The idea is to define the color palette in such a way that we know whether a color combination is accessible just by looking at the color name. For example, using the USWDS design system, I know that blue-30 on gray-80 is accessible (WCAG AA), because the difference between both values is 50+. I once wrote a blog post about this (niche) concept: http…

Radix Colors has a ton of accessibility stuff built in.

https://www.radix-ui.com/colors

(I work at WorkOS and Radix is an open source project of ours.)

Re: Tailwind color palette generator

#65

Post by HellsMaddy »

Brajeshwar wrote: post #4

I love playing with color. This is another nice tool. Here are few other good alternatives/otpions; - https://adevade.github.io/color-scheme-generator/ - https://colorcolor.in (do not generate tailwind directly but a well done one) - http://colormind.io - https://uicolors.app/create

I'd like to recommend https://github.com/ardov/huetone (https://huetone.ardov.me/)

It has a unique UI that I haven't seen before in similar tools, allowing you to see the relative L/C/H across all of the colors in the palette using graphs. It makes it much easier to create a palette that looks cohesive.

Re: Tailwind color palette generator

#66

Post by tomrod »

outofpaper wrote: post #62
tomrod wrote: post #47

Earlier quoted context omitted.

You identified the concept as niche, but I would argue this should be a first-class priority in web design. We will all be disabled at some point, permanently or temporarily. So many great tools are unusable due to accessibility reasons (like Streamlit!).

What accessibility issues does the streamlit library have?

Loss of keyboard focus, no streamlined way to set tab order, no ability to set a specific ID components for screen readers, and more.

Re: Tailwind color palette generator

#68

Post by welder »

twoquestions wrote: post #13
hosteur wrote: post #5

Nice. Is there something similar for bootstrap?

If you're looking for grab and go components, Daisy UI or Flowbite might be more your speed, I've used both with minimal headache. https://daisyui.com/ https://flowbite.com/

I like Daisy, and I tried a lot of component libraries before deciding on https://daisyui.com.

https://chakra-ui.com, https://ripple-ui.com, https://flowbite.com, https://tailblocks.cc, https://ui.shadcn.com, https://headlessui.com

Re: Tailwind color palette generator

#69

Post by Povlen »

broast wrote: post #11
Brajeshwar wrote: post #4

I love playing with color. This is another nice tool. Here are few other good alternatives/otpions; - https://adevade.github.io/color-scheme-generator/ - https://colorcolor.in (do not generate tailwind directly but a well done one) - http://colormind.io - https://uicolors.app/create

I like https://huemint.com/

This one is great!

Re: Tailwind color palette generator

#70

Post by dylan604 »

csande17 wrote: post #61
tomrod wrote: post #47

Earlier quoted context omitted.

You identified the concept as niche, but I would argue this should be a first-class priority in web design. We will all be disabled at some point, permanently or temporarily. So many great tools are unusable due to accessibility reasons (like Streamlit!).

The concept of color contrast isn't niche, but building your color palette around the WCAG contrast algorithm kind of is. It's useful for checking boxes if you're required to do WCAG audits, but is neither necessary nor sufficient to ensure actual users with disabilities are able to read your text. For example, #F00 text on an #000 background passes WCAG AA, but will be unreadable for users with a common form of colo…

>unreadable for users with a common form of color blindness

or people with taste

Post reply on HN