Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (Cyborg)
  • No Skin
Collapse
Brand Logo

CIRCLE WITH A DOT

  1. Home
  2. Uncategorized
  3. 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'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

Scheduled Pinned Locked Moved Uncategorized
39 Posts 26 Posters 0 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • sarajw@front-end.socialS 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.

    dominik@nona.socialD This user is from outside of this forum
    dominik@nona.socialD This user is from outside of this forum
    dominik@nona.social
    wrote last edited by
    #20

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

    1 Reply Last reply
    0
    • b0rk@social.jvns.caB b0rk@social.jvns.ca

      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:

      https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

      but now I'm curious: are there similar CSS color palettes like this out there?

      loupbrun@mastodon.quebecL This user is from outside of this forum
      loupbrun@mastodon.quebecL This user is from outside of this forum
      loupbrun@mastodon.quebec
      wrote last edited by
      #21

      @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.

      Link Preview ImageLink Preview Image
      1 Reply Last reply
      0
      • watters@hachyderm.ioW 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/

        b0rk@social.jvns.caB This user is from outside of this forum
        b0rk@social.jvns.caB This user is from outside of this forum
        b0rk@social.jvns.ca
        wrote last edited by
        #22

        @watters thanks, this is great

        1 Reply Last reply
        0
        • b0rk@social.jvns.caB b0rk@social.jvns.ca

          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:

          https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

          but now I'm curious: are there similar CSS color palettes like this out there?

          trey@indieweb.socialT This user is from outside of this forum
          trey@indieweb.socialT This user is from outside of this forum
          trey@indieweb.social
          wrote last edited by
          #23

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

          trey@indieweb.socialT 1 Reply Last reply
          0
          • b0rk@social.jvns.caB b0rk@social.jvns.ca

            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:

            https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

            but now I'm curious: are there similar CSS color palettes like this out there?

            zygous@toot.communityZ This user is from outside of this forum
            zygous@toot.communityZ This user is from outside of this forum
            zygous@toot.community
            wrote last edited by
            #24

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

            1 Reply Last reply
            0
            • b0rk@social.jvns.caB b0rk@social.jvns.ca

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

              ikesau@micro.ikesau.coI This user is from outside of this forum
              ikesau@micro.ikesau.coI This user is from outside of this forum
              ikesau@micro.ikesau.co
              wrote last edited by
              #25

              @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 🙂

              sarajw@front-end.socialS 1 Reply Last reply
              0
              • b0rk@social.jvns.caB b0rk@social.jvns.ca

                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:

                https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                but now I'm curious: are there similar CSS color palettes like this out there?

                nihilistic_capybara@layer8.spaceN This user is from outside of this forum
                nihilistic_capybara@layer8.spaceN This user is from outside of this forum
                nihilistic_capybara@layer8.space
                wrote last edited by
                #26

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

                Boosting for visibility

                1 Reply Last reply
                0
                • b0rk@social.jvns.caB b0rk@social.jvns.ca

                  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:

                  https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                  but now I'm curious: are there similar CSS color palettes like this out there?

                  marien@tutut.delire.partyM This user is from outside of this forum
                  marien@tutut.delire.partyM This user is from outside of this forum
                  marien@tutut.delire.party
                  wrote last edited by
                  #27

                  @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

                  1 Reply Last reply
                  0
                  • ikesau@micro.ikesau.coI 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 🙂

                    sarajw@front-end.socialS This user is from outside of this forum
                    sarajw@front-end.socialS This user is from outside of this forum
                    sarajw@front-end.social
                    wrote last edited by
                    #28

                    @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.

                    1 Reply Last reply
                    0
                    • b0rk@social.jvns.caB b0rk@social.jvns.ca

                      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:

                      https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                      but now I'm curious: are there similar CSS color palettes like this out there?

                      nelson@tech.lgbtN This user is from outside of this forum
                      nelson@tech.lgbtN This user is from outside of this forum
                      nelson@tech.lgbt
                      wrote last edited by
                      #29

                      @b0rk your question is making me nostalgic for the X11 rgb.txt which 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.

                      Link Preview Image
                      1 Reply Last reply
                      0
                      • b0rk@social.jvns.caB b0rk@social.jvns.ca

                        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:

                        https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                        but now I'm curious: are there similar CSS color palettes like this out there?

                        thejikz@infosec.exchangeT This user is from outside of this forum
                        thejikz@infosec.exchangeT This user is from outside of this forum
                        thejikz@infosec.exchange
                        wrote last edited by
                        #30

                        @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/

                        1 Reply Last reply
                        1
                        0
                        • R relay@relay.infosec.exchange shared this topic
                        • trey@indieweb.socialT trey@indieweb.social

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

                          trey@indieweb.socialT This user is from outside of this forum
                          trey@indieweb.socialT This user is from outside of this forum
                          trey@indieweb.social
                          wrote last edited by
                          #31

                          @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!

                          1 Reply Last reply
                          0
                          • b0rk@social.jvns.caB b0rk@social.jvns.ca

                            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:

                            https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                            but now I'm curious: are there similar CSS color palettes like this out there?

                            tendstofortytwo@social.treehouse.systemsT This user is from outside of this forum
                            tendstofortytwo@social.treehouse.systemsT This user is from outside of this forum
                            tendstofortytwo@social.treehouse.systems
                            wrote last edited by
                            #32

                            @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

                            1 Reply Last reply
                            0
                            • b0rk@social.jvns.caB b0rk@social.jvns.ca

                              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:

                              https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                              but now I'm curious: are there similar CSS color palettes like this out there?

                              T This user is from outside of this forum
                              T This user is from outside of this forum
                              trademark@fosstodon.org
                              wrote last edited by
                              #33

                              @b0rk I like https://clrs.cc/ possibly because the URL is so easy to remember 🙂

                              1 Reply Last reply
                              0
                              • b0rk@social.jvns.caB b0rk@social.jvns.ca

                                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:

                                https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                                but now I'm curious: are there similar CSS color palettes like this out there?

                                njonsson@hachyderm.ioN This user is from outside of this forum
                                njonsson@hachyderm.ioN This user is from outside of this forum
                                njonsson@hachyderm.io
                                wrote last edited by
                                #34

                                @b0rk, mind saying where you’re going after Tailwind?

                                b0rk@social.jvns.caB 1 Reply Last reply
                                0
                                • njonsson@hachyderm.ioN njonsson@hachyderm.io

                                  @b0rk, mind saying where you’re going after Tailwind?

                                  b0rk@social.jvns.caB This user is from outside of this forum
                                  b0rk@social.jvns.caB This user is from outside of this forum
                                  b0rk@social.jvns.ca
                                  wrote last edited by
                                  #35

                                  @njonsson just writing CSS myself!

                                  1 Reply Last reply
                                  0
                                  • gastonrampersad@mastodon.socialG gastonrampersad@mastodon.social

                                    @b0rk uchū comes to mind. https://uchu.style

                                    bomberstudios@mastodon.onlineB This user is from outside of this forum
                                    bomberstudios@mastodon.onlineB This user is from outside of this forum
                                    bomberstudios@mastodon.online
                                    wrote last edited by
                                    #36

                                    @gastonrampersad @b0rk +1 for uchū, the colors are very nice and the whole thing is a pleasure to use

                                    1 Reply Last reply
                                    0
                                    • b0rk@social.jvns.caB b0rk@social.jvns.ca

                                      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:

                                      https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                                      but now I'm curious: are there similar CSS color palettes like this out there?

                                      ttt@mastodon.socialT This user is from outside of this forum
                                      ttt@mastodon.socialT This user is from outside of this forum
                                      ttt@mastodon.social
                                      wrote last edited by
                                      #37

                                      @b0rk https://stephango.com/flexoki

                                      1 Reply Last reply
                                      0
                                      • b0rk@social.jvns.caB b0rk@social.jvns.ca

                                        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:

                                        https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                                        but now I'm curious: are there similar CSS color palettes like this out there?

                                        willywongi@indieweb.socialW This user is from outside of this forum
                                        willywongi@indieweb.socialW This user is from outside of this forum
                                        willywongi@indieweb.social
                                        wrote last edited by
                                        #38

                                        @b0rk I HAVE to mention WebAwesome. https://webawesome.com/docs/color-palettes

                                        1 Reply Last reply
                                        0
                                        • b0rk@social.jvns.caB b0rk@social.jvns.ca

                                          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:

                                          https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe

                                          but now I'm curious: are there similar CSS color palettes like this out there?

                                          gekitsu@toot.catG This user is from outside of this forum
                                          gekitsu@toot.catG This user is from outside of this forum
                                          gekitsu@toot.cat
                                          wrote last edited by
                                          #39

                                          @b0rk not strictly what you asked for, but i have been at a similar point multiple times – wondering whether it wouldn’t be cool to build such a palette myself, for my own use.

                                          straddling the genericity to whip something up quickly, with the speed you get from reduced choice, and the sum of these somethings still carrying an overall fingerprint of my ideas and predilections when it comes to colour.

                                          after all, if there’s a need to not have that, i can always fine tune it away later. and if there’s no need to, there’s no harm in it looking ‘mine’.

                                          1 Reply Last reply
                                          0
                                          • R relay@relay.mycrowd.ca shared this topic
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • World
                                          • Users
                                          • Groups