Kichagua rangi
Chagua rangi yoyote na upate msimbo wake katika kila muundo unaotumika sana, tayari kunakiliwa. Tengeneza paleti za rangi zinazoendana, toa rangi kuu za picha bila kuipakia, na kagua kama jozi ya rangi ya maandishi na mandharinyuma inafikia kiwango cha ulinganuzi cha WCAG.
Kichagua rangi
Misimbo ya rangi katika kila umbizo
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (takriban)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
Paleti kutoka rangi hii
Kinyume (complementary)
Jirani (analogous)
Utatu (triadic)
Rangi hafifu (zilizochanganywa na nyeupe)
Rangi nzito (zilizochanganywa na nyeusi)
Paleti kutoka picha
Picha yako husomwa na kivinjari chako chenyewe na haipakiwi popote: pikseli huchukuliwa kwenye canvas kwenye kifaa hiki na hakuna kinachotumwa popote.
Weka hapa picha, picha ya skrini au nembo
Rangi sita kuu za picha yako zitaonekana hapa. Bofya sampuli ya rangi ili kuipakia kwenye kichagua rangi.
Kikagua utofautishaji (WCAG 2.1)
Mfano wa maandishi makubwa
Mfano wa maandishi: Hapo zamani za kale paliishi mfalme mwenye hekima. 0123456789
- AA · maandishi ya kawaidaImefaulu
- AAA · maandishi ya kawaidaImefaulu
- AA · maandishi makubwaImefaulu
- AAA · maandishi makubwaImefaulu
Maandishi makubwa humaanisha angalau pt 18 (px 24) ya kawaida au pt 14 (takriban px 18.7) ya herufi nzito. AA inahitaji 4.5:1 kwa maandishi ya kawaida na 3:1 kwa makubwa; AAA inahitaji 7:1 na 4.5:1.
Rangi za kawaida zenye majina katika CSS
Maneno ishirini ambayo kila kivinjari huelewa, pamoja na thamani zake kamili za HEX, RGB na HSL.
| Jina | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX, RGB, HSL na HSB zinaelezea nini hasa
Kila rangi kwenye ukurasa huu iko katika sRGB, nafasi chaguomsingi ya rangi ya wavuti tangu vivinjari kuikubali mwishoni mwa miaka ya 1990. Skrini huchanganya mwanga mwekundu, kijani na buluu, na kila kanali ina viwango 256 (0–255), hivyo kupatikana rangi 16,777,216 zinazowezekana. RGB huandika namba hizo tatu moja kwa moja; HEX huandika namba hizo hizo tatu kwa msingi wa 16, tarakimu mbili kila moja, kwa hiyo #FF6600 ni nyekundu 255, kijani 102, buluu 0. Njia fupi ya tarakimu tatu hurudia kila tarakimu: #F60 ni #FF6600.
HSL na HSB (pia huitwa HSV) huelezea rangi hizo hizo kwa njia rahisi zaidi kurekebisha kwa mkono. Hue ni pembe kwenye gurudumu la rangi: 0° nyekundu, 120° kijani, 240° buluu. Tofauti iko kwenye namba ya mwisho. Katika HSL, lightness 100% ni nyeupe daima na 50% ni toleo safi zaidi la hue; katika HSB, brightness 100% ni hue safi na nyeupe huhitaji saturation 0%. Programu za usanifu kama Photoshop na Figma hutumia HSB kwenye vichaguzi vyake, huku CSS ikielewa hsl() moja kwa moja, ndiyo maana zote mbili zimeorodheshwa hapo juu.
Kwa nini thamani ya CMYK ni makadirio tu
Skrini huongeza mwanga; vichapishi huuondoa kwa wino wa cyan, magenta, njano na nyeusi. Mifumo hii miwili inafikia safu tofauti za rangi, zinazoitwa gamut. Rangi za skrini zenye ukali mkubwa, kama kijani angavu cha RGB, buluu ya umeme au chungwa la neon, ziko nje ya kile wino wa kawaida unachoweza kuzalisha, hivyo huchapishwa zikiwa hafifu kuliko zinavyoonekana kwenye kifuatilizi.
Namba za CMYK hapa hutumia ubadilishaji wa kihisabati wa kawaida bila wasifu wa ICC, jambo linalofaa kwa maelezo ya awali lakini si kwa mashine ya uchapishaji. Mchapishaji hubadilisha kwa wasifu wa karatasi na mashine yake, kama FOGRA39 barani Ulaya au GRACoL nchini Marekani, na rangi ile ile ya RGB inaweza kutoa asilimia tofauti za wino kwa kila moja. Kwa kazi ya uchapishaji, tuma thamani ya RGB au HEX pamoja na wasifu anaouomba mchapishaji wako.
Uwiano wa ulinganuzi hukokotolewa vipi
WCAG 2.1 hulinganisha mwangaza linganifu wa rangi mbili: ile nyepesi ongeza 0.05, ikigawanywa kwa ile nzito ongeza 0.05. Matokeo huanzia 1:1 (rangi zinazofanana) hadi 21:1 (nyeusi juu ya nyeupe). Kiwango cha AA kinahitaji angalau 4.5:1 kwa maandishi ya kawaida na 3:1 kwa maandishi makubwa, yaani pointi 18 au pointi 14 yenye herufi nzito; kiwango cha AAA huviongeza hadi 7:1 na 4.5:1. Sehemu za kiolesura kama mipaka ya sehemu za kuingiza data na aikoni zinahitaji 3:1 dhidi ya mazingira yake kwa mujibu wa kigezo cha mafanikio 1.4.11.
Mwangaza hupa kijani uzito mkubwa zaidi kuliko buluu, kwa sababu jicho lina unyeti mkubwa zaidi kwa kijani. Ndiyo maana maandishi ya njano kwenye nyeupe hushindwa vibaya huku buluu iliyokolea kwenye nyeupe ikifaulu kwa urahisi, ingawa rangi zote mbili zinaonekana kuwa na ukali kamili. Nembo na maandishi ya mapambo tu hayahusiki na kanuni hii.
Kupata paleti ya rangi kutoka picha au nembo
Palette ya picha husoma faili yako kwa canvas ya kivinjari, huipunguza hadi pikseli 200 kwa upande mrefu zaidi na kupanga pikseli zinazofanana kwa mbinu ya median-cut iliyoelezwa na Paul Heckbert mwaka 1982: safu ya rangi hugawanywa tena na tena kando ya kanali pana zaidi hadi makundi sita yabaki, na wastani wa kila kundi huwa sampuli ya rangi. Pikseli zenye uwazi hupuuzwa, hivyo nembo kwenye mandharinyuma yenye uwazi hutoa rangi za nembo yenyewe.
Ukishapata rangi, nembo bapa mara nyingi hufanya kazi vizuri zaidi kama vekta. Kibadilishaji cha picha kuwa SVG huifuatilia kuwa maumbo yanayodumisha rangi hizi hizo, na ukiwa unabuni kichwa cha chaneli, kibadilisha ukubwa wa bango la YouTube hurekebisha mchoro hadi 2560 × 1440 kwa kuzingatia eneo salama.
Maswali yanayoulizwa mara kwa mara
- Kwa nini "green" ya CSS ni nyeusi zaidi kuliko kijani cha kichagua RGB?
- Neno kuu green ni #008000, kijani cha wastani kilichorithiwa kutoka palette ya zamani ya rangi 16 ya HTML. Kijani chenye ukali kamili #00FF00 kinaitwa lime. Orodha kamili ya CSS ina mshangao kama huo: gray (#808080) ni nzito kuliko darkgray (#A9A9A9).
- Je, picha yangu inapakiwa ninapotoa paleti ya rangi?
- Hapana. Faili hufunguliwa na kivinjari chako, huchorwa kwenye canvas ndani ya kumbukumbu na kuchambuliwa hapo. Hakuna ombi linalotumwa na picha, na kufunga kichupo huifuta.
- Ninahitaji uwiano gani wa ulinganuzi kwa maandishi ya kawaida?
- Angalau 4.5:1 ili kufikia kiwango cha AA cha WCAG 2.1, na 7:1 kwa kiwango cha AAA. Vichwa vya pointi 18 au zaidi, au pointi 14 zenye herufi nzito, vinaweza kutumia 3:1 kwa AA. Mifumo mingi ya usanifu hulenga 4.5:1 kila mahali ili maandishi yasomeke kwenye skrini hafifu na kwenye jua.
- Je, ninaweza kutumia msimbo wa HEX wa tarakimu 8 wenye uwazi?
- Ndiyo, katika CSS. Tarakimu mbili za mwisho ni kanali ya alpha, hivyo #2F6FED80 ni buluu ile ile kwa uwazi wa takriban 50%. Kichaguzi hiki hufanya kazi na rangi zisizo na uwazi, kwa hiyo huonyesha tarakimu sita; ongeza jozi ya alpha mwenyewe unapohitaji.
- CSS ina rangi ngapi zenye majina?
- CSS Color Module Level 4 inafafanua maneno kuu 148 ya rangi, ikihesabu tahajia mbili kama gray na grey. Jipya zaidi ni rebeccapurple (#663399), lililoongezwa mwaka 2014 kumkumbuka Rebecca Meyer, binti wa mwandishi wa CSS Eric Meyer.