UltKit

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

Rangi iliyochaguliwa#2F6FED

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)

Rangi ya maandishi
Rangi ya usuli

Mfano wa maandishi makubwa

Mfano wa maandishi: Hapo zamani za kale paliishi mfalme mwenye hekima. 0123456789

Uwiano wa utofautishaji14.67:1
  • 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.

JinaHEX
black#000000
white#ffffff
gray#808080
silver#c0c0c0
red#ff0000
crimson#dc143c
maroon#800000
tomato#ff6347
coral#ff7f50
orange#ffa500
gold#ffd700
yellow#ffff00
olive#808000
green#008000
teal#008080
aqua#00ffff
blue#0000ff
navy#000080
purple#800080
rebeccapurple#663399

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.