Color Picker

Paano gamitin ang color picker

1. I-click ang swatch sa ilalim ng Pumili ng kulay para buksan ang color picker ng iyong browser, saka pumili ng kulay. Puwede ka ring mag-type o mag-paste ng halaga sa field na Color code: HEX code gaya ng #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) o pangalan sa CSS gaya ng tomato.
2. Agad na nag-a-update ang malaking preview, na may HEX code na nakasulat sa itim o puti, alinman ang mas madaling basahin sa background na iyon.
3. Sa ilalim ng Mga color code, kopyahin ang format na kailangan mo gamit ang button na Kopyahin sa tabi nito: HEX, RGB, HSL, HSV o CMYK.
4. I-click ang Random na kulay kapag kailangan mo ng inspirasyon, o ang Kumuha mula sa screen (sa mga browser na sumusuporta rito, gaya ng Chrome at Edge) para kumuha ng anumang pixel sa iyong screen, kasama ang ibang window.

Nangyayari ang lahat sa iyong browser: walang kulay o larawang ipinapadala saanman.

Ano ang ibig sabihin ng bawat color code

• Ang HEX ay ang anim-na-digit na hexadecimal na notasyong ginagamit sa HTML at CSS. Ang bawat pares ng digit ay isang channel (pula, berde, asul) mula 00 hanggang FF, kaya ang #1E90FF ay pulang 30, berdeng 144, asul na 255.
• Ang RGB ay nagbibigay ng parehong tatlong channel bilang decimal na numero mula 0 hanggang 255. Ito ang inaasahan ng karamihan ng design software at programming library.
• Inilalarawan ng HSL ang kulay sa pamamagitan ng hue (anggulo mula 0° hanggang 360° sa color wheel), saturation at lightness. Madali itong gamitin para pagaanin o padilimin ang kulay sa pagbabago ng isang numero lang.
• Ang HSV (tinatawag ding HSB) ay gumagamit ng hue, saturation at value (liwanag). Ito ang modelo sa likod ng mga color square sa Photoshop, Figma at maraming editor.
• Ipinapahayag ng CMYK ang kulay bilang porsyento ng tinta na cyan, magenta, yellow at black.

Tungkol sa mga halaga ng CMYK

Simpleng conversion ang mga CMYK code: K = 1 − max(R, G, B), saka C = (1 − R − K) / (1 − K), at ganoon din sa M at Y. Ito ang karaniwang pormula sa aklat, pero hindi ito gumagamit ng ICC profile. Nakasalalay ang totoong pag-print sa press, papel at tinta, kaya iko-convert ng printer ang iyong mga kulay gamit ang sarili nitong profile at maaaring magkaiba ang resulta. Gamitin ang mga numerong ito bilang panimulang punto, hindi bilang patunay para sa print.

Pagbasa sa mga contrast ratio

Sa ilalim ng HEX code, ipinapakita ng preview ang Contrast sa puti at Contrast sa itim, na kinukuwenta gamit ang pormula ng relative luminance ng WCAG 2. Kailangan ng ratio na 4.5:1 o higit pa para sa karaniwang body text sa antas AA, at 3:1 para sa malaking text at mga elemento ng interface. Kung 3:1 lang ang abot ng kulay mo sa puti, gamitin ito sa malalaking heading o icon at gumamit ng mas madilim na shade para sa text.

Mga tip

• Puwede mong i-paste ang mga hex code nang walang #: gumagana rin ang 1e90ff, pati ang maiikling anyo gaya ng f60.
• Tinatanggap ang mga halagang may transparency, gaya ng rgb(0 0 0 / 50%); ipinapakita ng picker ang opaque na kulay.
• Magkakaiba ang sariling color dialog ng browser sa bawat system. Kung kailangan mo ng eksaktong halaga, laging eksakto ang pag-type sa field na Color code.