Proiectare web și CSS
Transformă o culoare dintr-un fișier de design sau dintr-un selector de capturi de ecran în codul hexadecimal necesar pentru foaia ta de stil.
Convertor RGB în HEX — Transformă valorile RGB în coduri hexazecimale și codurile hexazecimale în RGB, cu previzualizare în timp real.
Introduceți valorile numerice pentru roșu, verde și albastru, alegeți o culoare sau introduceți un cod hexazecimal și vizualizați simultan toate formatele: HEX, RGB și HSL. O previzualizare în timp real și o verificare a contrastului vă arată care culoare a textului se potrivește cel mai bine. Totul se execută direct în browserul dumneavoastră.
Convertește o culoare
Culorile tale rămân în browserul tău
Alegeți sau introduceți o culoare
Aa
Coduri de culori
HEX
–RGB (CSS)
–HSL (CSS)
–– Cea mai potrivită culoare pentru text
–Raportul de contrast
Ghidul
Ghid de conversie RGB în HEX: coduri de culori, HSL și contrast
Aflați cum funcționează codurile de culori și cum să alegeți perechi de culori ușor de distins.
Ce face un convertor RGB în HEX?
Ecranele reproduc toate culorile prin amestecarea luminii roșii, verzi și albastre. Sistemul RGB exprimă acest amestec sub forma a trei numere cu valori cuprinse între 0 și 255. Sistemul HEX exprimă aceleași trei numere în baza 16 sub forma unui cod scurt, cum ar fi #1F3A5F, care este cel utilizat de obicei în CSS, instrumentele de design și ghidurile de identitate vizuală.
Introduceți cele trei cifre, alegeți o culoare cu ajutorul selectorului sau lipiți un cod hexazecimal. Toate formatele se actualizează simultan, iar în plus veți obține o versiune HSL și o recomandare privind culoarea textului care se citește cel mai bine pe fundalul respectiv.
De ce transformă oamenii valorile RGB în HEX
Marca și documentele
Asigurați-vă că culorile mărcii sunt consecvente atât în fișierul cu logo-ul, cât și în prezentarea de diapozitive și pe site-ul web.
Accesibilitate
Verificați ce culoare a textului se potrivește cu fundalul și verificați raportul de contrast înainte de a publica.
Cum se transformă RGB în HEX
Fiecare dintre cele trei numere este transformat într-o valoare de două cifre în baza 16, apoi cele trei perechi sunt unite.
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
HEX: #1F3A5F
Sistemul de bază 16 utilizează cifrele de la 0 la 9 și literele de la A la F, unde A reprezintă 10, iar F reprezintă 15. Un cod scurt precum #FA0 este o formă prescurtată: fiecare cifră este dublată, deci acesta înseamnă #FFAA00.
Culori uzuale în format RGB și HEX
| Culoare | RGB | HEX |
|---|---|---|
| Negru | 0, 0, 0 | #000000 |
| Alb | 255, 255, 255 | #FFFFFF |
| Roșu | 255, 0, 0 | #FF0000 |
| Verde | 0, 255, 0 | #00FF00 |
| Albastru | 0, 0, 255 | #0000FF |
| Galben | 255, 255, 0 | #FFFF00 |
| Portocaliu | 255, 165, 0 | #FFA500 |
| Gri | 128, 128, 128 | #808080 |
Cum se utilizează convertorul RGB în HEX
- Introduceți valorile pentru roșu, verde și albastru sau faceți clic pe eșantionul de culoare pentru a utiliza selectorul de culori.
- Sau introduceți un cod hexazecimal în câmpul „Hex” pentru a face invers.
- Citiți codurile HEX, RGB și HSL și verificați raportul de contrast și cea mai potrivită culoare pentru text.
- Apăsați pe „Copiere” lângă formatul dorit.
Sfaturi simple pentru lucrul cu culorile
- Pentru ca textul să fie lizibil, încercați să obțineți un raport de contrast de cel puțin 4,5 : 1 pentru textul normal și de 3 : 1 pentru textul cu caractere mari.
- Codurile hexazecimale nu țin cont de majuscule și minuscule, așa că #1f3a5f și #1F3A5F reprezintă aceeași culoare.
- Simbolul # de la început este necesar în CSS, dar aici este opțional. Puteți insera codurile cu sau fără acesta.
- Ecranele și imprimantele redau culorile în mod diferit, astfel încât este posibil ca o culoare imprimată să nu corespundă cu cea pe care o vedeți pe ecran.
Restricții și confidențialitate
Confidențialitate
Culorile sunt convertite în browserul dumneavoastră. Nu se trimite nimic către serverul nostru și nu se stochează nimic. Pe dispozitivul dumneavoastră se memorează doar opțiunea cu litere mici.
Limitări
Instrumentul funcționează cu culori sRGB standard de 8 biți, cu valori cuprinse între 0 și 255 pe canal. Nu suportă transparența (RGBA sau cod hexazecimal de 8 cifre), CMYK pentru tipar sau spații de culoare cu gamă largă.
Întrebări frecvente
Întrebări frecvente despre convertorul RGB în HEX
Cum pot converti RGB în HEX?
Introduceți valorile pentru roșu, verde și albastru, fiecare cuprinsă între 0 și 255. Instrumentul convertește fiecare număr în două cifre în sistemul de numerație în baza 16 și le unește, astfel încât 31, 58, 95 devine #1F3A5F.
Cum pot converti codul HEX în RGB?
Lipiți codul hexazecimal în câmpul „Hex”. Cele trei valori RGB se completează automat. De exemplu, #FF8800 corespunde valorilor 255, 136, 0.
Codul hexazecimal trebuie să conțină semnul #?
Nu. Poți să-l introduci cu sau fără simbolul #, iar codurile scurte, cum ar fi #FA0, funcționează și ele. Rezultatul include întotdeauna simbolul #, așa că este gata de utilizare în CSS.
Ce înseamnă cele trei valori RGB?
Acestea reprezintă intensitatea luminii roșii, verzi și albastre, de la 0 (deloc) la 255 (maxim). 0, 0, 0 înseamnă negru, iar 255, 255, 255 înseamnă alb.
La ce servește valoarea HSL?
HSL descrie o culoare prin nuanță, saturație și luminozitate. Adesea este mai ușor să o reglezi manual, de exemplu pentru a face o culoare puțin mai deschisă, iar acest sistem funcționează direct în CSS.
Ce îmi indică raportul de contrast?
Acesta indică cât de bine se distinge textul negru sau alb pe fundalul dvs. Un raport de 4,5 : 1 sau mai mare reprezintă valoarea minimă obișnuită pentru textul normal, conform liniilor directoare privind accesibilitatea WCAG.
Pot include transparență?
Nu aici. Acest instrument gestionează doar culori opace, fără canal alfa. Pentru transparență, adaugă tu însuți o valoare alfa în rgba() din CSS-ul tău.
Datele mele sunt salvate sau transmise undeva?
Nu. Conversia se efectuează în browserul dumneavoastră și nicio informație nu părăsește dispozitivul dumneavoastră. Se memorează doar opțiunea dumneavoastră privind literele mici pentru data viitoare.
De la persoanele care folosesc acest instrument
Recenzii
Se încarcă recenziile…
Continuă
Mai multe instrumente în cutie
Pagina principală oferă zeci de alte instrumente gratuite care nu necesită o cheie API.
Generator de UUID-uri
Creează în bloc UUID-uri aleatorii de tip v4, v7 și v5.
Deschide instrumentulInstrument de eliminare a spațiilor albe
Eliminați spațiile în plus, tab-urile și rândurile goale.
Deschide instrumentulConvertor de unități
Convertește lungimea, greutatea, viteza și multe altele.
Deschide instrumentulConvertor de cifre romane
Convertește numerele în cifre romane și invers.
Deschide instrumentul