[HN Gopher] Tailwind color palette generator
___________________________________________________________________
Tailwind color palette generator
Author : wallawe
Score : 415 points
Date : 2024-02-02 12:26 UTC (10 hours ago)
(HTM) web link (www.tints.dev)
(TXT) w3m dump (www.tints.dev)
| ptsd_dalmatian wrote:
| 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?
| thiago_fm wrote:
| Figma Tokens is a nice approach
| ptsd_dalmatian wrote:
| thanks, haven't played with Figma for a while
| danielvaughn wrote:
| 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.
| kamalkishor1991 wrote:
| Are you looking for this kind of plugin?
| https://github.com/croma-app/huehive-figma-plugin
| simeonGriggs wrote:
| Glad you like it! Haven't thought before about how to get these
| colours into Figma tho ... good idea!
| Brajeshwar wrote:
| 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
| danielvaughn wrote:
| 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/
| parkersweb wrote:
| 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 wrote:
| 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
| dahart wrote:
| 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 wrote:
| 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 wrote:
| 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?
| outofpaper wrote:
| What's going on with that page? I haven't check thr code but
| it drops my frame rate through the floor.
| broast wrote:
| I like https://huemint.com/
| meowface wrote:
| This is really cool.
| Povlen wrote:
| This one is great!
| eviks wrote:
| 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 wrote:
| 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 wrote:
| 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
| kamalkishor1991 wrote:
| https://huehive.co is another tool that lets you generate and
| visualize color palettes using ChatGPT.
| davely wrote:
| 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
| dsmmcken wrote:
| See also https://leonardocolor.io/theme.html
| foenix wrote:
| 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.
| hk1337 wrote:
| The site seems kind of slow loading these days but I have
| always been fond of https://www.colourlovers.com
| HellsMaddy wrote:
| 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.
| hosteur wrote:
| Nice. Is there something similar for bootstrap?
| twoquestions wrote:
| 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 wrote:
| 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
| dbbk wrote:
| How come the oklch colors aren't saturated like p3?
| hoistbypetard wrote:
| 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 wrote:
| Glad you like it!
| mska wrote:
| Nice!
|
| I have a color tool I'm building too:
| https://divmagic.com/tools/color-converter
| aantix wrote:
| What would be a good way to choose a color palette for a gradient
| background?
| Kalanos wrote:
| can't figure out how to search colors within 5 sec. im out.
|
| i like https://www.color-hex.com/
| city17 wrote:
| 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 wrote:
| I have a branch laying around somewhere where you could click
| between swatches to add extra values ... just never finished
| and shipped it.
| wildrhythms wrote:
| 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 wrote:
| Do u mind sharing some code?
| wildrhythms wrote:
| 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...
| mikojan wrote:
| I took me forever to find out how to apply hue shift even though
| I was actively looking for it.
| lovegrenoble wrote:
| IT WAS A NICE PLAY
| lovegrenoble wrote:
| I use this one: https://color.adobe.com/fr/create/color-wheel/
| TIPSIO wrote:
| 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 wrote:
| 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 wrote:
| 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.
| omneity wrote:
| This is amazing. Until now I used https://colorbox.io which first
| originated at Lyft before becoming an independent project.
| b2bsaas00 wrote:
| 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 wrote:
| https://developer.mozilla.org/en-US/docs/Web/Accessibility/U...
| simplify wrote:
| 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.
| darekkay wrote:
| 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 wrote:
| 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 wrote:
| 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/
| dylan604 wrote:
| >unreadable for users with a common form of color blindness
|
| or people with taste
| tdeck wrote:
| 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 wrote:
| 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?
| outofpaper wrote:
| What accessibility issues does the streamlit library have?
| tomrod wrote:
| 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 wrote:
| 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 wrote:
| 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.)
| dkrajzew wrote:
| Mine is a MS WIndows application with variable export
| functionality: https://palettewb.com
| davetron5000 wrote:
| 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 wrote:
| 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.
| bartwe wrote:
| could use oklab color space support
___________________________________________________________________
(page generated 2024-02-02 23:00 UTC)