Convertor de culori

Instrumentul nostru de conversie a culorilor facilitează conversia între toate formatele majore de culori utilizate în web design, design grafic și tipar. Fie că trebuie să convertești un cod HEX în RGB pentru CSS, să traduci valori HSL pentru instrumentele de design sau să transformi RGB în CMYK pentru tipar, acest instrument gestionează toate conversiile în timp real cu previzualizare color live.

star 4.9
auto_awesome AI
New

Convertor de culori calculator

colorize Click to pick
#
R
G
B
HSL
hsl(217, 91%, 60%)
HSV / HSB
hsv(217, 76%, 96%)
CMYK (Print)
cmyk(76%, 47%, 0%, 4%)
CSS Snippets 
color: #3B82F6;
background: rgb(59, 130, 246);
border: 1px solid hsl(217, 91%, 60%);
Shades & Tints

lightbulb Tips

  • •HEX is most common for web/CSS
  • •HSL is best for creating variations
  • •CMYK is for print only
  • •#F00 is shorthand for #FF0000

How to Use the Convertor de culori

palette

Introduceți o culoare

Introdu un cod HEX (#FF5733), valori RGB (rgb(255,87,51)) sau valori HSL (hsl(11,100%,60%)) în orice câmp de introducere.

colorize

Folosește selectorul de culori

Dă clic pe eșantionul de previzualizare a culorii pentru a deschide selectorul nativ și a selecta vizual orice culoare.

content_copy

Copiază orice format

Dă clic pe butonul de copiere de lângă orice format de culoare pentru a-l copia în clipboard. Toate formatele se actualizează în timp real.

The Formula

Conversia culorilor utilizează transformări matematice între modelele de culoare. HEX este o reprezentare în baza 16 a RGB. HSL/HSV sunt reprezentări în coordonate cilindrice, care sunt mai intuitive pentru designeri. CMYK este utilizat în tipografie și reprezintă procente de cerneală.

HEX → RGB: R = parseInt(hex[1..2], 16), G = parseInt(hex[3..4], 16), B = parseInt(hex[5..6], 16)

lightbulb Variables Explained

  • HEX Cod de culoare hexadecimal din 6 cifre (de exemplu, #FF5733)
  • RGB Roșu (0-255), Verde (0-255), Albastru (0-255)
  • HSL Nuanță (0-360°), Saturație (0-100%), Luminozitate (0-100%)
  • HSV Nuanță (0-360°), Saturație (0-100%), Valoare (0-100%)
  • CMYK Cyan (0-100%), Magenta (0-100%), Galben (0-100%), Negru/Cheie (0-100%)

tips_and_updates Pro Tips

1

Codurile HEX sunt cel mai comun format pentru culorile web/CSS — includeți întotdeauna prefixul #

2

RGB este formatul nativ pentru ecrane — fiecare canal variază între 0 și 255

3

HSL este mai intuitiv pentru designeri — ajustați nuanța (Hue) pentru culoare, saturația pentru intensitate și luminozitatea (Lightness) pentru strălucire

4

CMYK este destinat exclusiv tiparului — culorile RGB/HEX pot arăta diferit atunci când sunt tipărite în CMYK

5

Folosiți HEX prescurtat (#F00) pentru culorile în care perechile se repetă (#FF0000)

6

Opacitate/canal alfa: folosiți rgba() sau hsla() pentru culori transparente

7

Culorile denumite în CSS (cum ar fi 'tomato', 'dodgerblue') corespund unor valori HEX specifice

Convertorul nostru de culori gratuit traduce instantaneu culorile între toate formatele majore. Fie că ești un dezvoltator web care are nevoie de conversia HEX în RGB, un designer care lucrează cu valori HSL sau pregătești fișiere pentru tipar cu CMYK, această unealtă gestionează toate conversiile de culori cu o previzualizare în timp real.

Convertor de culori HEX în RGB

HEX și RGB sunt cele mai comune două formate de culori de pe internet. Codurile HEX (#RRGGBB) sunt compacte și utilizate pe scară largă în CSS, în timp ce valorile RGB (0-255 pe canal) sunt utilizate în JavaScript și în uneltele de design.

Convertorul nostru din hex în rgb face conversia între aceste formate instantaneu, facilitând lucrul cu diverse unelte și baze de cod.

Convertor de culori HSL pentru designeri

HSL (Nuanță, Saturație, Luminozitate) este cel mai intuitiv model de culoare pentru designeri. Ajustează:

  • Nuanța pentru a schimba culoarea
  • Saturația pentru intensitate
  • Luminozitatea pentru strălucire

Convertorul nostru de culori HSL facilitează crearea de variații de culoare, construirea de palete și traducerea valorilor HSL în HEX sau RGB pentru implementare.

RGB în CMYK pentru design tipografic

Conversia culorilor de pe ecran (RGB) în culori pentru tipar (CMYK) necesită atenție, deoarece cele două modele de culoare funcționează diferit. RGB este aditiv (bazat pe lumină), în timp ce CMYK este substractiv (bazat pe cerneală).

Convertorul nostru RGB în CMYK oferă valori aproximative pentru tipar, deși rezultatele finale depind de imprimanta și hârtia ta.

Cum se convertește HEX în RGB (formulă)

Pentru a converti o culoare HEX în RGB, împarte codul din șase caractere (#RRGGBB) în trei perechi de câte două caractere și convertește-le pe fiecare din baza 16 (hexazecimal) în baza 10 (zecimal): R = 16 × d1 + d2 și așa mai departe pentru verde și albastru.

De exemplu, #FF5733 oferă FF = 255, 57 = 87, 33 = 51, adică rgb(255, 87, 51). Ambele notații descriu același spațiu de culoare sRGB definit de standardul IEC 61966-2-1 și menționat în specificația W3C CSS Color.

Fiecare canal se întinde pe intervalul 0–255 (8 biți), generând 256³ = 16.777.216 culori posibile. Forma prescurtată HEX (#F53) pur și simplu duplică fiecare cifră într-o pereche.

Cum să convertești RGB în HSL și HSV

RGB se convertește în HSL și HSV utilizând același prim pas: normalizează fiecare canal la 0–1 (împarte la 255), apoi găsește valoarea maximă și minimă. Nuanța (Hue) este aceeași în ambele modele, fiind derivată din canalul cu valoarea cea mai mare.

Pentru HSL, Luminozitatea = (max + min) / 2; pentru HSV, Valoarea = max. Saturația este calculată diferit: HSL împarte croma la 1 − |2L − 1|, în timp ce HSV împarte croma la max.

HSL și HSV sunt reamplasări cilindrice ale cubului RGB, standardizate în Modulul de Culoare CSS W3C. Designerii le preferă deoarece Nuanța, Saturația și Luminozitatea corespund modului în care oamenii descriu culoarea.

Codurile de culoare HEX explicate: 3, 6 și 8 cifre

Un cod de culoare HEX este o scurtătură hexadecimală pentru valorile canalului RGB, precedată de simbolul #.

  • Forma comună din șase cifre (#RRGGBB) codifică roșul, verdele și albastrul ca două cifre hexazecimale fiecare.
  • Scurtătura din trei cifre (#RGB) extinde fiecare cifră la o pereche, astfel încât #F53 este egal cu #FF5533.
  • Forma din opt cifre (#RRGGBBAA) și scurtătura din patru cifre adaugă un canal de alfa (opacitate), așa cum este definit în Modulul de Culoare CSS W3C Nivelul 4.

Sistemul hexazecimal este în baza 16, utilizând cifrele 0–9 și literele A–F, unde A = 10 și F = 15. Această notație compactă este motivul pentru care HEX domină selecția de culori din CSS și instrumentele de design.

sRGB, Gamă extinsă și Noțiuni de bază despre spațiul de culoare

Majoritatea valorilor HEX și RGB pe care le folosești pe web sunt sRGB, spațiul de culoare standard definit de IEC 61966-2-1 și presupus de CSS dacă nu este declarat un alt spațiu. sRGB acoperă o felie limitată din culorile pe care ochiul uman le poate vedea, motiv pentru care există spații cu o gamă mai largă, cum ar fi Display P3 și Rec. 2020, pentru ecranele moderne.

Modulul de Culoare CSS Nivelul 4 de la W3C adaugă funcții precum color() și oklch() pentru a atinge aceste game. Acest convertor funcționează în sRGB, care rămâne cel mai sigur și mai compatibil spațiu pentru lucrul de zi cu zi pe web și UI în toate browserele și dispozitivele.

Ce fac convertoarele de culoare? Utilizări comune în lumea reală

Convertoarele de culoare traduc o singură culoare între formate, astfel încât să funcționeze oriunde este nevoie.

  • Dezvoltatorii web convertesc HEX în RGB sau RGBA pentru a adăuga opacitate în CSS.
  • Designerii UI folosesc HSL pentru a genera nuanțe mai deschise și mai întunecate ale unei culori de brand ajustând doar Luminozitatea.
  • Echipele de tipar convertesc RGB în CMYK înainte de a trimite materialul grafic la tipografie, deoarece cerneala este subtractivă.
  • Instrumentele de vizualizare a datelor și de accesibilitate folosesc aceste valori pentru a verifica rapoartele de contrast în raport cu ghidurile WCAG de la W3C.

Un convertor elimină matematica manuală în baza 16 și menține o culoare consecventă în cod, fișiere de design și tipar.

Culorile numite în CSS și cum se mapează în HEX

CSS definește 148 de culori numite, cum ar fi tomato (#FF6347), dodgerblue (#1E90FF) și rebeccapurple (#663399), fiecare fiind un alias exact pentru o anumită valoare HEX sRGB. Aceste nume sunt standardizate în Modulul de Culoare CSS W3C și acceptate de fiecare browser modern.

Ele sunt convenabile pentru prototipuri, dar reprezintă doar un subset mic din cele 16,7 milioane de culori accesibile prin HEX și RGB.

Deoarece o culoare numită este egală cu un cod HEX fix, convertoarele pot afișa cea mai apropiată culoare numită pentru orice intrare. Culorile cu cuvinte cheie nu țin cont de majuscule și minuscule în CSS, astfel încât 'DodgerBlue' și 'dodgerblue' se randează identic.

Greșeli comune de conversie a culorilor de evitat

Evită aceste greșeli frecvente de conversie a culorilor:

  • Cea mai frecventă greșeală este omiterea prefixului # sau împărțirea incorectă a perechilor HEX, ceea ce corupe rezultatul RGB.
  • O alta este tratarea HSL și HSV ca fiind identice: a treia componentă a acestora (Luminozitate vs. Valoare) diferă, așa că 50% Luminozitate nu înseamnă 50% Valoare.
  • Așteptarea ca conversia RGB-la-CMYK să fie exactă provoacă surprize la tipărire, deoarece ieșirea CMYK depinde de imprimantă, cerneală și hârtie, iar matematica este doar o aproximație conform standardelor sRGB și profilului de tipărire.
  • Rotunjirea prea devreme atunci când se convertește prin HSL și înapoi poate, de asemenea, să altereze culoarea.
  • În cele din urmă, uitarea canalului alfa elimină transparența atunci când se trece între RGB și RGBA sau #RRGGBBAA.

HEX vs RGB vs HSL vs CMYK: Ce format să folosești

Fiecare format de culoare se potrivește unei sarcini diferite.

  • HEX (#RRGGBB) este cel mai compact și este implicit pentru CSS și predarea designului.
  • RGB (0–255 per canal) este cel mai ușor de citit și manipulat în JavaScript și reflectă modul în care ecranele emit lumină în mod aditiv.
  • HSL (Nuanță, Saturație, Luminozitate) este cel mai bun pentru construirea paletelor și ajustarea intuitivă a nuanțelor.
  • CMYK (Cyan, Magenta, Galben, Negru) este rezervat pentru tipar, unde culoarea este cerneală subtractivă pe hârtie.

Toate formatele pentru ecran împărtășesc spațiul sRGB definit de IEC 61966-2-1 și Modulul de Culoare CSS W3C, astfel încât HEX, RGB și HSL sunt complet interschimbabile; doar CMYK necesită o conversie aproximativă, dependentă de dispozitiv.

Frequently Asked Questions

sell

Tags

color converter hex to rgb rgb to hex hex to hsl hsl to hex color code converter hex color converter rgb color converter
verified

Data sourced from trusted institutions

All formulas verified against official standards.

W3C CSS Color Module Level 4 open_in_new IEC 61966-2-1 (sRGB) open_in_new MDN Web Docs - CSS color value open_in_new Unicode Consortium open_in_new W3C WCAG Color Contrast open_in_new