Convertor Culori — Convertor HEX, RGB, HSL Online _

Ce este conversia culorilor?

Fiecare culoare pe care browserul tău o redează este în cele din urmă un triplet sRGB — trei numere între 0 și 255 pentru canalele roșu, verde și albastru, plus un alpha opțional. Specificația CSS Color Level 4 definește mai multe formate text care fac un drum dus-întors la același triplet, plus spațiul uniform perceptiv OKLCH. Acest instrument citește oricare dintre ele, le convertă pe toate și raportează raportul de contrast WCAG 2.1 față de o a doua culoare, astfel încât să poți livra interfețe accesibile cu încredere.

Cum funcționează conversia culorilor?

Conversia este o serie de transformări liniare și neliniare bine definite. Fiecare pas rulează în browserul tău — nicio intrare nu ajunge vreodată la serverele noastre:

1. Intrarea ta este analizată. Instrumentul detectează automat HEX de 3, 4, 6 sau 8 cifre, formele funcționale rgb()/rgba()/hsl()/hsla()/hsv()/hwb() fie în sintaxa veche cu virgulă, fie în sintaxa modernă cu slash-alpha, sau oricare dintre cele 150 de culori CSS numite (rebeccapurple inclus).
2. Culoarea analizată este normalizată la sRGB canonic — patru numere flotante {r, g, b, a} fiecare în intervalul 0–1. Aceasta este singura sursă de adevăr din care este derivat fiecare format de ieșire.
3. HEX provine din rotunjirea fiecărui canal la valoarea sa de octet 0–255 și unirea cifrelor hex. RGB / RGBA printează aceiași octeți. HSL și HSV aplică algoritmii standard W3C de coordonate cilindrice; HWB derivă nuanța din HSV, albul din min(r, g, b) și negrul din 1 - max(r, g, b).
4. CMYK este o aproximare naivă — k = 1 - max(r, g, b), apoi c, m, y din canalele reziduale. Este potrivită pentru previzualizarea pe ecran, dar nu pentru tipărire: ieșirea CMYK reală necesită un profil ICC pe care acest instrument nu îl încorporează intenționat.
5. OKLCH urmează calea directă css-color-4: sRGB este liniarizat, înmulțit prin matricea LMS, rădăcină cubică, înmulțit prin matricea LMS-to-OKLab și în final convertit din OKLab rectangular în OKLCH polar. OKLCH este uniform perceptiv, ceea ce îl face spațiul potrivit pentru proiectarea paletelor care arată echilibrate pentru ochiul uman.

De ce să folosești acest convertor de culori?

• Confidențialitate: fiecare conversie rulează în browserul tău folosind JavaScript simplu. Culoarea pe care o lipești nu părăsește niciodată dispozitivul tău, ceea ce contează pentru munca de brand nelansată, sistemele interne de design și machetele clienților sub NDA.
• Transfer designer-dezvoltator: lipește HEX-ul din Figma și citește înapoi șirul rgb() pentru o configurație Tailwind, șirul hsl() pentru o proprietate CSS personalizată sau șirul oklch() pentru o paletă modernă — fiecare format într-un singur loc, fără copiere între file.
• Acuratețe WCAG: verificatorul de contrast folosește formula exactă de luminozitate relativă WCAG 2.1 și pragurile publicate AA (4.5 / 3.0) și AAA (7.0 / 4.5) pentru text normal și mare. Raportul raportat se potrivește cu calculatoarele manuale cu o marjă de 0.01.
• Derivare mod întunecat și paletă: HSL și OKLCH expun luminozitatea ca un singur canal, astfel încât este simplu să deplasezi o culoare de brand în sus sau în jos pe axa luminozității pentru a deriva token-uri de mod întunecat potrivite sau pentru a genera o rampă de paletă de 10 trepte dintr-un singur sămânță.

Care sunt aplicațiile comune ale conversiei culorilor?

Conversia culorilor apare în dezvoltarea web, design și munca de accesibilitate:

• Sisteme de design: convertirea unui HEX de brand în token-urile HSL și OKLCH potrivite pentru o scală de proprietăți CSS personalizate, apoi verificarea că fiecare combinație de token-uri promovează WCAG AA față de fundalul paginii.
• Audituri de accesibilitate: lipirea unei perechi de prim-plan și fundal dintr-un ecran real de produs și citirea raportului de contrast plus verdictelor AA/AAA pentru text cu greutate normală și mare dintr-o singură privire.
• Drumuri dus-întors între instrumente: extragerea unei culori dintr-un selector de captură de ecran (HEX), lipirea ei aici și copierea șirului hsl() sau oklch() direct în Tailwind, token-uri Figma sau o temă CSS-in-JS.

Cum arată un exemplu de conversie a culorilor?

Preia faimosul rebeccapurple. Căutarea culorii numite îl rezolvă la #663399. Conversia RGB dă rgb(102, 51, 153). Conversia HSL dă hsl(270, 50%, 40%) — o nuanță violet, jumătate saturată, patru zecimi luminoasă. Verificarea acelei culori împotriva albului pur cu instrumentul de contrast returnează un raport aproape de 7.39, care depășește AAA (7.0) pentru text normal și AAA (4.5) pentru text mare — o alegere puternică și accesibilă de prim-plan. Parcurgerea dus-întors a #663399 prin RGB → HSL → RGB → HEX returnează șirul original exact, octet cu octet.

Folosește acest convertor ca referință rapidă pentru orice culoare pe care o întâlnești — în cod, în fișiere de design sau într-o captură de ecran — și verificatorul de contrast ca o verificare de bun-simț înainte de lansare. Totul rulează local, nimic nu este înregistrat, iar matematica de conversie urmează specificațiile publicate W3C și WCAG, astfel încât numerele se potrivesc cu ceea ce ar raporta instrumentul tău de audit sau instrumentele de dezvoltare ale browserului.