Kako pretvoriti HEX u RGB i provjeriti kontrast teksta online besplatno

Odabrao si boju za svoju web stranicu, a dizajn kaže HEX, dok kod traži RGB. Ili si napravio lijep gumb i nisi siguran može li itko pročitati tekst na njemu. GetPlugzz CSS i Alati za Boje rade oboje, plus još dva posla: prave gradijente i generiraju box-shadow i border-radius CSS. Sve je na jednoj stranici, ažurira se uživo dok tipkaš i radi u tvom pregledniku, pa nema računa i ništa se ne uploada.

Četiri alata, u minuti

Otvori CSS i Alate za Boje i odaberi karticu:

• Pretvarač Boja. Upiši boju kao HEX, RGB ili HSL, a druga dva se odmah ažuriraju. Možeš i kliknuti na uzorak da odabereš boju.
• Gradijent. Odaberi boje (možeš dodati još), izaberi linearni ili radijalni, namjesti kut i pritisni Kopiraj CSS.
• Provjera Kontrasta. Odaberi boju teksta i boju pozadine i vidi može li to pročitati netko sa slabijim vidom, s rezultatom za WCAG AA i AAA.
• Sjena i Zaobljenje. Pomiči pomak, zamućenje i širenje da složiš box-shadow, a uglove zaobli s border-radius. Kopiraj CSS kad izgleda kako treba.

HEX, RGB i HSL: jedna boja, tri načina da je kažeš

Zamisli jednu boju boje za zidove napisanu na tri različite etikete. Boja je ista, samo je recept zapisan drukčije:

• HEX je kratka šifra: # i šest slova ili brojeva, kao #2563EB.
• RGB je recept: tri broja za to koliko crvene, zelene i plave treba umiješati.
• HSL su kotačići: nijansa, zasićenost i svjetlina. Najlakše se ručno podešava. Želiš istu boju malo svjetliju? Okreneš samo jedan kotačić.

Dizajn obično da jedan od ovih, a tvoj kod treba drugi, i baš tada ti pretvarač uštedi par minuta.

Kako pretvoriti HEX u RGB

1. Otvori Pretvarač Boja. To je prva kartica.
2. Upiši ili zalijepi HEX kôd u HEX polje.
3. Pročitaj rezultat. RGB i HSL vrijednosti popune se same, zajedno s uzorkom.

Radi i obrnuto. Upiši u bilo koje od tri polja i ostala dva slijede.

Može li se tvoj tekst stvarno čitati? (problem šapta)

Svijetlosivi tekst na bijeloj pozadini na tvom ekranu izgleda otmjeno. Nekome sa slabijim vidom, ili na mobitelu na jakom suncu, to je šapat u bučnoj sobi. Provjera Kontrasta mjeri koliko se boja teksta i pozadine razlikuju i kaže ti prolazi li.

Koristi WCAG, smjernice za pristupačnost web sadržaja, koje propisuju minimalni kontrast da tekst ostane čitljiv ljudima sa slabijim vidom. Postoje dvije razine: AA je standard kojem teži većina stranica, a AAA je stroža. Što ti treba:

• Normalan tekst: najmanje 4,5:1 za AA i 7:1 za AAA.
• Velik tekst: 3:1 je dovoljno za AA. Velik znači 18pt ili veći, ili 14pt ili veći u podebljanom.

Alat pokazuje omjer i rezultat za normalan i velik tekst na obje razine, pa ne moraš ništa računati.

Gradijenti i sjene bez ručnog pisanja CSS-a

Za gradijent odaberi boje, izaberi linearni ili radijalni, namjesti kut i pritisni Kopiraj CSS. To je cijeli posao.

Za sjenu zamisli svjetiljku iznad kutije. Pomak mijenja gdje pada sjena, veće zamućenje čini je mekšom, a širenje većom. Možeš postaviti boju i prozirnost sjene ili je učiniti unutarnjom. Zatim zaobli uglove s border-radius, za sve uglove odjednom, i kopiraj CSS kad izgleda kako treba.

Kad ti ovo stvarno zatreba

• Dizajn ti da HEX kôd, a tvoj kod traži RGB ili HSL.
• Gumb ili naslov za koji želiš provjeriti čita li se tekst.
• Pozadina stranice ili kartice kojoj treba lijep gradijent.
• Kartica koja treba odskočiti od stranice mekom sjenom i zaobljenim uglovima.
• Provjera pristupačnosti za klijenta, školski projekt ili vlastitu stranicu.

Dobro je znati prije nego počneš

Česta pitanja