Tailwind color palette generator

darekkay · 2024-02-02T17:49:29

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: https://darekkay.com/blog/accessible-color-palette/

tomrod · 2024-02-02T17:57:37

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!).

csande17 · 2024-02-02T19:32:32

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/

shados · 2024-02-03T00:07:28

The wcag color contrast algorithm isn't great (and there is a proposal for a better one), but sufficient color contrast is necessary for a variety of visual conditions. That it's not good enough for some doesn't mean it's not more accessible than not doing it at all though.

csande17 · 2024-02-03T00:57:12

A while back, a lot of Big Tech platforms (most notably GitHub) switched their "should we put black or white text on this user-supplied background color" algorithm to use the WCAG contrast formula. Doing so caused a lot of white-on-red badges to flip to black-on-red.

Many users reported this was harder to read, even those without the form of color blindness which makes black and red hard to distinguish. Whether making this change was really "more accessible" than doing nothing is therefore pretty debatable, but it definitely helped them pass their WCAG audits.

dylan604 · 2024-02-02T21:42:10

>unreadable for users with a common form of color blindness

or people with taste

tdeck · 2024-02-02T21:54:40

This brings up another interesting point I haven't considered before: how to make things not only functional, but beautiful for folks with different kinds of color vision. I wonder if there's any research into the aesthetics of design for including color blind folks.

yobert · 2024-02-02T22:25:51

Really I'm just surprised they haven't done the math on those color blindness types and just added that to the WCAG algorithm. Maybe someone has already?

rlt · 2024-02-03T00:58:26

I’d argue we should just be investing in generic tools that solve these problems once. Especially with recent advancements in AI.

happytiger · 2024-02-03T01:43:48

This is absolutely critical and I wish the whole industry had your attitude!

Well put!

outofpaper · 2024-02-02T19:36:38

What accessibility issues does the streamlit library have?

tomrod · 2024-02-02T20:16:17

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

tomrod · 2024-02-02T22:42:29

EDIT: too late to edit the prior comment. Streamlit is one in particular where several people have requested for accessibility to be added to the roadmap, but it is continually declined. However, given how companies are getting sued for gaps in accessibility on websites, as well as public service providers, its hard to want to keep something in the tech stack that is unintentionally hostile to accessibility patterns and standards.

grinich · 2024-02-02T19:52:42

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.)

Zaheer · 2024-02-02T23:09:57

Stripe published a post on theirs: https://stripe.com/blog/accessible-color-systems

I'm not aware of any tools though that leverage the concepts they laid out to generate new palettes.

KTibow · 2024-02-03T00:34:30

> niche

Material 3, a pretty big spec used by Google, has a color system that works like this

Brajeshwar · 2024-02-02T13:03:29

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

HellsMaddy · 2024-02-02T19:58:21

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.

danielvaughn · 2024-02-02T13:18:17

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/

dahart · 2024-02-02T16:03:03

Colour Science is one of the more serious projects I know of, and more or less lets you get as advanced as you want. Used by film professionals among others. https://www.colour-science.org/

How would you define what the perfect color tool is? I would guess like most tools that it depends entirely on the job at hand, and that maybe no one perfect tool can exist. Colour Science might be great at serious color management and perceptual measurements and conversions between standardized color spaces, but not the right tool for a web developer looking for quick & easy way to make an HSV palette generation widget (and not because Colour Science is Python, but because it’s too big and heavy of a hammer).

danielvaughn · 2024-02-02T16:12:11

I'm not entirely sure what I'm looking for, to be honest. I have this vague feeling that I'll know it when I see it. A lot of tools are attractive and provide unique features, but I don't think I've ever come across one where I immediately say to myself "yes! this is going to be my day-to-day professional tool." Nothing has quite hit that mark with me.

Colour Science looks neat though, I'll check it out. Thank you!

dahart · 2024-02-02T16:50:16

If you’re up for talking about it, I wouldn’t mind hearing what color things you do day to day, and what kinds of things your current tools aren’t able to do, or don’t do very well. What’s on your wish list for a color tool?

parkersweb · 2024-02-02T13:27:35

