i've been working on moving away from Tailwind, and one thing I'm realizing I appreciated about Tailwind is having a basic color palette (blues, grays, greens, indigos, pinks, purples, reds, yellows) I could use while prototyping

[sarajw@front-end.social]

@b0rk I know not everyone loves CSS but for such as this I'd recommend using either color-mix() or relative colors to make your own

Here's an example with hsl() and relative colors - though I would prefer to use oklch() color space, this is made to match what our designer has access to and has set up in Figma.

[sarajw@front-end.social]

@gastonrampersad Oooh those are nice. Using oklch() too

@b0rk

[watters@hachyderm.io]

@b0rk The USWDS has a large palette of colors along with guidance about how to combine them in a way that is accessible: https://designsystem.digital.gov/design-tokens/color/system-tokens/

[sarajw@front-end.social]

@b0rk I do recognise though that nice looking palettes don't always have exactly the same hues or saturations all the way down the scale - you can use math within calc() when using relative colors though which is fun (for the likes of me):

Using relative colors - CSS | MDN

The CSS colors module defines relative color syntax, which allows a CSS value to be defined relative to another color. This is a powerful feature that enables the programmatic creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.

MDN Web Docs (developer.mozilla.org)

[shnizmuffin@toots.inbutts.lol]

@b0rk there are a ton of tools that will help you generate your own. I use [tints.dev](https://www.tints.dev/palette/v1:YmFkYXNzfEJhZGE1NXwyMDB8cHwwfDB8MHwxMDB8YQ) to tack colors on to the default Tailwind palette when I need to.

Usually, I'm replacing a standard color with a client's and need the shades they didn't bother putting into their brand style guide.

Also, I hope you didn't work too hard getting those colors out of TW, since v4 just sort of lists them in the docs: https://tailwindcss.com/docs/colors#default-color-palette-reference

[pjg1@mastodon.social]

@b0rk Flexoki is one that comes to mind - https://stephango.com/flexoki

[b0rk@social.jvns.ca]

@sarajw whoa, I didn't realize you could do that now!

[200ok@mastodon.social]

@b0rk ...which is really to say it's an algorithmic monochromatic palette https://www.colorhexa.com/E97339

[b0rk@social.jvns.ca]

@shnizmuffin nice! i wanted the exact colors from the tailwind 2.2.7 stylesheet I was using anyway and it only took a few minutes

[b0rk@social.jvns.ca]

@pjg1 thanks!

[eeentropyyy@hachyderm.io]

@b0rk I used https://harmonizer.evilmartians.com to create my own and it has some built in contrast checking too which I like.

[dominik@nona.social]

@sarajw @b0rk oooh! TIL, I like this a lot! Thanks!

[loupbrun@mastodon.quebec]

@b0rk I would use a tailwind palette generator like https://github.com/fullsolid/tailwindshades (installable offline!), extract the config for each color palette, and make a CSS variable list out of it.

[b0rk@social.jvns.ca]

@watters thanks, this is great

[trey@indieweb.social]

@b0rk https://open-props.style/#colors is pretty cool

[zygous@toot.community]

@b0rk I see others have already mentioned calc(), but I enjoyed this recent blog post by @cferdinandi: https://gomakethings.com/generative-colors-with-css/

[ikesau@micro.ikesau.co]

@b0rk @sarajw and if you don't mind a slightly hard-to-reason-about colour space, using oklab or oklch will get you even nicer derivatives

[nihilistic_capybara@layer8.space]

@b0rk if you find out please le me know too.

Boosting for visibility

[marien@tutut.delire.party]

@b0rk I use Radix UI colors a lot, it makes creating light/dark modes very easy https://www.radix-ui.com/colors/docs/palette-composition/scales

[sarajw@front-end.social]

@ikesau agreed!

@b0rk yes it's very cool what you can do now - CSS is ever more powerful, I don't like using tailwind because I find it limiting.