Convertor de culori (HEX, RGB, HSL)
Convertiți culorile între HEX (#RRGGBB), RGB (0–255) și HSL (nuanță, saturație, luminozitate) în timp real. Ajustați selectorul sau introdu valorile pentru a vedea toate formatele actualizate împreună - ideal pentru CSS, transferul Figma și ghidurile de marcă. HSL face ajustările intuitive (mai deschise/mai întunecate fără schimbare de nuanță) mai ușor decât editarea cifrelor hexadecimale.
Culoare
Rezultat
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
Cum se transformă culorile
1. Alege o culoare vizuală sau introdu valori HEX, RGB sau HSL.
2. Vedeți instantaneu valori echivalente în toate formatele acceptate.
3. Modificați luminozitatea HSL pentru stările de hover, păstrând în același timp nuanța mărcii.
4. Copiază formatul de care are nevoie stiva tău (#hex pentru CSS, rgb() pentru browserele moderne).
Exemple de conversie a culorilor
Marca albastru #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Hover întunecat: hsl(217, 84%, 45%) fără a ghici hex.
CSS rgb la HEX pentru SVG
rgb(255, 87, 51) → #FF5733 pentru umplere SVG și resurse de culoare Android XML.
Gri neutru pentru margini
hsl(220, 10%, 90%) → gri rece foarte deschis; creșteți ușor saturația pentru fundalurile cu interfețe de utilizare colorate.
Când să folosești acest instrument
• Când traduceți jetoane de design între HEX în Figma și HSL în variabilele CSS.
• Când construiești teme luminoase/întunecate consistente prin schimbarea luminozității HSL.
• Când documentezi paletele de mărci pentru dezvoltatori și marketeri.
Când să alegi altceva
• Când trebuie să verifică contrastul WCAG - folosești verificatorul de contrast.
• Când ai nevoie de CMYK sau Pantone pentru imprimare, folosești instrumente specifice pentru imprimare.
• Când generați degrade complet - folosești generatorul de gradient CSS.
Teoria culorilor pentru lucrul cu UI
Culorile complementare stau opus pe roata de nuanțe (între 180 ° una de cealaltă) — contrast ridicat, folosești cu moderație pentru CTA. Nuanțele analoge (±30°) se simt armonioase pentru tablourile de bord. Chrome UI neutru folosește adesea albastru sau gri cu saturație scăzută (hsl 220, 10%, 96%), mai degrabă decât #EEE pur, care poate arăta cald/rece pe diferite ecrane. Limitează paleta mărcii la o nuanță principală, 2-3 neutre și verzi/roșii semantici pentru statut.
Accesibilitatea începe la conversie
Un frumos #7C3AED violet pe alb poate să nu contrasteze pentru textul mic. După ce alege culorile aici, treceți perechile prim-plan/fond prin verificatorul de contrast. Preferați ajustările HSL pentru a remedia defecțiunile: închideți textul sau luminați fundalul, păstrând în același timp nuanța. Nu vă bazați doar pe culoare pentru erori - asociezi-vă cu pictograme și etichete (WCAG 1.4.1).
Întrebări frecvente
La ce este bun HSL?
Ajustarea luminozității și a saturației, menținând nuanța stabilă - de ex. primar, primar-hover, primar-dezactivat de la o valoare de nuanță.
Scurtătura HEX #RGB?
#F53 se extinde la #FF5533. Acceptăm hex de 3 sau 6 cifre (opțional #).
sRGB vs display-P3?
Acest instrument folosește sRGB, standard pentru CSS web. Ecranele cu gamă largă pot fi afișate ușor diferit.
Alfa/transparență?
HEX cu 8 cifre (#RRGGBBAA) și rgba() pot fi acceptate acolo unde instrumentul expune alpha - verifică câmpurile UI.
De ce sumele mele RGB arată greșit în hexadecimal?
Fiecare canal are 0–255 → două cifre hexadecimale. 255 = FF, nu „255” concatenat.
Datele mele sunt trimise către un server?
Nu.
Este gratuit acest instrument?
Da.