Online Color Palette Generator

Space dabakar mel khaate color palettes banaiye, pasandeeda colors lock kijiye, phir HEX codes copy kijiye ya CSS variables, Tailwind aur JSON export kijiye. Sab kuch aapke browser mein banta hai aur kuch upload nahin hota.

Palettes aapke browser mein bante aur jaanche jaate hain, aur kuch upload nahin hota. Share link mein sirf # ke baad wale hisse mein color codes rehte hain, aur aapke mode, style aur size ke choices sirf isi device par yaad rakhe jaate hain.

Tailwind Color Generator se poore shade scales banaiye

Color Palette Generator ke baare mein

Color Palette Generator aise colors ka ek set banata hai jo aapas mein mel khaate hain. Space ya Generate button dabaiye aur do se das colors ka naya palette dikh jaata hai, jo poori tarah random ho sakta hai (colors jitna ho sake utna door-door rakhe jaate hain) ya base color ke aas-paas ki classic harmony par tika ho sakta hai: analogous, complementary, split-complementary, triadic, tetradic, monochromatic, shades aur tints. Jo color pasand aaye use lock kijiye aur baaki uske aas-paas badalte rahenge, undo se apne pichhle tees palettes tak waapas jaiye aur swatches ko kheenchkar naye order mein lagaiye. Har color ke saath uske HEX, RGB aur HSL values, sabse paas ka named color aur white aur black text ke saath uska exact WCAG contrast dikhta hai. Palette taiyaar hone par use HEX codes, CSS variables, SCSS, Tailwind snippet ya JSON ke roop mein copy kijiye, ya aisa link share kijiye jisme sirf color codes hon.

Features

  • Nau generation modes: random, analogous, complementary, split-complementary, triadic, tetradic, monochromatic, shades aur tints
  • Chuni hui style (any, vibrant, pastel, muted, dark ya light) mein random palettes, jinme colors hamesha saaf taur par ek-doosre se alag rakhe jaate hain
  • Base color field jo aapke brand color ya kisi pasandeeda shade ke aas-paas har harmony banata hai
  • Lock buttons jo chune hue colors ko apni jagah par rokte hain jabki baaki dobara bante hain, taaki aap palette ko kadam-dar-kadam nikhaar sakein
  • Do se das colors, kheenchkar ya arrow buttons se order badalna, aur pichhle 30 palettes tak undo aur redo
  • Har swatch par HEX, RGB aur HSL values, sabse paas ka named color aur white aur black text ka exact WCAG contrast
  • Contrast checker jo aapke palette ke kisi bhi text aur background jode ko AA aur AAA ke hisaab se aankta hai
  • HEX list, CSS variables, SCSS, Tailwind snippet ya JSON ke roop mein export, saath mein ek share link jisme sirf color codes rehte hain

Color Palette Generator kaise use karein

  1. Koi mode chuniye aur Random ke liye ek style bhi; agar palette kisi ek color ke aas-paas banana ho to base color jodiye
  2. Space ya Generate tab tak dabaiye jab tak koi pasandeeda color na dikh jaaye, phir use lock kijiye taaki baaki colors badalte rahen aur wo tika rahe
  3. Kisi swatch par click karke uska HEX code copy kijiye, RGB, HSL aur contrast ke liye uski details kholiye aur swatches ko kheenchkar manchaahe order mein rakhiye
  4. Kisi bhi jode par text contrast jaanchiye, phir Export kholiye aur palette ko CSS variables, SCSS, Tailwind ya JSON ke roop mein copy kijiye

Example

Input

Mode: Analogous · base color #2a9d8f · 5 colors

Output

#3d4dc3  #2b668a  #2a9d8f  #69d391  #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three

Analogous colors color wheel par ek-doosre ke bagal mein baithte hain, adhiktam 30 degrees ke faasle par. Contrast ratios WCAG formula se nikaale jaate hain, isliye har swatch batata hai ki us par kis color ka text rakhna hai.

