7 ms·
Tailwind color palette generator
- christian85723 3y ago[flagged]
- ptsd_dalmatian 3y agoLove 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 3y agoFigma Tokens is a nice approach
- ptsd_dalmatian 3y agothanks, haven't played with Figma for a while
- danielvaughn 3y agoFigma'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 3y agoAre you looking for this kind of plugin? https://github.com/croma-app/huehive-figma-plugin https://github.com/croma-app/huehive-figma-plugin
- simeonGriggs 3y agoGlad you like it! Haven't thought before about how to get these colours into Figma tho ... good idea!
- Brajeshwar 3y agoI love playing with color. This is another nice tool. Here are few other good alternatives/otpions; - https://adevade.github.io/color-scheme-generator/ https://adevade.github.io/color-scheme-generator/ - https://colorcolor.in https://colorcolor.in (do not generate tailwind directly but a well done one) - http://colormind.io http://colormind.io - https://uicolors.app/create https://uicolors.app/create
- danielvaughn 3y agoFor 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/ https://colorjs.io/
- parkersweb 3y agoLikewise - 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 3y agoThat 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 3y agoColour 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/ 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).
- hosteur 3y agoNice. Is there something similar for bootstrap?
- twoquestions 3y agoIf 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://daisyui.com/ https://flowbite.com/ https://flowbite.com/
- welder 3y agoI like Daisy, and I tried a lot of component libraries before deciding on https://daisyui.com https://daisyui.com. https://chakra-ui.com https://chakra-ui.com, https://ripple-ui.com https://ripple-ui.com, https://flowbite.com https://flowbite.com, https://tailblocks.cc https://tailblocks.cc, https://ui.shadcn.com https://ui.shadcn.com, https://headlessui.com https://headlessui.com
- dbbk 3y agoHow come the oklch colors aren't saturated like p3?
- hoistbypetard 3y agoThis 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 3y agoGlad you like it!
- mska 3y agoNice! I have a color tool I'm building too: https://divmagic.com/tools/color-converter https://divmagic.com/tools/color-converter
- deleted 3y ago[deleted]
- aantix 3y agoWhat would be a good way to choose a color palette for a gradient background?
- Kalanos 3y agocan't figure out how to search colors within 5 sec. im out. i like https://www.color-hex.com/ https://www.color-hex.com/
- city17 3y agoNice 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 3y agoI have a branch laying around somewhere where you could click between swatches to add extra values ... just never finished and shipped it.
- wildrhythms 3y agoThis 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 3y agoDo u mind sharing some code?
- wildrhythms 3y ago1. 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-utilities https://www.npmjs.com/package/@material/material-color-utili...
- mikojan 3y agoI took me forever to find out how to apply hue shift even though I was actively looking for it.
- lovegrenoble 3y agoIT WAS A NICE PLAY
- lovegrenoble 3y agoI use this one: https://color.adobe.com/fr/create/color-wheel/ https://color.adobe.com/fr/create/color-wheel/
- deleted 3y ago[deleted]
- TIPSIO 3y agoFor 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 3y agoHey! 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 3y agoLooks useful for gradients. Strange that nobody mentions Paletton. It's my go to tool when picking colors: https://paletton.com/ 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.
- deleted 3y ago[deleted]
- omneity 3y agoThis is amazing. Until now I used https://colorbox.io https://colorbox.io which first originated at Lyft before becoming an independent project.
- deleted 3y ago[deleted]
- b2bsaas00 3y agoI 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 3y agohttps://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance https://developer.mozilla.org/en-US/docs/Web/Accessibility/U...
- simplify 3y agoGreat 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 https://palettte.app to manually adjust each one.
- darekkay 3y agoI 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/ https://darekkay.com/blog/accessible-color-palette/
- tomrod 3y agoYou 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!).
- rlt 3y agoI’d argue we should just be investing in generic tools that solve these problems once. Especially with recent advancements in AI.
- csande17 3y agoThe 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/ https://accessibility.psu.edu/color/colorvisiondetails/
- dkrajzew 3y agoMine is a MS WIndows application with variable export functionality: https://palettewb.com https://palettewb.com
- deleted 3y ago[deleted]
- davetron5000 3y agoI built one recently. Much simpler and more opinionated, but can generate a Tailwind configuration: https://ghola.dev 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-in-earnest.html https://www.naildrivin5.com/blog/2024/01/24/web-components-i...
- strangescript 3y agoI 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.
- christian85723 3y ago[flagged]
- bartwe 3y agocould use oklab color space support