{ "@context": "https://schema.org", "@id": "https://aggr.aymericbeaumet.com/items/jvns-ca/2026-05-04-links-to-css-colour-palettes/#webpage", "@type": [ "WebPage", "ArchiveComponent" ], "articleBody": "A while back I decided to stop using Tailwind for new projects and to just write vanilla CSS instead.\n\nBut one thing I missed about Tailwind was the [colour palette](https://v2.tailwindcss.com/docs/customizing-colors#color-palette-reference) ([here as CSS](https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe)). If I wanted a light blue I could just use `blue-100` and if I didn’t like it maybe try `blue-200` or `blue-50`. I’m not very good with colours so it makes a big difference to me to have a reasonable colour palette that somebody who is better at colour than me has thought about.\n\nBut I’m also a little tired of those Tailwind colours, so I asked on Mastodon today what other colour palettes were out there. And then a friend said they wanted links to those colour palettes, so here’s a blog post so my friend can see them, and all the rest of you too :)\n\n### [my favourites](https://jvns.ca/blog/2026/05/04/css-colour-palettes/#my-favourites)\n\nThe ones I liked the most were:\n\n- [uchū](https://uchu.style/) ([css file](https://code.webb.page/nevercease/uchu.git/tree/dist/uchu.css), [FAQ](https://code.webb.page/nevercease/uchu.git/about/documentation/FAQ.md))\n- [flexoki](https://stephango.com/flexoki) ([css file](https://github.com/kepano/flexoki/blob/main/css/flexoki.css))\n- [reasonable colours](https://www.reasonable.work/artifacts/ra005-reasonable-colors/), which seems to have a focus on accessibility ([css file](https://github.com/matthewhowell/reasonable-colors/blob/master/reasonable-colors.css))\n\n### [more colour palettes](https://jvns.ca/blog/2026/05/04/css-colour-palettes/#more-colour-palettes)\n\n- [web awesome](https://webawesome.com/docs/color-palettes)\n- [radix](https://www.radix-ui.com/colors/docs/palette-composition/scales)\n- [US web design systems](https://designsystem.digital.gov/design-tokens/color/system-tokens/)\n- [material design](https://m2.material.io/design/color/the-color-system.html)\n\n### [colourscheme generators](https://jvns.ca/blog/2026/05/04/css-colour-palettes/#colourscheme-generators)\n\nFolks also linked to a bunch of colour palette generators\n\n- [harmonizer](https://harmonizer.evilmartians.com/)\n- [tints.dev](https://www.tints.dev/)\n- [coolors](https://coolors.co/)\n- [colorpalette.pro](https://colorpalette.pro/)\n\nI’ve always found these types of generators too hard to use but maybe one day I will get better enough at colour that I’m able to use a colour palette generator successfully so I’ll leave those links there anyway.\n\nand more colour tools:\n\n- [colorhexa](https://www.colorhexa.com/E97339) has some info about colorblindness\n\n## [`oklch`](https://jvns.ca/blog/2026/05/04/css-colour-palettes/#oklch)\n\n[Generative colors with CSS](https://gomakethings.com/generative-colors-with-css/) gives an example of how to use the `oklch` CSS function to dynamically generate colors.\n", "authors": [], "captured_at": "2026-09-19T21:30:23.395188495+00:00", "category": "programming", "content_html": "

A while back I decided to stop using Tailwind for new projects and to just write vanilla CSS instead.

\n

But one thing I missed about Tailwind was the colour palette (here as CSS). If I wanted a light blue I could just use blue-100 and if I didn’t like it maybe try blue-200 or blue-50. I’m not very good with colours so it makes a big difference to me to have a reasonable colour palette that somebody who is better at colour than me has thought about.

\n

But I’m also a little tired of those Tailwind colours, so I asked on Mastodon today what other colour palettes were out there. And then a friend said they wanted links to those colour palettes, so here’s a blog post so my friend can see them, and all the rest of you too :)

\n

my favourites

\n

The ones I liked the most were:

\n\n

more colour palettes

\n\n

colourscheme generators

\n

Folks also linked to a bunch of colour palette generators

\n\n

I’ve always found these types of generators too hard to use but maybe one day I will get better enough at colour that I’m able to use a colour palette generator successfully so I’ll leave those links there anyway.

\n

and more colour tools:

\n\n

oklch

\n

Generative colors with CSS gives an example of how to use the oklch CSS function to dynamically generate colors.

