Elektrine lite

← Feed

@b0rk@social.jvns.ca

Post #1976504

2026-05-04 12:39 UTC

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?

Replies (27)

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

    Open ##2017307

  • @esoterra@hachyderm.io 2026-05-04 12:41

    @b0rk is there any reason you can't extract this one and use it?

    Open ##2017311

  • @200ok@mastodon.social 2026-05-04 12:50

    @b0rk it feels like a riff on the Material palette https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

    Open ##2017314

  • @b0rk depends a bit on the purpose, but maybe Catppucin?

    Open ##2017316

  • @sarajw@front-end.social 2026-05-04 12:53

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

    Open ##2017317

  • @watters@hachyderm.io 2026-05-04 12:54

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

    Open ##2017326

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

    Open ##2017328

  • @pjg1@mastodon.social 2026-05-04 12:58

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

    Open ##2017330

  • @eeentropyyy@hachyderm.io 2026-05-04 13:02

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

    Open ##2017333

  • @loupbrun@mastodon.quebec 2026-05-04 13:03

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

    Open ##2017334

  • @trey@indieweb.social 2026-05-04 13:21

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

    Open ##2017335

  • @zygous@toot.community 2026-05-04 13:21

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

    Open ##2017337

  • @b0rk if you find out please le me know too. Boosting for visibility

    Open ##2017338

  • @marien@tutut.delire.party 2026-05-04 13:30

    @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

    Open ##2017339

  • @dmoonfire@polymaths.social 2026-05-04 13:43

    @b0rk Reasonable Colors is what I use on many of my sites. https://www.reasonable.work/artifacts/ra005-reasonable-colors/ 2014 Material has a palette I've liked for some of my sites: https://codepen.io/stOrM/pen/YzdwaLq (sadly, I don't have a canon source for that one). Leicmin uses https://ninedegreesbelow.com/photography/gimp-srgb-lch-color-palettes.html saturation 4 and 8 for color palette which I ended up writing a CSS var's based sheet: https://src.mfgames.com/leicmin/leicmin/src/branch/main/src/assets/css/colors/palette.css

    Open ##2017397

  • @nelson@tech.lgbt 2026-05-04 13:46

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

    Open ##2017401

  • @thejikz@infosec.exchange 2026-05-04 13:54

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

    Open ##2017402

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

    Open ##2017403

  • @trademark@fosstodon.org 2026-05-04 14:13

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

    Open ##2017404

  • @njonsson@hachyderm.io 2026-05-04 14:21

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

    Open ##2017405

  • @ttt@mastodon.social 2026-05-04 14:35

    @b0rk https://stephango.com/flexoki

    Open ##2017409

  • @willywongi@indieweb.social 2026-05-04 14:49

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

    Open ##2017410

  • @gekitsu@toot.cat 2026-05-04 15:52

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

    Open ##2017411

  • @hrw@society.oftrolls.com 2026-05-04 19:43

    @b0rk what about xkcd colours? https://xkcd.com/color/rgb/

    Open ##2017412

  • @lennybacon@infosec.exchange 2026-05-04 19:57

    @b0rk #Accessibility in mind I came across the works of Okabe and Ito. https://jfly.uni-koeln.de/color/ Also Paul Tol has done some nice work https://sronpersonalpages.nl/~pault/ All I need for a #css #color #palette “I use OKLCH btw” 😂 ist the new “I use Arch btw”

    Open ##2017416

  • @damianwalsh@mastodon.social 2026-05-04 20:51

    @b0rk Maybe not quite what you asked for, but when I wanted to step away from frameworks and refamiliarise with CSS, I had a lot of fun (and learnt a lot) going back to first principles with colour theory and applying some of that using modern CSS. I wrote it all up a while back in case it’s of interest. https://damianwalsh.co.uk/posts/dynamic-colour-palettes-with-oklch-and-css-custom-properties/ #CSS #colourtheory

    Open ##2017417

  • @misterdave@tilde.zone 2026-05-05 00:44

    @b0rk not css specific (would require minor wrangling for that user) but a collection of palettes for various purposes are at https://phillips.shef.ac.uk/pub/cpt-city/ (edit, changed link to a more useful source) and in my esoteric color scheme collection i always have cubehelix https://people.phy.cam.ac.uk/dag9/CUBEHELIX/cubetry.html in case that's handy to you

    Open ##2017418