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 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 whoa, I didn't realize you could do that now!
-
@b0rk it feels like a riff on the Material palette https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
@b0rk ...which is really to say it's an algorithmic monochromatic palette https://www.colorhexa.com/E97339
-
@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
@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 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?
