Výběr barvy (color picker)

Má-li návštěvník na webu zadávat barvu, můžeme mu vybírání zpříjemnit zobrazením barevné palety.

Element <input type=color>

HTML 5 přišlo s novým typem <input> pro výběr barvy. Momentálně funguje jen v Opeře a Chromu. Ve Firefoxu ani v IE 11 nikoliv.

<input type="color" value="#fff">

Do atributu value je možné uvést výchozí hodnotu, jinak se barva nastaví automaticky na černou (#000000).

Hezké na tomto řešení je, že se zobrazuje standardní okno pro míchání barev, které by mohlo být návštěvníkům webu povědomé.

CSS paleta

Teoreticky si lze sestavit paletu z radio <input>ů a využít selektoru :checked (od IE 9).

Vybrat barvu:

JavaScriptová paleta barev

Jelikož má <input type=color> i selektor :checked ne úplně nejlepší podporu, je třeba zvolit nějaké JS řešení.

JSColor

Jednoduché míchátko pro výběr barvy. Stačí připojit jeden JS soubor, nahrát 4 obrázky a <input> aktivovat:

<input class="color">

Web

Color mixer aneb míchátko

Ještě datově menší color picker. Lze rovněž použít pro <input>, jen možná trochu nelogicky vyžaduje stisk tlačítka OK (nebo dvojklik) po namíchání barvy.

Web

jQuery MiniColors

Asi nejlepší nástroj založený na jQuery, podporuje různé styly míchání.

Web Demo bez Bootstrapu

Jak JS color picker funguje?

Jak se dá takové okno pro výběr barvy naprogramovat? Zjednodušeně řečeno se může vycházet z HSL modelu (odstín, saturace (intensita/sytost barvy), světlost) a z něj barvu převádět do RGB (rgb(255, 0, 0)) nebo šestnáctkového zápisu (#ff0000).

Finální podoba color pickeru už je jen na fantasii tvůrce. Kvůli podpoře starších prohlížečů (HSL zápis umí až IE 9) se může vše rovnou přepočítávat do RGB/hexa a s HSL ve skutečnosti vůbec nepracovat, ale jen využívat tento princip míchání barev.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Vlastní HTML značky

Vytváření vlastních HTML značek

Je možné si kromě standardních HTML tagů vytvořit nějaké vlastní?

Reset políčka pro nahrávání souboru

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

Převod inline CSS na externí

Převod CSS v HTML na externí styly

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

Placeholder

HTML atribut placeholder

HTML atribut placeholder slouží k zadání ukázkové hodnoty do formulářového pole.

Ikona stránky favicon

Ikona stránky favicon

Jak správně vytvořit ikonku stránky (favicon) pro desktop i mobily.

Komentáře