# Selector de culori

> Selector de culori cu roți HSV, HSL și RYB, armonii gata făcute și conversie HEX, RGB, HSL, OKLCH, CMYK plus token Tailwind apropiat. Gratuit, fără cont.

URL: https://acrafto.com/ro/selector-culori-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Alegeți o culoare pe roată, ajustați-o fin pe canvasul de saturație și citiți-o înapoi în orice format vorbește proiectul dumneavoastră, de la `#RRGGBB` la `oklch()`. Acest selector face și lucrurile pe care alte instrumente le omit: trei geometrii de roată, inclusiv roata pictorilor RYB, armonii care construiesc o paletă pentru dumneavoastră, un canal alfa și export cu un click al întregii palete ca variabile CSS, SCSS sau JSON. Totul calculat local, în browserul dumneavoastră.

## RYB sau RGB? Trei roți de culori, nu una singură

Selectorul **Mod roată** schimbă geometria roții în sine:

- **HSV** și **HSL** sunt roțile digitale: nuanțele sunt distribuite așa cum le amestecă lumina pe ecranele RGB. Diferă în modul în care se comportă canvasul pătrat: în HSV colțul cel mai luminos este nuanța pură, în HSL nuanțele pure sunt plasate la 50% luminozitate, cu alb deasupra.
- **RYB (a pictorilor)** aranjează nuanțele așa cum le-au învățat artiștii: roșu, galben și albastru ca primare, cu portocaliu, verde și mov între ele (vedeți [modelul RYB pe Wikipedia](https://ro.wikipedia.org/wiki/Modelul_cromatic_RGA)). Valoarea sa practică se vede în armonii: pe roata RYB, complementara roșului este **verde**, iar complementara albastrului este **portocaliu**, perechile clasice din pictură, în timp ce o roată digitală asociază roșul cu cyan. Dacă o paletă „complementară” dintr-un selector obișnuit v-a părut vreodată greșită, aceasta este explicația.

## Armonii de culori care construiesc paleta pentru dumneavoastră

Alegeți o regulă sub **Armonie de culori**, iar roata marchează culorile asociate, care apar ca o paletă gata făcută:

- **Complementară:** o singură culoare opusă. Cel mai puternic contrast, potrivită pentru un accent unic lângă culoarea principală de brand.
- **Split-complementară:** cei doi vecini ai complementarei. Aproape la fel de mult contrast, dar mult mai ușor de echilibrat.
- **Triadică:** trei nuanțe distribuite uniform. Vie și totuși stabilă, atâta timp cât una domină și celelalte două se folosesc cu măsură.
- **Tetradică (pătrat):** patru nuanțe. Scheme bogate pentru ilustrații și grafice, greu de echilibrat într-o interfață de aplicație.
- **Analogă:** cei mai apropiați vecini. Combinație calmă pentru fundaluri și degradeuri.
- **Monocromatică:** o singură nuanță în mai multe niveluri de luminozitate. Cea mai sigură alegere pentru stările unui buton (hover, activ, dezactivat).

Copiați întreaga paletă dintr-un click, în formatul de care aveți nevoie: simplu **HEX**, **RGB**, **HSL**, **OKLCH**, **proprietăți custom CSS** gata de lipit (`--color-1: …`), variabile **SCSS** sau **JSON** pentru cod. Ca să verificați dacă paleta păstrează contrastul și pentru persoanele care disting mai greu culorile, faceți o captură de ecran și [convertiți-o în tonuri de gri](https://acrafto.com/ro/converteste-imagini-grayscale-online-gratuit/).

## Convertiți HEX, RGB, HSL, OKLCH și CMYK: lipiți orice, citiți totul

Câmpurile de introducere acceptă practic orice notație de culoare: `#f80`, `#ff8800`, hex pe 8 cifre cu alfa, `rgb()` / `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` sau nume de culoare CSS precum `rebeccapurple`. Indiferent ce introduceți, primiți înapoi șapte rezultate sincronizate: **HEX, RGB, HSL, HSV, LCH, OKLCH și CMYK**, fiecare cu propriul buton de copiere.

Trageți cursorul de **opacitate (alfa)** de sub previzualizare, iar rezultatele trec la formele lor transparente: `#RRGGBBAA`, `rgba()`, `hsla()`. Previzualizarea este afișată pe un fundal în carouri, ca să puteți evalua transparența dintr-o privire.

## Găsiți cel mai apropiat token Tailwind CSS

Două etichete ajutătoare sub previzualizare denumesc culoarea pentru dumneavoastră: cea mai apropiată **culoare CSS numită** (utilă pentru prototipuri rapide și pentru a vorbi despre culori) și cel mai apropiat **token Tailwind** (de ex. `orange-500`), astfel încât să rămâneți în sistemul dumneavoastră de design în loc să inventați valori izolate. Faceți clic pe oricare etichetă pentru a o copia.

Aceasta răspunde la întrebarea care apare la fiecare predare a unui design: un designer mi-a trimis un cod hex, care este cea mai apropiată clasă Tailwind? Potrivirea se calculează în raport cu paleta implicită a Tailwind CSS 4 (vedeți [documentația Tailwind](https://tailwindcss.com/docs/colors), în engleză), astfel încât tokenul obținut poate fi lipit direct într-un nume de clasă.

## Ce format ar trebui să folosiți?

| Format | Nume complet | Când se folosește? |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Standardul web.** Compact, universal suportat, ușor de copiat. 8 cifre adaugă alfa. |
| **RGB** | Red, Green, Blue | **Cum gândesc ecranele.** Trei canale de lumină, de la 0 la 255. Formatul așteptat de majoritatea API-urilor și de codul canvas. |
| **HSL** | Hue, Saturation, Lightness | **Pentru editare manuală de către oameni.** „Puțin mai deschis” sau „mai puțin saturat” înseamnă schimbarea unui singur număr. |
| **HSV** | Hue, Saturation, Value | **Software grafic.** Modelul din spatele selectoarelor din Photoshop și GIMP. |
| **LCH** | Lightness, Chroma, Hue | **Perceptual uniform.** Pași numerici egali arată ca pași vizuali egali, ceea ce HSL doar pretinde că face. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Alegerea CSS modernă.** Corectează schimbările de nuanță ale LCH în albastru. Suportat în toate browserele actuale și ideal pentru sisteme de tokenuri de design. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Orientare pentru print.** O conversie aproximativă utilă când discutați cu tipografia. Valorile finale depind de profilul de culoare al imprimantei. |

De ce este OKLCH mai uniform perceptual decât modelele mai vechi explică autorul spațiului Oklab, Björn Ottosson, în [articolul original](https://bottosson.github.io/posts/oklab/) (în engleză). Sintaxa și suportul în browsere sunt rezumate pe [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (în engleză). Cum funcționează modelul de tipar este descris în articolul [Modelul de culoare CMYK](https://ro.wikipedia.org/wiki/Modelul_de_culoare_CMYK) de pe Wikipedia.

## Detalii mici care economisesc timp

- **Istoricul se păstrează singur.** Ultimele 24 de culori cu care ați lucrat supraviețuiesc unei reîmprospătări a paginii, stocate doar în localStorage-ul browserului dumneavoastră, nicăieri altundeva.
- **Eyedropper.** În browserele cu API-ul EyeDropper (Chrome și Edge) puteți alege o culoare de oriunde de pe ecran, chiar și din afara ferestrei browserului. Pentru o culoare dintr-o fotografie sau dintr-un fișier cu logo, folosiți [pipeta online](https://acrafto.com/ro/selector-culori-imagine-online/), care funcționează în toate browserele.
- **Control de la tastatură.** Roata și canvasul de saturație răspund la săgeți pentru ajustări precise, la nivel de pixel.
- **Presetările** acoperă culorile de bază obișnuite, pentru un punct de plecare rapid.

---

## Întrebări frecvente (FAQ)

### Cum convertesc OKLCH în HEX?

Lipiți valoarea `oklch()` în câmpul OKLCH și toate celelalte rezultate se actualizează instantaneu, inclusiv HEX. Funcționează și invers: introduceți un cod HEX și citiți echivalentul `oklch()`. O singură observație: OKLCH poate descrie culori în afara gamutului sRGB, iar acestea sunt tăiate canal cu canal la ce poate afișa sRGB, așa că un `oklch()` cu saturație foarte ridicată și forma sa HEX nu vor arăta identic pe un ecran cu gamut larg.

### Este sigur să folosesc oklch() în CSS de producție?

Da. Toate versiunile actuale de Chrome, Edge, Firefox și Safari suportă `oklch()`, care a devenit notația preferată pentru tokenurile de design (Tailwind CSS 4 își definește întreaga paletă în acest format). Pentru browsere foarte vechi, oferiți pe rândul anterior o alternativă HEX. Acest instrument vă dă ambele valori.

### De ce se schimbă armoniile când trec pe roata RYB?

Pentru că „opusul" depinde de modul în care sunt aranjate nuanțele pe cerc. Roata RYB distribuie uniform primarele din pictură, astfel încât perechile complementare cad pe combinațiile la care se așteaptă pictorii: roșu și verde, albastru și portocaliu, galben și mov. Roțile HSV/HSL distribuie nuanțele după amestecul luminii RGB, asociind roșul cu cyan. Niciuna nu este greșită: RYB corespunde formării artistice tradiționale, HSV/HSL corespund modului în care funcționează ecranele.

### Pot avea încredere în valorile CMYK pentru print?

Tratați-le ca pe o orientare, nu ca literă de lege. Conversia reală pentru print depinde de [profilul ICC](https://en.wikipedia.org/wiki/ICC_profile) (în engleză) al imprimantei, de hârtie și cerneală. Aceeași culoare RGB se separă diferit pe hârtie cretată față de cea necretată. Valorile de aici folosesc o formulă standard care se apropie bine, dar proba finală rămâne în seama tipografiei.

### Unde este butonul eyedropper în Firefox sau Safari?

Este ascuns intenționat. [API-ul EyeDropper](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, în engleză) pe care se bazează butonul este implementat momentan doar în browserele bazate pe Chromium (Chrome, Edge, Opera). În celelalte browsere, toate celelalte funcții ale selectorului merg normal, doar preluarea culorii de pe ecran nu este disponibilă. Dacă aveți nevoie de o culoare dintr-o imagine, folosiți [pipeta online](https://acrafto.com/ro/selector-culori-imagine-online/), care funcționează în toate browserele.

### Este privat istoricul meu de culori?

Da. Istoricul este stocat în localStorage-ul browserului dumneavoastră, pe dispozitivul propriu. Nimic din ce alegeți, lipiți sau copiați nu este transmis. Întregul instrument este JavaScript rulat pe partea de client, lucru pe care îl puteți verifica urmărind tab-ul de rețea din instrumentele pentru dezvoltatori.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))