# Izbirnik barv

> Barvno kolo HSV, HSL in slikarski RYB, barvne harmonije in pretvorba HEX, RGB, HSL, OKLCH, CMYK. Najbližji Tailwind token. Brezplačno, brez namestitve.

URL: https://acrafto.com/sl/izbirnik-barv-splet/  
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.

Izberite barvo na kolesu, jo natančno prilagodite na ploskvi nasičenosti in svetlosti, nato pa jo preberite v vsakem zapisu, ki ga uporablja vaš projekt, od `#RRGGBB` do `oklch()`. Orodje ponuja tudi to, kar drugi izbirniki barv izpustijo: tri oblike kolesa, vključno s tradicionalnim slikarskim kolesom RYB, harmonije, ki same sestavijo paleto, prosojnost in izvoz cele palete v enem kliku kot CSS spremenljivke, SCSS ali JSON. Vse se izračuna v vašem brskalniku.

## RYB ali RGB? Tri barvna kolesa namesto enega

Preklopnik **Način kolesa** spremeni razporeditev odtenkov na kolesu:

- **HSV** in **HSL** sta digitalni kolesi. Odtenki so razporejeni tako, kot jih meša svetloba na zaslonu. Razlikujeta se po kvadratni ploskvi: pri HSV je najsvetlejši kot čisti odtenek, HSL pa čiste odtenke postavi na sredino svetlosti in belo nad njih.
- **RYB (slikarsko)** razporedi odtenke tako, kot jih poznajo slikarji: rdeča, rumena in modra kot osnovne barve, med njimi oranžna, zelena in vijolična ([model RYB na Wikipediji](https://sl.wikipedia.org/wiki/Barvni_model_RYB)). Razliko opazite predvsem pri harmonijah. Na kolesu RYB je komplement rdeče **zelena**, komplement modre pa **oranžna**, torej klasičen slikarski par. Digitalno kolo pari rdečo s cian. Če se vam »komplementarna« paleta iz običajnega izbirnika barv kdaj ni zdela prava, je to razlog.

## Barvne harmonije: paleta, ki se sestavi sama

V polju **Barvna harmonija** izberite pravilo. Kolo označi spremljevalne barve, spodaj pa se prikaže pripravljena paleta:

- **Komplementarna:** ena nasprotna barva. Najmočnejši kontrast, primerna za en sam poudarek ob glavni barvi znamke.
- **Razdeljeno komplementarna:** soseda nasprotne barve. Skoraj enako močan kontrast, a lažje uravnoteženje.
- **Triadna:** tri enakomerno razporejene barve. Živahna, a stabilna kombinacija, kadar ena prevladuje, drugi dve pa uporabite zmerno.
- **Tetradna (kvadrat):** štiri barve. Bogate sheme za ilustracije in grafe, v vmesniku aplikacije jih je težko uravnotežiti.
- **Analogna:** najbližji sosedi. Umirjena kombinacija za ozadja in prehode.
- **Monokromatska:** en odtenek v več stopnjah svetlosti. Najvarnejša izbira za stanja gumbov (ob prehodu miške, aktivno, onemogočeno).

Celotno paleto kopirate z enim klikom, in sicer v formatu, ki ga izberete: čisti **HEX**, **RGB**, **HSL**, **OKLCH**, za lepljenje pripravljene **CSS spremenljivke** (`--color-1: …`), **SCSS spremenljivke** ali **JSON** za kodo. Če želite hitro preveriti, ali barve palete ohranijo kontrast tudi za ljudi, ki težje ločijo odtenke, naredite posnetek zaslona in ga [pretvorite v sivine](https://acrafto.com/sl/pretvorba-slik-v-sivine-na-spletu/).

## Pretvorba HEX, RGB, HSL, OKLCH in CMYK: prilepite karkoli, dobite vse

Vnosna polja sprejmejo skoraj vsak zapis barve: `#f80`, `#ff8800`, osemmestni hex s prosojnostjo, `rgb()` in `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` in poimenovane barve CSS, kot je `rebeccapurple`. Ne glede na to, kaj vnesete, dobite sedem usklajenih izpisov: **HEX, RGB, HSL, HSV, LCH, OKLCH in CMYK**, vsakega z lastnim gumbom za kopiranje.

Drsnik **Neprosojnost (alfa)** pod predogledom preklopi izpise na prosojne zapise `#RRGGBBAA`, `rgba()` in `hsla()`. Predogled se izriše nad šahovnico, tako da prosojnost takoj vidite.

## Najbližji žeton Tailwind CSS za katero koli barvo

Dva pomožna napisa pod predogledom poimenujeta barvo: **najbližja poimenovana barva CSS** (uporabno za hitre prototipe) in **najbližji žeton Tailwind**, na primer `orange-500`. Tako ostanete znotraj svojega oblikovnega sistema in vam ni treba izmišljati enkratnih vrednosti. S klikom na napis ga kopirate.

To reši vprašanje, ki se pojavi pri vsaki predaji oblikovanja: oblikovalec mi je poslal hex kodo, kateri razred Tailwind ji je najbližji? Ujemanje se izračuna glede na privzeto paleto Tailwind CSS 4 (glejte [dokumentacijo Tailwinda](https://tailwindcss.com/docs/colors), v angleščini), zato lahko žeton takoj uporabite v imenu razreda.

## Kateri format barve uporabiti?

| Format | Polno ime | Kdaj ga uporabiti |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Privzeta izbira za splet.** Kratek, povsod podprt, enostaven za kopiranje. Osem mest doda prosojnost. |
| **RGB** | Red, Green, Blue | **Tako razmišljajo zasloni.** Trije svetlobni kanali od 0 do 255. Format, ki ga pričakuje večina API-jev in kode za canvas. |
| **HSL** | Hue, Saturation, Lightness | **Za prilagajanje na oko.** »Malo svetleje« ali »manj nasičeno« pomeni spremeniti eno samo številko. |
| **HSV** | Hue, Saturation, Value | **Grafični programi.** Model, na katerem temelji izbira barv v Photoshopu in GIMP-u. |
| **LCH** | Lightness, Chroma, Hue | **Zaznavna enakomernost.** Enaki številčni koraki so videti kot enaki vizualni koraki, kar HSL le navidezno obljublja. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Sodobna izbira za CSS.** Odpravi zamike odtenka pri modrih tonih, ki motijo LCH. Podpirajo ga vsi sodobni brskalniki, primeren je za oblikovne žetone. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Usmeritev za tisk.** Približna pretvorba za dogovor s tiskarno, končne vrednosti določi njen barvni profil. |

Zakaj je OKLCH zaznavno bolj enakomeren od starejših modelov, pojasni avtor prostora Oklab Björn Ottosson v [izvirnem članku](https://bottosson.github.io/posts/oklab/) (v angleščini). Skladnjo in podporo v brskalnikih povzema [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (v angleščini). Kako deluje tiskarski model, opisuje [Wikipedija pri geslu CMYK](https://sl.wikipedia.org/wiki/Barvni_model_CMYK).

## Malenkosti, ki prihranijo čas

- **Zgodovina se shrani sama.** Zadnjih 24 barv preživi osvežitev strani. Ostanejo le v pomnilniku vašega brskalnika in se nikamor ne pošiljajo.
- **Kapalka.** V brskalnikih z API-jem EyeDropper (Chrome in Edge) izberete barvo kjer koli na zaslonu, tudi zunaj okna brskalnika. Barvo s fotografije ali iz datoteke z logotipom poiščite v [spletni barvni kapalki](https://acrafto.com/sl/spletni-izbirnik-barv-iz-slike/).
- **Upravljanje s tipkovnico.** Kolo in ploskev nasičenosti in svetlosti se odzivata na smerne tipke, tako da barvo prilagodite v majhnih korakih.
- **Prednastavitve** ponudijo pogoste osnovne barve, kadar potrebujete le hiter začetek.

## Pogosto zastavljena vprašanja

### Kako pretvoriti OKLCH v HEX?

Vrednost `oklch()` prilepite v polje OKLCH in drugi izpisi, vključno s HEX, se takoj preračunajo. Deluje tudi obratno: vnesite HEX in preberite ustrezen `oklch()`. Ena opomba: OKLCH lahko opiše tudi barve zunaj obsega sRGB, te pa se obrežejo na tisto, kar sRGB lahko prikaže. Zelo nasičen `oklch()` zato na zaslonu s širokim barvnim obsegom ne bo videti enako kot njegova oblika HEX.

### Ali lahko oklch() uporabljam v produkcijskem CSS-ju?

Da. Vse trenutne različice Chroma, Edga, Firefoxa in Safarija podpirajo `oklch()`, ta pa je postal priljubljen zapis za oblikovne žetone (Tailwind CSS 4 vanj zapiše celotno paleto). Za zelo stare brskalnike pred njim dodajte HEX kot rezervo. To orodje vam da obe vrednosti.

### Zakaj se harmonije spremenijo, ko preklopim na kolo RYB?

Ker to, kar je »nasproti«, je odvisno od razporeditve odtenkov po krogu. Kolo RYB enakomerno razporedi pigmentne osnovne barve, zato komplementarni pari ustrezajo temu, kar poznajo slikarji: rdeča in zelena, modra in oranžna, rumena in vijolična. Kolesi HSV in HSL razporejata odtenke glede na mešanje svetlobe, zato parita rdečo s cian. Nobeno ni napačno: RYB ustreza likovni vzgoji, HSV in HSL pa temu, kar počnejo zasloni.

### Ali lahko zaupam vrednostim CMYK za tisk?

Vzemite jih kot usmeritev. Prava pretvorba za tisk je odvisna od [barvnega profila](https://en.wikipedia.org/wiki/ICC_profile) (v angleščini) tiskalnika, papirja in črnila. Ista barva RGB je videti drugače na kredni in na nekredni podlagi papirja. Vrednosti tukaj izračuna standardna formula, ki vas pripelje blizu, končni natis pa je stvar tiskarne.

### Kje je gumb za kapalko v Firefoxu ali Safariju?

Namenoma je skrit. [API EyeDropper](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, v angleščini), na katerem temelji gumb, trenutno znajo le brskalniki na osnovi Chromiuma (Chrome, Edge, Opera). Vse druge funkcije orodja delujejo povsod, manjka le izbira barve z zaslona. Če potrebujete barvo s slike, uporabite [spletno barvno kapalko](https://acrafto.com/sl/spletni-izbirnik-barv-iz-slike/), ki deluje v vseh brskalnikih.

### Ali ostane moja zgodovina barv zasebna?

Da. Zgodovina je shranjena v localStorage vašega brskalnika na vaši napravi. Nič od tega, kar izberete, prilepite ali kopirate, se ne pošilja nikamor. Celotno orodje teče kot JavaScript v brskalniku, kar lahko preverite na zavihku Omrežje v razvijalskih orodjih.

## 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))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/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))
- 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))