Odabir boja online

Koristite ovaj online alat za odabir boja kako biste odabrali boju iz prenesene slike, uzeli boju sa zaslona kada to preglednik podržava ili ručno unijeli vrijednost boje. Pretvorite odabranu boju, izdvojite paletu iz slike, generirajte usklađene boje, provjerite kontrast teksta i kopirajte CSS varijable bez prelaska na drugu stranicu.

1. Odabir boje iz slike

Odaberite lokalnu sliku, pomičite pokazivač preko nje za pregled piksela, a zatim kliknite za odabir boje. Nakon klika tipkama sa strelicama precizno pomaknite odabrani piksel.

Još nije odabrana slika. Odaberite sliku iznad kako biste počeli birati boje.
Pregled odabrane slike
Paleta slike
Kliknite boju za primjenu
Prenesite sliku kako biste izdvojili njezine glavne boje.
Više načina za odabir boje
2. Odabir sa zaslona

Koristite odabir boje sa zaslona u preglednicima koji to podržavaju. Pregledniku može trebati trenutak da otvori izvorni alat za odabir.

3. Ručni unos boje

Unesite HEX ili HEXA, na primjer #2563EB ili #2563EBFF.

Paleta
Kliknite boju za primjenu
Usklađene boje
Svjetlije i tamnije nijanse
Trenutačna boja
#2563EB

Rezultat

Upotreba u UI-ju
Kontrast teksta i CSS
Kontrast teksta i UI kombinacija
CSS varijable

                        
Izjava o privatnosti StarryToola: U StarryToolu iznimno cijenimo vašu privatnost. Sva obrada podataka na ovoj stranici izvodi se na vašem uređaju putem JavaScripta na strani klijenta, čime se osigurava sigurnost podataka. Ne bilježimo niti pohranjujemo poslane ili generirane podatke. Za više informacija o praksama privatnosti na našoj web-stranici pregledajte naša Pravila privatnosti.

O online alatu za odabir boja

Koristite ovaj online alat za odabir boja kako biste odabrali boju iz prenesene slike, uzeli boju sa zaslona kada to preglednik podržava ili ručno unijeli vrijednost boje. Odabrana boja odmah se pretvara u česte formate kao što su HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV i CMYK, tako da možete kopirati potrebnu vrijednost bez prelaska na drugu stranicu.

• Značajke

Odabir boje iz slike: Odaberite lokalnu sliku i pomičite pokazivač preko nje za pregled okolnih piksela. Kliknite sliku kako biste odabrali trenutačnu boju. Izdvajanje palete iz slike: Nakon prijenosa slike alat izdvaja sažetu paletu glavnih boja, koje možete kopirati ili primijeniti kao trenutačnu boju. Precizno podešavanje piksela: Nakon odabira boje iz slike upotrijebite tipke sa strelicama za preciznije podešavanje položaja odabranog piksela. Odabir boje sa zaslona: Koristite alat preglednika za odabir boje sa zaslona kada vaš preglednik podržava tu mogućnost. Ručni unos boje: Ručno unesite boju pomoću birača boja ili HEX / HEXA vrijednosti kao što su #2563EB ili #2563EBFF. Više formata boja: Pretvorite odabranu boju u HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV i CMYK formate. Usklađene boje: Iz trenutačne boje generirajte komplementarne, analogne, trijadne, nježne i prigušene varijante boja. Svjetlije i tamnije nijanse: Izradite praktičnu skalu od svijetlih do tamnih nijansi za pozadine, obrube, hover stanja, oznake i UI komponente. Kontrast teksta i UI kombinacija: Usporedite bijeli i crni tekst prema WCAG kontrastu, prikažite perceptivnu referencu u APCA stilu i dobijte prijedlog ugodnije UI kombinacije kada boji visoke zasićenosti treba tamnija ili svjetlija pozadina. CSS varijable: Kopirajte gotove CSS varijable za trenutačnu boju, svijetle i tamne varijante, čitljivu boju teksta te preporučenu kombinaciju UI pozadine i teksta. Obrada u pregledniku: Čitanje slike, odabir boje, izdvajanje palete i pretvorba boja izvode se izravno u vašem pregledniku bez instalacije zasebne aplikacije.

• Napomene

Odabir boje sa zaslona ovisi o podršci preglednika. U preglednicima koji ne podržavaju ovu mogućnost i dalje možete koristiti odabir iz slike ili ručni unos. Pri odabiru boje iz slike slika može biti skalirana kako bi stala na stranicu, ali uzorkovana boja mapira se natrag na položaj piksela u izvornoj slici. Kontrast teksta računa se na temelju odabrane pune boje. Kada se tekst nalazi na gradijentima, fotografijama, prozirnim ili teksturiranim pozadinama, završni dizajn provjerite i vizualno. Vrijednost u APCA stilu pruža perceptivnu referencu uz WCAG kontrast. WCAG kontrast ostaje provjera pristupačnosti s prolaznim ili neprolaznim rezultatom na ovoj stranici. Za boje koje se koriste u sučeljima, dokumentima, slikama ili tiskanim materijalima konačni izgled može se razlikovati ovisno o postavkama zaslona, profilima boja, formatima datoteka i izlaznim uređajima. :wiki_link
#2563EB
rgb(37, 99, 235)
x: 0, y: 0
Kopirano