Likewise - in design systems like Shopify’s Polaris the tints across the entire color range have perceptual uniformity using something like HSLuv.

I’d love to find a color tool that generate tints along the same lines given an set of initial starting colors.

Does colorjs allow you to do that do you know?

danielvaughn · 2024-02-02T15:24:18

That sounds plausible, yeah. The Color object is space-agnostic, so you can take any set of colors and interpolate their lightness/luminosity/value using any color space you prefer.

So something like this:

  Color('#123').lch[0] *= 1.2

outofpaper · 2024-02-02T19:38:11

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

dabber · 2024-02-03T04:58:58

I also haven't checked their code but it reminds me of the awful "smooth scrolling" trend that was popular on a lot of websites a few years back and implemented with unperformant synchronous JS attached to an onScroll event with no denouncing. I just assumed it was the same on that site.

broast · 2024-02-02T13:20:00

I like https://huemint.com/

Povlen · 2024-02-02T21:02:58

This one is great!

meowface · 2024-02-02T19:32:00

This is really cool.

hk1337 · 2024-02-02T17:53:02

The site seems kind of slow loading these days but I have always been fond of https://www.colourlovers.com

foenix · 2024-02-02T16:18:03

These are great! Here are my personal curations / additions of go-to color links (general color theory stuff):

- https://paletton.com/ palettes with color theory and can generate the entire scheme.

- https://medialab.github.io/iwanthue/ I want hue, uses k-means to separate out colors, great for graphs and getting contrast on those.

davely · 2024-02-02T14:48:53

colormind.io is great! They have a free API you can use to get random color palettes.

I was using it to get random (and hopefully pleasant) color schemes awhile back when you could still run Twitter bots for my cheesy “JustTriangles” bot [1].

[1] https://twitter.com/JustTriangles

kamalkishor1991 · 2024-02-02T13:51:34

https://huehive.co is another tool that lets you generate and visualize color palettes using ChatGPT.

dsmmcken · 2024-02-02T14:59:58

See also https://leonardocolor.io/theme.html

eviks · 2024-02-02T13:26:55

do you know a tool that uses OKHSL/V instead of hex? Like colorcolor.in uses such a color space, but then all the overlays are still in hex, so there is this break between input and output

Brajeshwar · 2024-02-02T13:50:40

You meant the "Overlay" (bottom-left) to have HSL option too? Btw, if you open an issue/request with the right context, Saneef will look into it. I will nudge him if that makes sense.

https://github.com/saneef/color-color

eviks · 2024-02-02T14:12:03

Yes, so if I start a palette at Lightness 100 and end at Lightness 0, I should see these numbers in the resulting colors

