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ă.
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.
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.
Î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.