How Shadely builds your color scales
Shadely turns one color into a full set of OKLCH color scales, from 50 to 950, ready for Tailwind CSS. It is made by Groundwork Technologies. Try it on the palette generator.
Your color keeps its place
Your color lands on the shade it naturally belongs to. A light yellow is not forced to 500, and a deep navy is not made brighter than it is.
Even steps in every hue
Scales are built in OKLCH, where equal steps in lightness look equal across hues. The shape follows Tailwind v4's own palettes. Colors that do not fit on screen lose a little chroma and keep their lightness and hue, instead of being clipped.
Contrast you can check
Every number is computed from the exact hex values you export. Check each shade against the others in the pairing matrix, or switch on the AA option to adjust the shades that fall short.
Export to your stack
- Tailwind v4 theme and Tailwind v3 config
- CSS variables, modern CSS and SCSS
- JSON, W3C design tokens, Tokens Studio and Style Dictionary
- shadcn/ui theme, Flutter, Android, Jetpack Compose and iOS
Common questions
Is Shadely free?
Yes. Every feature works without paying or signing up.
Do I need an account?
No. Your palette lives in the page address, so you can share it as a link. Saved palettes stay in your browser.
Does it work with Tailwind v3?
Yes. Export a v3 config as ESM, CommonJS or TypeScript, or a Tailwind v4 theme block. Hex is safest for v3.
Which contrast standard does it use?
WCAG 2.2 is the default. APCA, the draft method for WCAG 3, is there as a second opinion.