Generator si convertor de culori HEX, RGB si HSL
Instrumentul de culori te ajuta sa alegi o nuanta si sa vezi imediat reprezentarile ei in HEX, RGB si HSL. Poti introduce manual un cod #RRGGBB, poti folosi selectorul vizual al browserului si poti copia rapid valorile pentru CSS, design tokens, documentatie sau prototipuri. Previzualizarea arata culoarea curenta, iar rezultatele sunt actualizate imediat pentru formatul hexazecimal, canalul RGB, reprezentarea HSL, numele CSS atunci cand exista o potrivire exacta si culoarea complementara.
HEX este forma foarte folosita in CSS si design: fiecare pereche de caractere descrie rosu, verde si albastru in baza 16. RGB exprima aceeasi informatie cu valori de la 0 la 255 pentru fiecare canal, ceea ce este usor de inteles cand ajustati luminozitatea sau amestecul de culoare. HSL descrie nuanta in grade, saturatia si luminozitatea in procente; de aceea este comod pentru variante precum o culoare mai deschisa, mai inchisa sau mai putin saturata.
Calculatorul normalizeaza codurile introduse si accepta forma scurta #RGB, pe care o extinde la #RRGGBB atunci cand este valida. Daca textul nu respecta formatul, rezultatul nu se schimba pana cand valoarea devine corecta. Pentru numele CSS, potrivirea este exacta: daca #000000 este black sau #ffffff este white, numele poate fi afisat; pentru nuante apropiate, dar nu identice, campul ramane gol. Aceasta abordare evita etichetarea gresita a culorilor personalizate.
Culoarea complementara se calculeaza prin deplasarea nuantei HSL cu 180 de grade si apoi transformarea rezultatului inapoi in HEX. Complementara poate fi utila pentru accente, hover states, grafice sau contraste vizuale, dar nu garanteaza automat accesibilitate. Pentru text si elemente interactive, verificati raportul de contrast, mai ales cand folositi culori deschise pe fundal alb sau culori saturate pentru texte mici.
Instrumentul este potrivit pentru designeri, dezvoltatori frontend si creatori de continut care au nevoie sa converteasca rapid valori intre formate. In proiecte mari, folositi rezultatele impreuna cu o paleta controlata, variabile CSS si reguli de accesibilitate. Daca o culoare trebuie sa respecte identitatea unui brand, copiati codul oficial si verificati manual ca nu a fost modificat prin conversii succesive. Pentru explorare rapida, acest generator ofera o cale simpla de la o nuanta vizuala la cod CSS reutilizabil.
Inainte sa salvezi o culoare intr-o biblioteca de componente, verifica si starea hover, focus, disabled si varianta pe fundal inchis. O singura valoare HEX nu descrie intreaga experienta vizuala. Conversiile din instrument sunt utile pentru cod, dar decizia finala trebuie sa tina cont de contrast, consistenta cu paleta existenta si rolul semantic al culorii in interfata.
Comentarii