In this specific example the starting color is still not ff, but f9 due to some easing interference (though I'd expect a function x=0 y=0 to not do anything for the very first color), but even then you still see a clear connection, and if you had 10 steps you'd see ~10 lightness point increase in each palette color

davetron5000 · 2024-02-02T18:24:52

I built one recently. Much simpler and more opinionated, but can generate a Tailwind configuration: https://ghola.dev (desktop/ipad is best)

Long read on how it was built with web components: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

strangescript · 2024-02-02T18:48:38

I like what you built. I think calling something a palette generator that only does one color at a time isn't "correct". Or at least not what I am looking for. I want something like yours that builds out a suite of colors for an app.

hoistbypetard · 2024-02-02T13:18:15

This is great. I just did a better job generating a palette in under a minute, starting from a logo, than I did manually in 30 minutes last time I needed to do it. Nice work!

simeonGriggs · 2024-02-02T14:29:38

Glad you like it!

wildrhythms · 2024-02-02T14:12:09

This is a nice tool. As another approach that I use in my codebases is I define the color palette with CSS variables, so my Tailwind config just points to those. Then at runtime I can plug in different color themes.

kkyr · 2024-02-02T14:26:45

Do u mind sharing some code?

wildrhythms · 2024-02-02T18:47:48

1. The user picks a desired hex color.

2. At runtime, I use the material-color-utilities library[1] to generate a whole color theme based on that one root color. The applyTheme method puts the theme into CSS variables on the body like --md-sys-color-primary: #c72320; and so on for each color token.

3. In tailwind.config.js I set the colors to point to those variables, for example "primary": "var(--md-sys-color-primary)", and so on for the rest of the colors.

Using this approach I can remap colors at runtime for whole subtrees by simply overriding the CSS color variables.

[1] https://www.npmjs.com/package/@material/material-color-utili...

ptsd_dalmatian · 2024-02-02T12:45:41

Love it. Thanks so much to the author for making this. I wonder what's the easiest way how to sync these colors with Figma. Perhaps pro designers use some plugin for generating this kind of colors and exporting them to Tailwind?

kamalkishor1991 · 2024-02-02T13:54:25

Are you looking for this kind of plugin? https://github.com/croma-app/huehive-figma-plugin

simeonGriggs · 2024-02-02T14:30:29

Glad you like it! Haven't thought before about how to get these colours into Figma tho ... good idea!

thiago_fm · 2024-02-02T13:03:02

Figma Tokens is a nice approach

ptsd_dalmatian · 2024-02-02T13:12:40

thanks, haven't played with Figma for a while

danielvaughn · 2024-02-02T13:19:23

Figma's approach to color is so frustrating and bonkers that I don't even bother. I've tried to make it work several times, and it's just so manual and tedious that I give up.

simplify · 2024-02-02T17:20:56

Great tool, very useful. I use it to generate a color palette from a single color, then take its output and feed it into https://palettte.app to manually adjust each one.

TIPSIO · 2024-02-02T14:25:30

For the "brand" example demo'd, is that what people tend to do for configs?

I thought people would simply just modify the default colors or create new variables like primary, secondary, etc..

simeonGriggs · 2024-02-02T14:29:04

Hey! I'm the creator of tints.dev – the "brand" set of colours is what I use on my blog simeongriggs.dev and yeah I used this tool to put in the `500` swatch value and generate the rest :)

babuskov · 2024-02-02T14:57:56

Looks useful for gradients. Strange that nobody mentions Paletton. It's my go to tool when picking colors:

https://paletton.com/

You start with the base, and then also get gradients to adjacent colors in the palette. Especially the triad and tetrad ones are useful.

b2bsaas00 · 2024-02-02T16:50:28

I am a full stack dev and I do not know nothing about colors but I use tailwind css. Where could I study how to choose colors and better use this tool?

zipping1549 · 2024-02-02T18:25:49

https://developer.mozilla.org/en-US/docs/Web/Accessibility/U...

city17 · 2024-02-02T14:08:49

Nice idea. Would be even better if you could manually adjust several of the values and it would adjust the missing ones in between. Now you can only base it on one single starting color.

simeonGriggs · 2024-02-02T14:30:02

I have a branch laying around somewhere where you could click between swatches to add extra values ... just never finished and shipped it.

Kalanos · 2024-02-02T14:04:05

can't figure out how to search colors within 5 sec. im out.

i like https://www.color-hex.com/

hosteur · 2024-02-02T13:04:45

Nice. Is there something similar for bootstrap?

twoquestions · 2024-02-02T13:26:45

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/

welder · 2024-02-02T20:41:36

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

aantix · 2024-02-02T13:38:00

What would be a good way to choose a color palette for a gradient background?

dbbk · 2024-02-02T13:11:29

How come the oklch colors aren't saturated like p3?

mska · 2024-02-02T13:26:23

Nice!

I have a color tool I'm building too: https://divmagic.com/tools/color-converter

bartwe · 2024-02-02T20:16:37

could use oklab color space support

dkrajzew · 2024-02-02T17:56:43

Mine is a MS WIndows application with variable export functionality: https://palettewb.com

omneity · 2024-02-02T15:16:20

This is amazing. Until now I used https://colorbox.io which first originated at Lyft before becoming an independent project.

lovegrenoble · 2024-02-02T14:18:25

I use this one: https://color.adobe.com/fr/create/color-wheel/

mikojan · 2024-02-02T14:17:05

I took me forever to find out how to apply hue shift even though I was actively looking for it.

lovegrenoble · 2024-02-02T14:17:43

IT WAS A NICE PLAY

（评论） (comments)

（评论）
(comments)