Convertor de culori

Convertorul de culori este un instrument gratuit care transformă o culoare introdusă în format HEX, HEX alpha, RGB, RGBA, HSV, HSL sau HSLA în mai multe formate de culoare echivalente.

Ce formate de culoare pot converti?

Poți introduce o valoare HEX, HEX alpha, RGB, RGBA, HSV, HSL sau HSLA și poți vedea valorile corespunzătoare în fiecare format acceptat. Conversia este utilă atunci când o specificație de design, o foaie de stil sau un API terț reprezintă aceeași culoare în mod diferit.

• HEX reprezintă canalele roșu, verde și albastru prin perechi hexazecimale, de obicei sub forma #RRGGBB.
• HEX Alpha adaugă un canal de opacitate. În sintaxa CSS modernă, acesta apare frecvent sub forma #RRGGBBAA.
• RGB folosește valori pentru canalele roșu, verde și albastru, de regulă cuprinse între 0 și 255.
• RGBA adaugă transparența alpha la RGB.
• HSV descrie nuanța, saturația și valoarea. Este folosit frecvent în selectoarele de culori, dar nu este o funcție de culoare CSS standard.
• HSL descrie nuanța, saturația și luminozitatea. CSS acceptă direct formatul HSL.
• HSLA este formatul HSL cu o valoare alpha.

RGB și HSL sunt descrieri matematice diferite ale aceleiași culori, nu culori diferite. Conversia schimbă modul de reprezentare, păstrând culoarea dorită cât mai fidel posibil, în limitele formatului de destinație.

Cum folosesc convertorul de culori?

Introdu o valoare completă de culoare în câmpul Culoare, folosind unul dintre formatele acceptate, apoi citește sau copiază valorile generate din câmpurile de ieșire.

1. Copiază exact valoarea sursă, inclusiv semnul # de la început, virgulele, parantezele, semnele procentuale sau componenta alpha, dacă este cazul.
2. Introdu valoarea în câmpul Culoare.
3. Consultă valorile echivalente afișate în câmpurile HEX, HEX Alpha, RGB, RGBA, HSV, HSL și HSLA.
4. Alege unul dintre formatele de culoare acceptate de sistemul de destinație. Pentru o regulă CSS, opțiunile obișnuite sunt HEX, RGB, RGBA, HSL și HSLA. HSV este folosit mai des în interfețele de editare și în calculele referitoare la culori.

Conversia este efectuată pe server. Valoarea introdusă este trimisă către server prin HTTPS și nu este stocată. Deși o culoare individuală conține rareori informații sensibile, înainte de a o trimite unui serviciu online, verifică dacă face parte dintr-o paletă nepublicată sau dintr-un set confidențial de tokenuri de design.

Spațiile și semnele de punctuație fac parte din sintaxa RGB, HSL și a formatelor similare, iar semnele procentuale diferențiază valorile exprimate în procente. Un număr fără altă sintaxă, o valoare goală sau un text arbitrar nu identifică o culoare. Nici textul cu diacritice sau scris cu alte alfabete decât cel latin nu are o semnificație definită în aceste formate numerice.

Cum interpretez valorile convertite?

Fiecare rezultat este o altă notație pentru aceeași culoare. Acordă o atenție deosebită intervalelor canalelor, procentelor și transparenței alpha. Câmpul pe care trebuie să îl copiezi depinde de notația de culoare acceptată de sistemul în care vei folosi valoarea.

În formatul HEX cu șase cifre, prima pereche reprezintă roșul, a doua verdele, iar a treia albastrul. De exemplu, #336699 conține valorile hexazecimale 33, 66 și 99 pentru cele trei canale, echivalente cu valorile RGB zecimale 51, 102 și 153.

Nuanța este exprimată în mod normal ca un unghi pe cercul cromatic. Saturația și luminozitatea sau valoarea sunt de obicei exprimate în procente. Luminozitatea din HSL și valoarea din HSV se calculează diferit, așadar procentele lor nu trebuie comparate ca și cum ar măsura aceeași proprietate.

Alpha descrie opacitatea. O culoare complet opacă nu necesită un format care acceptă alpha, dar una semitransparentă are nevoie de acest canal. Dacă copiezi o culoare RGBA sau HSLA într-un format RGB, HSL ori HEX cu șase cifre, notația de destinație nu are unde să înregistreze canalul alpha.

Acest convertor nu este prezentat ca un instrument de validare a sintaxei care oferă mesaje detaliate de diagnosticare. Nu te baza pe el pentru a identifica exact caracterul greșit dintr-o valoare invalidă. Printre erorile frecvente de sintaxă se numără lipsa semnului # în HEX, parantezele fără pereche, omiterea semnelor procentuale, o valoare alpha în afara intervalului așteptat sau combinarea regulilor pentru canalele HSL și RGB.

