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.
  • pjg1@mastodon.socialP pjg1@mastodon.social

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

    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
    #18

    @pjg1 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:

      Link Preview Image
      colors.css

      GitHub Gist: instantly share code, notes, and snippets.

      favicon

      Gist (gist.github.com)

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

      eeentropyyy@hachyderm.ioE This user is from outside of this forum
      eeentropyyy@hachyderm.ioE This user is from outside of this forum
      eeentropyyy@hachyderm.io
      wrote last edited by
      #19

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

      1 Reply Last reply
      0
      • 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:

          Link Preview Image
          colors.css

          GitHub Gist: instantly share code, notes, and snippets.

          favicon

          Gist (gist.github.com)

          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:

              Link Preview Image
              colors.css

              GitHub Gist: instantly share code, notes, and snippets.

              favicon

              Gist (gist.github.com)

              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:

                Link Preview Image
                colors.css

                GitHub Gist: instantly share code, notes, and snippets.

                favicon

                Gist (gist.github.com)

                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:

                    Link Preview Image
                    colors.css

                    GitHub Gist: instantly share code, notes, and snippets.

                    favicon

                    Gist (gist.github.com)

                    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:

                      Link Preview Image
                      colors.css

                      GitHub Gist: instantly share code, notes, and snippets.

                      favicon

                      Gist (gist.github.com)

                      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:

                          Link Preview Image
                          colors.css

                          GitHub Gist: instantly share code, notes, and snippets.

                          favicon

                          Gist (gist.github.com)

                          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:

                            Link Preview Image
                            colors.css

                            GitHub Gist: instantly share code, notes, and snippets.

                            favicon

                            Gist (gist.github.com)

                            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:

                                Link Preview Image
                                colors.css

                                GitHub Gist: instantly share code, notes, and snippets.

                                favicon

                                Gist (gist.github.com)

                                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:

                                  Link Preview Image
                                  colors.css

                                  GitHub Gist: instantly share code, notes, and snippets.

                                  favicon

                                  Gist (gist.github.com)

                                  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:

                                    Link Preview Image
                                    colors.css

                                    GitHub Gist: instantly share code, notes, and snippets.

                                    favicon

                                    Gist (gist.github.com)

                                    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:

                                          Link Preview Image
                                          colors.css

                                          GitHub Gist: instantly share code, notes, and snippets.

                                          favicon

                                          Gist (gist.github.com)

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