The future of CSS colors is OKLCH. It is a human friendly and powerful syntax to define colors. Currently it is only supported in Safari but modern browser support is coming soon.
To prepare for the future and get vivid CSS colors we can actually specify a whole color palette with a few lines of code and one PostCSS plugin.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
primary: {
50: "oklch(97% 0.3 17)",
100: "oklch(92% 0.3 17)",
200: "oklch(83% 0.3 17)",
300: "oklch(76% 0.3 17)",
400: "oklch(70% 0.3 17)",
500: "oklch(64% 0.3 17)",
600: "oklch(56% 0.3 17)",
700: "oklch(48% 0.3 17)",
800: "oklch(41% 0.3 17)",
900: "oklch(29% 0.3 17)"
},
},
},
},
variants: {
extend: {},
},
plugins: [],
};
.postcssrc
{
"plugins": {
"tailwindcss": {},
"@csstools/postcss-oklab-function": {}
}
}Resources
See the repository for a full example.