Tailwind Color Generator

Ek brand color ko OKLCH mein ek poore 50-950 Tailwind shade scale mein badlein, per-shade WCAG contrast ke saath, seedhe aapke browser mein.

Tailwind Color Generator poori tarah aapke browser mein chalta hai. Jo brand color aap enter karte hain aur jo shades generate hote hain woh aapke device par compute hote hain aur kabhi ArrayKit ko upload nahi hote.

CSS Color Converter kholein

Tailwind Color Generator ke baare mein

Tailwind Color Generator ek single brand color ko ek complete 50, 100, 200 … 900, 950 shade scale mein badal deta hai jise aap seedhe tailwind.config mein drop kar sakte hain. Hex values guess karne ke bajaye, yeh lightness ko OKLCH mein interpolate karta hai — ek perceptually uniform space — taaki har step evenly spaced lage, aur yeh aapke input ko uske nearest step par snap kar deta hai taaki palette mein sach mein aapka exact brand color ho. Har swatch apna hex plus black aur white ke against WCAG contrast ratio dikhata hai, taaki aap ek nazar mein bata sakein ki kaunse shades text ke liye safe hain. Poore scale ko ek theme.colors block ya CSS custom properties ke roop mein copy karein. Koi bhi CSS color paste karein — hex, rgb(), hsl(), ya rebeccapurple jaisa ek named color. Sab kuch aapke device par compute hota hai; jo colors aap enter karte hain woh kabhi browser se bahar nahi jaate.

Features

Tailwind Color Generator kaise use karein

  1. Apna brand color enter ya pick karein (hex, rgb(), hsl(), ya ek name)
  2. Ek color name set karein — yeh key ban jaata hai, jaise brand ya accent
  3. Text-safe steps dhoondhne ke liye per-shade WCAG contrast badges padhein
  4. tailwind.config aur CSS variables output ke beech toggle karein
  5. Block copy karein, ya ek single swatch ka hex grab karne ke liye us par click karein

Example

Input

#7c3aed  (name: brand)

Output

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

Ek violet hex ek OKLCH-spaced 50-950 scale mein expand hota hai jo brand ke roop mein keyed hai.

Common errors aur troubleshooting

Aksar pooche jaane wale sawaal

Tailwind Color Generator 50-950 scale kaise banata hai?
Yeh aapke color ko OKLCH mein convert karta hai, hue rakhta hai, gyarah Tailwind steps par lightness ramp karta hai, aur extremes ki taraf chroma taper karta hai. OKLCH perceptually uniform hai, isliye har step evenly spaced dikhta hai, plain HSL ramps ki tarah mids mein cluster nahi hota.
Mera brand color 500 ke bajaye 400 ya 600 par kyun land karta hai?
Generator aapke input ko us step par snap karta hai jiski target lightness uske sabse close ho aur wahan aapka exact color preserve karta hai. Ek lighter brand color 300-400 ke paas anchor hota hai aur ek darker 600-700 ke paas, isliye scale mein hamesha aapka type kiya color hota hai.
Har swatch par contrast numbers ka kya matlab hai?
Woh us shade ke pure black aur pure white ke against WCAG 2.x contrast ratios hain. Ek green badge kam se kam 4.5:1 hai (normal text ke liye AA) aur amber kam se kam 3:1 hai (large text ya UI ke liye AA). Text aur background pairings chunne ke liye unhe use karein.
Kya main hex ke bajaye rgb(), hsl(), ya ek named color paste kar sakta hoon?
Haan. Koi bhi CSS color string kaam karti hai — #7c3aed, rgb(124 58 237), hsl(262 83% 58%), ya rebeccapurple jaisa ek name. Tool use parse karta hai, OKLCH mein convert karta hai, aur scale usi tarah banata hai.
Main output ko apne project mein kaise use karoon?
tailwind.config block ko theme.extend.colors mein copy karein aur bg-brand-500 ya text-brand-800 jaise classes reference karein. Ya CSS variables version copy karein aur plain CSS mein kahin bhi var(--brand-500) use karein. color name field badal kar key rename karein.
Kya main jo colors enter karta hoon woh kahin bheje jaate hain?
Nahi. Poora scale — parsing, OKLCH math, contrast ratios, aur dono output formats — aapke browser mein compute hota hai. Jo brand color aap type ya pick karte hain woh kabhi aapke device se bahar nahi jaata aur ArrayKit ko upload nahi hota.

Related tools

Saare ArrayKit tools