Exemple de conversie a culorilor

Un exemplu simplu arată relația dintre HEX, RGB, HSL și HSV. Roșul pur poate fi scris în următoarele forme echivalente.

• Valoare HEX introdusă #ff0000
• Echivalent RGB rgb(255, 0, 0)
• Echivalent HSL hsl(0, 100%, 50%)
• Echivalent HSV hsv(0, 100%, 100%)

Pentru o culoare mai puțin saturată, #336699 este echivalent cu rgb(51, 102, 153). Reprezentarea sa HSL este hsl(210, 50%, 40%), iar reprezentarea HSV are o nuanță de 210 grade, o saturație de aproximativ 66.7% și o valoare de 60%. O interfață poate rotunji valorile zecimale sau poate folosi spațiere diferită fără să schimbe semnificația practică.

Transparența oferă un alt exemplu simplu. rgba(255, 0, 0, 0.5) și hsla(0, 100%, 50%, 0.5) descriu ambele roșul cu opacitate de 50%. Conform convenției CSS uzuale pentru HEX cu opt cifre, valoarea corespunzătoare este #ff000080, unde 80 reprezintă octetul alpha cuantizat.

Când merită să convertești o culoare?

Conversia merită făcută atunci când aplicația de destinație solicită altă notație sau când o altă reprezentare simplifică depanarea. Printre situațiile obișnuite se numără transformarea unei valori din Figma într-o proprietate CSS personalizată, verificarea unei valori RGBA găsite în Chrome DevTools, pregătirea câmpurilor de culoare pentru datele trimise unui API sau examinarea datelor unei teme terțe înainte de publicare.

Conversia nu este de obicei necesară dacă notația existentă este deja acceptată de destinație. Trecerea de la HEX cu șase cifre la RGB doar pentru un fișier CSS citit automat aduce puține beneficii, iar conversiile repetate între formate pot introduce rotunjiri în valorile HSL sau HSV. De asemenea, nu adăuga un canal alpha dacă știi că toate culorile sunt complet opace.

Dacă vrei să alegi vizual o culoare, nu să transformi o valoare cunoscută, folosește Selectorul de culori. Conversia nu înlocuiește nici testarea contrastului, simularea diferitelor tipuri de daltonism sau gestionarea profilurilor de culoare. Valorile numerice echivalente nu dovedesc că textul din prim-plan respectă cerințele WCAG privind contrastul.

Întrebări frecvente

Convertorul acceptă denumirile CSS ale culorilor?

Nu. Formatele acceptate și documentate sunt HEX, HEX alpha, RGB, RGBA, HSV, HSL și HSLA, prin urmare denumiri precum red, rebeccapurple sau transparent nu apar ca valori de intrare acceptate. Transformă mai întâi denumirea culorii într-o valoare CSS numerică, apoi introdu rezultatul.

Pot introduce valori HEX din trei cifre?

Formatul HEX este acceptat, dar lungimile HEX compatibile nu sunt documentate. Pentru rezultate previzibile, extinde forma prescurtată, de exemplu din #369 în #336699. Același principiu se aplică formelor prescurtate din patru cifre care conțin o valoare alpha.

Pot lipi o declarație CSS întreagă în locul valorii culorii?

Introdu doar valoarea culorii, nu întreaga declarație. De exemplu, folosește #336699 în loc de color: #336699;, deoarece numele proprietății și punctul și virgula nu fac parte din culoare. Dacă ai copiat valoarea din JSON sau dintr-un fișier de configurare, elimină ghilimelele din jurul ei.

Rezultatul păstrează informațiile despre gama cromatică extinsă sau profilul de culoare?

Nu este menționat suportul pentru formate cu gamă cromatică extinsă sau pentru profiluri de culoare încorporate. Datele Display P3, Lab, LCH și ale profilurilor ICC conțin informații care nu pot fi exprimate prin câmpurile HEX, RGB, HSL și HSV disponibile. Folosește o aplicație cu gestionarea culorilor atunci când conversia trebuie să țină cont de profiluri.

De ce apar uneori zecimale în valorile convertite?

Calculele HSL și HSV pot produce procente fracționare chiar dacă valorile canalelor RGB sursă sunt numere întregi. Rotunjirea acestor valori poate modifica ușor o conversie ulterioară înapoi la RGB. Păstrează precizia disponibilă atunci când salvezi tokenuri de design și rotunjește numai dacă formatul de destinație sau standardul de programare o impune.