Common errors aur troubleshooting

  • Space dabaane par naya palette nahin banta. — Space tabhi palette banata hai jab kisi button, link ya text field par keyboard focus na ho, kyunki wo space ko apne liye rakhte hain. Tab tab tak dabaiye jab tak kuch bhi highlight na rahe, ya Generate button par click kijiye.
  • Generate button grey hai. — Har color lock hai, isliye badalne ko kuch bacha hi nahin. Lock button ya L key se kam se kam ek color unlock kijiye.
  • Share kiye gaye palette ka link khaali ya alag palette kholta hai. — Colors address mein # sign ke baad wale hisse mein rehte hain. Agar kisi chat app ne link chhota kaat diya ho, to poora address dobara copy kijiye; # ke baad ka jo hissa do se das valid chhah-ank wale HEX codes na ho, use ignore kar diya jaata hai.
  • Tailwind snippet mere maujooda colors ko nahin badalta. — Ye theme.extend.colors ke andar ek palette group jodta hai. Use apne config ke colors object mein paste kijiye aur bg-palette-1 ya text-palette-3 jaisi classes use kijiye.

Aksar pooche jaane wale sawaal

Color Palette Generator mein harmony modes kaise kaam karte hain?
Har mode ek base hue se shuru karke color wheel par tay doori wale hues chunta hai: analogous colors adhiktam 30 degrees ke faasle par hote hain, complementary saamne wala hue leta hai, split-complementary uske dono bagal ke do hues, triadic teen hues ko 120 degrees ke antar par rakhta hai aur tetradic chaar hues ko 90 degrees ke antar par. Monochromatic, shades aur tints ek hi hue rakhkar uski lightness aur saturation badalte hain, aur Random colors ko jitna ho sake utna door-door failata hai.
Apne brand color ke aas-paas color palette kaise banaun?
Apna brand color base color ke roop mein type kijiye ya chuniye, phir koi harmony mode chuniye. Base palette mein rakha jaata hai aur sthir rehta hai, aur har baar Space dabaane par baaki colors uske aas-paas bante hain. Analogous, complementary aur triadic ke beech badalkar dekhiye ki aap palette ko brand color se kitna door le jaana chahte hain.
Color Palette Generator mein kuch colors rakhkar baaki kaise badalun?
Jo colors pasand hon unhe swatch ke lock button ya L key se lock kijiye. Lock kiya hua color apni jagah par rehta hai aur uske aas-paas naya palette banta hai, aur naya palette bura nikle to undo pichhle palette par lauta deta hai. Saare colors lock karne par Generate band ho jaata hai.
Color Palette Generator text contrast kaise jaanchta hai?
Ye WCAG formula use karta hai, jo do colors ki relative luminance ki tulna karta hai. Normal text ke liye AA mein kam se kam 4.5:1 aur AAA mein 7:1 ka ratio chahiye; bade text ke liye 3:1 aur 4.5:1. Har swatch white aur black text ka ratio dikhata hai, aur contrast checker palette ke kisi bhi text aur background jode ko aankta hai.
Palette ko CSS variables ya Tailwind mein export kaise karun?
Export panel kholiye aur koi format chuniye. CSS variables --color-1 se --color-5 wala :root block deta hai, SCSS $color variables deta hai, Tailwind theme.extend.colors mein paste karne ke liye ek palette group deta hai, aur JSON tatha HEX list saade arrays deti hain. Har ek ke liye copy button hai.
Kya main Color Palette Generator se banaya palette share kar sakta hoon?
Haan. Aapke browser ke address mein # ke baad hamesha maujooda colors rehte hain, jaise #264653-2a9d8f-e9c46a, aur Copy link use copy karta hai. Jo bhi use kholega use wahi palette dikhega. # ke baad ka hissa kabhi kisi server ko nahin bheja jaata, aur is device par sirf aapke mode, style aur size ke choices yaad rakhe jaate hain.

Related tools

Web aur DevOps ke aur tools

Web aur DevOps ke sabhi tools dekhein (27) · Saare tools