Conversie de Culoare
#ffbf00
Amber
Variații
Scopul acestei secțiuni este de a produce cu acuratețe nuanțe (alb pur adăugat) și umbre (negru pur adăugat) ale culorii selectate în trepte de 10%.
Sfat Pro: Folosește umbre pentru stările de hover și umbre, nuanțe pentru evidențieri și fundaluri.
Umbre
Variații mai întunecate create prin adăugarea de negru la culoarea ta de bază.
Nuanțe
Variații mai deschise create prin adăugarea de alb la culoarea ta de bază.
Cazuri de utilizare comune
- • Stări componente UI (hover, activ, dezactivat)
- • Crearea de adâncime cu umbre și evidențieri
- • Construirea de sisteme de culori consistente
Sfat pentru sistemul de design
Aceste variații formează baza unei palete de culori coerente. Exportă-le pentru a menține consistența în întregul tău proiect.
Combinații de culori
Fiecare armonie are propria sa stare de spirit. Folosește armoniile pentru a genera idei de combinații de culori care funcționează bine împreună.
Cum să folosești
Dă clic pe orice culoare pentru a copia valoarea sa hex. Aceste combinații sunt dovedite matematic pentru a crea armonie vizuală.
De ce contează
Armoniile de culori creează echilibru și evocă emoții specifice în designurile tale.
Complement
O culoare și opusul său pe roata culorilor, +180 de grade de nuanță. Contrast ridicat.
Complementar divizat
O culoare și două adiacente complementului său, +/-30 de grade de nuanță de la valoarea opusă culorii principale. Îndrăzneț ca un complement direct, dar mai versatil.
Triadic
Trei culori distanțate uniform pe roata culorilor, fiecare la 120 de grade de nuanță. Cel mai bine este să permiți unei culori să domine și să folosești celelalte ca accente.
Analoge
Trei culori cu aceeași luminozitate și saturație, cu nuanțe adiacente pe roata culorilor, la 30 de grade distanță. Tranziții line.
Monocromatic
Trei culori cu aceeași nuanță, cu valori de luminozitate +/-50%. Subtil și rafinat.
Tetradic
Două seturi de culori complementare, separate de 60 de grade de nuanță.
Principiile teoriei culorilor
Echilibru
Folosește o culoare dominantă, susține cu una secundară și accentuează cu moderație.
Contrast
Asigură un contrast suficient pentru lizibilitate și accesibilitate.
Armonie
Culorile ar trebui să lucreze împreună pentru a crea o experiență vizuală unificată.
Verificator de contrast de culoare
Testează combinațiile de culori pentru a te asigura că îndeplinesc standardele de accesibilitate WCAG pentru lizibilitatea textului.
Culoare text
Culoare fundal
Contrast
Standarde WCAG
Verificator de contrast avansat
Ajustează fin cu glisoare, previzualizări multiple și altele
Toată lumea este un geniu. Dar dacă judeci un pește după abilitatea sa de a se cățăra într-un copac, va trăi toată viața crezând că este prost.