Odaberite boju, uzmite kod i nastavite s poslom

Birač boje, graditelj gradijenata i kapaljka za slike na jednoj stranici. Bez računa, bez instalacije i bez čekanja: odaberite nijansu i kopirajte je kao HEX, RGB, HSL ili HSV.

%
Otvori stranicu boje

Kodovi boje

HEX#0F37FF
RGBrgb(15, 55, 255)
HSLhsl(230°, 100%, 52.94%)
HSVhsv(230°, 94.12%, 100%)
CMYKcmyk(94.12%, 78.43%, 0%, 0%)
XYZxyz(19.61, 10.05, 95.5)
LABlab(37.93, 62.96, -98.45)
LCHlch(37.93, 116.86, 302.6°)

Što je unutra

Kapaljka

Uzmite boje s učitane slike ili s bilo čega na zaslonu ondje gdje preglednik to dopušta. Ispustite datoteku na stranicu i kliknite piksel.

Pretvorba formata

Prebacujte se odmah između HEX, RGB, HSL, HSV, CMYK, XYZ, LAB i LCH te kopirajte bilo koju vrijednost ravno u CSS ili u svoj grafički alat.

Graditelj gradijenata

Dodajte i povlačite točke po traci, prebacujte linearni i radijalni, namjestite kut i prozirnost pa kopirajte gotov CSS.

Povijest boja

Svaka boja i gradijent koje napravite ostaju u vašem pregledniku, da im se poslije vratite ili ih upotrijebite u drugom projektu.

Harmonije i varijacije

Svaka stranica boje prikazuje svjetlije i tamnije tonove te šest shema harmonije, a bilo koju od njih jednim klikom pretvara u gradijent.

Besplatno i privatno

Bez naplate i bez praćenja onoga što birate. Učitane slike čitaju se u pregledniku i ne odlaze nikamo.

Za koga je

Dizajneri i produktni timovi
Kad skiciraju sučelje ili paletu marke, isprobavaju kombinacije i kopiraju točan CSS za gradijent.
Ilustracija i slikarstvo
Za uzimanje boja s fotografija i slika kapaljkom te planiranje mekih prijelaza.
Front-end razvoj
Za dosljedne vrijednosti boja kroz projekt i njihovo očitavanje iz postojećeg dizajna.
Provjeru pristupačnosti
Za usporedbu boje kroz različite modele i njezino dotjerivanje dok omjer kontrasta ne prijeđe potreban prag.

Kako se koristi

  1. 1

    Odaberite boju

    Kliknite bilo gdje u polju zasićenja pa dotjerajte klizačima nijanse i prozirnosti. HEX, RGB i HSV se usput osvježavaju.

  2. 2

    Uzmite sa slike

    Povucite sliku na stranicu ili odaberite datoteku pa kliknite željeni piksel. Kodovi se pojave odmah.

  3. 3

    Složite gradijent

    Kliknite traku da dodate točku i povucite je na mjesto. Prebacite linearni ili radijalni i postavite kut.

  4. 4

    Kopirajte i upotrijebite

    Kopirajte vrijednost ili cijelu CSS deklaraciju. Sve što odaberete sprema se u povijest samo od sebe.

Česta pitanja

Mali alat koji ne smeta

Počelo je kao interni alat: htjeli smo uhvatiti boju, dotjerati je i krenuti dalje, bez otvaranja teškog grafičkog programa. Namjerno je jedna stranica, namjerno brza, i ostat će besplatna.

Proširenja preglednika

Radije uzimate boje izravno sa stranica koje posjećujete? Proširenja za Chrome i Edge dodaju kapaljku na alatnu traku, vode vlastitu povijest i otvaraju ovaj alat jednim klikom.