\n", "content_markdown": "A while back I decided to stop using Tailwind for new projects and to just write vanilla CSS instead.\n\nBut one thing I missed about Tailwind was the [colour palette](https://v2.tailwindcss.com/docs/customizing-colors#color-palette-reference) ([here as CSS](https://gist.github.com/jvns/9e59b2cd1fe12601084ba78dded072fe)). If I wanted a light blue I could just use `blue-100` and if I didn’t like it maybe try `blue-200` or `blue-50`. I’m not very good with colours so it makes a big difference to me to have a reasonable colour palette that somebody who is better at colour than me has thought about.\n\nBut I’m also a little tired of those Tailwind colours, so I asked on Mastodon today what other colour palettes were out there. And then a friend said they wanted links to those colour palettes, so here’s a blog post so my friend can see them, and all the rest of you too :)\n\n### [my favourites](https://jvns.ca/blog/2026/05/04/css-colour-palettes/#my-favourites)\n\nThe ones I liked the most were:\n\n- [uchū](https://uchu.style/) ([css file](https://code.webb.page/nevercease/uchu.git/tree/dist/uchu.css), [FAQ](https://code.webb.page/nevercease/uchu.git/about/documentation/FAQ.md))\n- [flexoki](https://stephango.com/flexoki) ([css file](https://github.com/kepano/flexoki/blob/main/css/flexoki.css))\n- [reasonable colours](https://www.reasonable.work/artifacts/ra005-reasonable-colors/), which seems to have a focus on accessibility ([css file](https://github.com/matthewhowell/reasonable-colors/blob/master/reasonable-colors.css))\n\n### [more colour palettes](https://jvns.ca/blog/2026/05/04/css-colour-palettes/#more-colour-palettes)\n\n- [web awesome](https://webawesome.com/docs/color-palettes)\n- [radix](https://www.radix-ui.com/colors/docs/palette-composition/scales)\n- [US web design systems](https://designsystem.digital.gov/design-tokens/color/system-tokens/)\n- [material design](https://m2.material.io/design/color/the-color-system.html)\n\n### [colourscheme generators](https://jvns.ca/blog/2026/05/04/css-colour-palettes/#colourscheme-generators)\n\nFolks also linked to a bunch of colour palette generators\n\n- [harmonizer](https://harmonizer.evilmartians.com/)\n- [tints.dev](https://www.tints.dev/)\n- [coolors](https://coolors.co/)\n- [colorpalette.pro](https://colorpalette.pro/)\n\nI’ve always found these types of generators too hard to use but maybe one day I will get better enough at colour that I’m able to use a colour palette generator successfully so I’ll leave those links there anyway.\n\nand more colour tools:\n\n- [colorhexa](https://www.colorhexa.com/E97339) has some info about colorblindness\n\n## [`oklch`](https://jvns.ca/blog/2026/05/04/css-colour-palettes/#oklch)\n\n[Generative colors with CSS](https://gomakethings.com/generative-colors-with-css/) gives an example of how to use the `oklch` CSS function to dynamically generate colors.\n", "dateCreated": "2026-09-19T21:30:23.395188495+00:00", "date_created": "2026-05-04T00:00:00+00:00", "date_modified": "2026-05-04T00:00:00+00:00", "date_published": "2026-05-04T00:00:00+00:00", "description": "A while back I decided to stop using Tailwind for new projects and to just write vanilla CSS instead. But one thing I missed about Tailwind was the colour palette (here as CSS). If I wanted a light blue I could just use blue-100 and if I…", "external_url": "https://jvns.ca/blog/2026/05/04/css-colour-palettes/", "git": { "commit": "ebb0941c5c06a2ab2377342d607535262a3e969e", "path": "items/jvns-ca/2026/05/2026-05-04-links-to-css-colour-palettes.md", "permalink": "https://github.com/aymericbeaumet/aggr-instance/blob/ebb0941c5c06a2ab2377342d607535262a3e969e/items/jvns-ca/2026/05/2026-05-04-links-to-css-colour-palettes.md" }, "id": "urn:aggr:item:bb03cd9ff82ea660ea5f474262fefcc62e589f49", "isBasedOn": { "@id": "https://jvns.ca/blog/2026/05/04/css-colour-palettes/" }, "mainEntity": { "@id": "https://jvns.ca/blog/2026/05/04/css-colour-palettes/", "@type": "CreativeWork", "archivedAt": { "@id": "https://aggr.aymericbeaumet.com/items/jvns-ca/2026-05-04-links-to-css-colour-palettes/#webpage" }, "dateModified": "2026-05-04T00:00:00+00:00", "datePublished": "2026-05-04T00:00:00+00:00", "headline": "Links to CSS colour palettes", "timeRequired": "PT2M", "url": "https://jvns.ca/blog/2026/05/04/css-colour-palettes/", "wordCount": 268 }, "name": "Archived snapshot: Links to CSS colour palettes", "preview": null, "reading_minutes": 2, "replicated_at": null, "source": "jvns-ca", "source_name": "Julia Evans", "summary": null, "tags": [], "temporalCoverage": "2026-09-19T21:30:23.395188495+00:00", "title": "Links to CSS colour palettes", "url": "https://aggr.aymericbeaumet.com/items/jvns-ca/2026-05-04-links-to-css-colour-palettes/", "word_count": 268 }