Besplatni Online Alat

Besplatni CSS i Alati za Boje

Biraj boje, napravi gradijente, provjeri kontrast i izradi shadow i radius CSS — sve na jednom mjestu. Ništa se ne šalje, sve se ažurira uživo dok tipkaš.

Klikni na uzorak da odabereš boju

HEX

RGB

HSL

Upiši u bilo koje polje — HEX, RGB ili HSL — i ostala dva se automatski ažuriraju, zajedno s uzorkom.

Pogledaj: CSS gradijenti, pretvarač boja, provjera kontrasta i sjene u jednom alatu

Što sve možeš s ovim CSS i alatima za boje

Pretvarač Boja — upiši boju kao HEX, RGB ili HSL i druge dvije se odmah osvježe. Zgodno kad ti dizajn da jedan zapis, a kodu treba drugi.
Gradijent — odaberi boje, izaberi Linearni ili Radijalni, postavi kut i klikni Kopiraj CSS.
Provjera Kontrasta — odaberi boju teksta i pozadine da vidiš mogu li ga pročitati i ljudi slabijeg vida (WCAG AA i AAA).
Sjena i Zaobljenje — pomiči pomak, zamućenje i širenje da složiš box-shadow, a kutove zaobli s border-radius. Kopiraj CSS kad ti se svidi.

Pojmovi o bojama objašnjeni

HEX — boja zapisana kao # i šest slova ili brojeva, npr. #2563EB.
RGB — ista boja kao tri broja za crvenu, zelenu i plavu.
HSL — nijansa, zasićenost i svjetlina. Lakše ga je ručno podešavati, npr. da boju posvijetliš.
WCAG kontrast — pravilo koliko se tekst i pozadina moraju razlikovati da tekst ostane čitljiv. AA je razina kojoj većina stranica teži, AAA je stroža.

Dobro je znati prije nego počneš

Boje su potpuno neprozirne: nema prozirnosti (alfa) ni 8-znamenkastih hex kodova.
HSL vrijednosti su zaokružene na cijele brojeve, pa se pri vraćanju natrag kanal boje može razlikovati za 1.
Prolaz ili pad kontrasta koristi točne boje; prikazani omjer zaokružen je na dvije decimale, pa se 4,496 prikaže kao 4.50:1, ali ne prolazi 4,5.
Gradijenti primaju do 6 boja, ravnomjerno raspoređenih, kao linearni kut ili kružni radijalni.