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
-
@b0rk Flexoki is one that comes to mind - https://stephango.com/flexoki
@pjg1 thanks!
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk I used https://harmonizer.evilmartians.com to create my own and it has some built in contrast checking too which I like.
-
@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.
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@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 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/
@watters thanks, this is great
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk https://open-props.style/#colors is pretty cool
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk I see others have already mentioned calc(), but I enjoyed this recent blog post by @cferdinandi: https://gomakethings.com/generative-colors-with-css/
-
@sarajw whoa, I didn't realize you could do that now!
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk if you find out please le me know too.
Boosting for visibility
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@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
-
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk your question is making me nostalgic for the X11
rgb.txtwhich later became the basis of HTML and then CSS colors. Dates to 1985! It's not a great palette, it pre-dates all the work on perceptual color palettes.
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk I was searching for a decent scheme in my CSS learning and did stumble across this at least as a base reference, I enjoy the off namings and think it could be easily converted to CSS
XCXD color scheme Link:
https://xkcd.com/color/rgb/ -
R relay@relay.infosec.exchange shared this topic
-
@b0rk https://open-props.style/#colors is pretty cool
@b0rk Oh, and this one looks interesting as well https://colorpalette.pro
I'm having a lot of fun seeing all the things folks are linking to in this thread!
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk I enjoy https://coolors.co because it lets me dial a color combination in for a particular use case while making it easy to make it look good, but there's also other premade palettes like https://materialui.co/colors and https://flatuicolors.com that are great in a pinch. they have different vibes though I think. the flat ui palettes are more muted, the material ones are more vibrant, tailwind is sorta a nice middle ground
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk I like https://clrs.cc/ possibly because the URL is so easy to remember

-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?
@b0rk, mind saying where you’re going after Tailwind?
-
@b0rk, mind saying where you’re going after Tailwind?
@njonsson just writing CSS myself!
-
@b0rk uchū comes to mind. https://uchu.style
@gastonrampersad @b0rk +1 for uchū, the colors are very nice and the whole thing is a pleasure to use
-
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
i extracted it into css variables so I can still use it if I want:
but now I'm curious: are there similar CSS color palettes like this out there?