Color Picker & Converter

Kichagua Rangi na Kibadilishaji

Chagua kwa macho au bandika thamani yoyote — HEX, RGB, HSL, OKLCH na OKLAB hubaki sawa. Inajumuisha kikagua tofauti cha WCAG 2.2 na jenereta ya paleti inayotegemea OKLCH. Inafanya kazi kabisa ndani ya kivinjari chako.

Kichagua Rangi na Kibadilishaji — TL;DR

Chagua kwa macho au bandika thamani yoyote — HEX, RGB, HSL, OKLCH na OKLAB hubaki sawa. Inajumuisha kikagua tofauti cha WCAG 2.2 na jenereta ya paleti inayotegemea OKLCH. Inafanya kazi kabisa ndani ya kivinjari chako.

Bandika thamani yako ya hex (mfano #ff5722) kwenye uwanja wa HEX — safu ya RGB itasasishwa papo hapo. Vivyo hivyo, bandika rgb(255 87 34) kwenye uwanja wa RGB na HEX, HSL, OKLCH na OKLAB zote zitalingana. Ubadilishaji ni wa pande mbili kwenye kila fomati inayotumika.

OKLCH ni nafasi ya rangi ya CSS Color Module Level 4 inayotumia mwangaza wa kimtazamo (L), chroma (C), na hue (h) — kama HSL, lakini sawa kimtazamo. Rangi mbili za OKLCH zenye thamani sawa ya L huonekana zenye mwangaza sawa, hata kwa hue tofauti. Hilo hufanya tokeni za kubuni, paleti zinazotengenezwa, na ramps za rangi zinazopatikana kuwa na utabiri zaidi kuliko HSL. Vivinjari vyote vya kisasa (Chrome 111+, Safari 15.4+, Firefox 113+) vinaiunga mkono.

Thamani za rangi haziondoki kamwe kwenye kifaa chako. Fungua DevTools → Network na utaona maombi sufuri yanayotoka nje wakati wa ubadilishaji, kuchagua, kuunda paleti au kuangalia tofauti.

HEX
RGB
HSL
OKLCH
OKLAB
Yenye jina

Paleti

Tofauti ya WCAG 2.2

Maandishi
Mandharinyuma
—
Hakikisho
Sampuli ya kichwa kikubwa
Sampuli ya maandishi ya mwili — mbweha mwepesi wa kahawia anaruka juu ya mbwa mvivu.

Imeundwa kwa mtiririko halisi wa kazi

Kuanzia mifumo ya kubuni hadi ukaguzi wa upatikanaji — kila fomati na ukaguzi unaohitaji, mahali pamoja.

Nafasi sita za rangi

Badilishana kati ya HEX (tarakimu 3 / 4 / 6 / 8), RGB(A), HSL(A), OKLCH, OKLAB na rangi za CSS zenye majina. Mifuatano ya matokeo inafuata sintaksia ya CSS Color Module Level 4 — bandika moja kwa moja kwenye karatasi zako za mitindo.

Kikagua tofauti cha WCAG 2.2

Ona uwiano wa tofauti kati ya rangi mbili zozote ukiwa na beji za kufaulu/kushindwa za bofyo moja kwa AA (4.5 : 1) na AAA (7 : 1), kwa ukubwa wa maandishi wa kawaida na mkubwa. Hesabu inalingana na rejeo la W3C: ulinearishaji wa sRGB, mwangaza wa jamaa, kisha (L1+0.05)/(L2+0.05).

EyeDropper — chukua sampuli ya pikseli yoyote

Bofya eyedropper kuchukua sampuli ya rangi yoyote kwenye skrini yako — michoro, picha za skrini, picha, hata vichupo vingine vya kivinjari. Inatumia EyeDropper API asilia kwenye vivinjari vya Chromium.

Paleti inayotegemea OKLCH

Tengeneza tints na vivuli vya hatua 9 pamoja na mahusiano ya nyongeza, triadic na analogous — yanayotokana na OKLCH ili kila hatua iwe sawa kimtazamo (tofauti na HSL, ambapo mwangaza hutofautiana sana).

Faragha kwa kubuni

Kila ubadilishaji unaendeshwa kwa JavaScript kwenye kifaa chako. Hakuna kinachopakiwa juu, kuwekwa logi, au kutumwa kwa mtu wa tatu — fungua DevTools → Network ikiwa unataka kuthibitisha mwenyewe.

Imejengwa kwa kasi

JavaScript safi, hakuna runtime ya framework. Upakiaji wa baridi ni chini ya 50 KB ya gzip; ubadilishaji na uundaji wa paleti hukamilika kwa chini ya milisekunde moja kwenye laptop ya miaka mitano.

Jinsi ya kutumia kichagua rangi

Njia nne za kuanza, kila fomati inalingana.

  1. 1

    Chagua kwa macho

    Buruta ndani ya mraba wa kueneza/thamani kuchagua kivuli, telezesha upau wa hue chini kubadilisha rangi ya msingi, na tumia slider ya alpha kwa uwazi. Kila fomati upande wa kulia husasishwa papo hapo.

  2. 2

    Bandika thamani yoyote

    Bandika HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) au hata rangi yenye jina ya CSS (tomato) kwenye ingizo linalolingana — kichagua na fomati nyingine zote zitalingana.

  3. 3

    Chukua sampuli kwa eyedropper

    Bofya kitufe cha eyedropper kunasa pikseli yoyote kwenye skrini yako — kichupo kingine, picha ya skrini, picha, ikoni. Inatumia EyeDropper API asilia kwenye Chrome, Edge na Opera.

  4. 4

    Nakili au angalia tofauti

    Bofya ikoni ya nakala karibu na fomati yoyote kuiweka kwenye ubao wako wa kunakili. Au sogeza chini hadi sehemu ya tofauti ya WCAG 2.2 kuangalia kama mchanganyiko wako wa mbele/nyuma unafaulu AA au AAA kwa ukubwa wa maandishi wa kawaida na mkubwa.

Imejengwa kwa wabunifu, wasanidi na wakaguzi wa upatikanaji

Zana ya rangi inayofaa mtiririko nne wa kawaida wa kazi.

Uandishi wa tokeni za mfumo wa kubuni

Badilisha thamani za HEX za chapa kuwa OKLCH ili kila kivuli katika ramp yako ya tokeni kiwe na hatua sawa ya mwangaza wa kimtazamo. Bandika matokeo ya OKLCH moja kwa moja kwenye CSS yako — hakuna preprocessor inayohitajika.

Ukaguzi wa upatikanaji wa WCAG

Weka jozi za mbele/nyuma na usome uwiano wa tofauti pamoja na beji za AA / AAA. Pata mchanganyiko unaoshindwa kabla ya kuzinduliwa — inakidhi mipaka iliyowekwa na W3C ya 4.5 : 1 ya kawaida / 7 : 1 iliyoboreshwa.

Ubadilishaji wa CSS wa front-end

Una HEX kutoka kwa mockup ya mbunifu lakini unahitaji HSL kwa usanidi wa Tailwind au OKLCH kwa karatasi ya kisasa ya mitindo? Bandika mara moja, nakili katika fomati yoyote. Mifuatano ya matokeo ni sintaksia halali ya CSS Color Module Level 4.

Uchunguzi wa paleti

Chagua rangi ya msingi na uone papo hapo tints na vivuli tisa vilivyotenganishwa kimtazamo pamoja na mahusiano ya nyongeza, triadic na analogous — yanatengenezwa katika OKLCH ili kila hatua ionekane na mwangaza sawa.

100% ya faragha — inafanya kazi katika kivinjari chako

Thamani za rangi haziondoki kamwe kwenye kifaa chako. Fungua DevTools → Network na utaona maombi sufuri yanayotoka nje wakati wa ubadilishaji, kuchagua, kuunda paleti au kuangalia tofauti.

  • Kila ubadilishaji (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) huendeshwa kama JavaScript kwenye mashine yako — fomula zinaonekana kwenye chanzo cha ukurasa.
  • EyeDropper API hurudisha tu rangi unazobofya wazi; kivinjari hushughulikia ruhusa na hairuhusu kamwe ukurasa kuona pikseli zisizoidhinishwa.
  • Hakuna kuingia, hakuna telemetry kwenye thamani za rangi, hakuna API ya rangi ya mtu wa tatu. Tovuti inafuata GDPR moja kwa moja.

Miongozo inayohusiana

Mafunzo yaliyochaguliwa kwa wabunifu, wasanidi na timu za upatikanaji.

Maswali yanayoulizwa mara kwa mara

Ninabadilishaje HEX kuwa RGB?

Bandika thamani yako ya hex (mfano #ff5722) kwenye uwanja wa HEX — safu ya RGB itasasishwa papo hapo. Vivyo hivyo, bandika rgb(255 87 34) kwenye uwanja wa RGB na HEX, HSL, OKLCH na OKLAB zote zitalingana. Ubadilishaji ni wa pande mbili kwenye kila fomati inayotumika.

OKLCH ni nini na kwa nini niitumie?

OKLCH ni nafasi ya rangi ya CSS Color Module Level 4 inayotumia mwangaza wa kimtazamo (L), chroma (C), na hue (h) — kama HSL, lakini sawa kimtazamo. Rangi mbili za OKLCH zenye thamani sawa ya L huonekana zenye mwangaza sawa, hata kwa hue tofauti. Hilo hufanya tokeni za kubuni, paleti zinazotengenezwa, na ramps za rangi zinazopatikana kuwa na utabiri zaidi kuliko HSL. Vivinjari vyote vya kisasa (Chrome 111+, Safari 15.4+, Firefox 113+) vinaiunga mkono.

Je, matokeo ya tofauti ya WCAG yanaweza kutegemewa?

Ndiyo. Tunatumia algoriti kutoka WCAG 2.2 §1.4.3: linearisha kila chaneli ya sRGB, kokotoa mwangaza wa jamaa (0.2126·R + 0.7152·G + 0.0722·B), kisha (L_lighter + 0.05) / (L_darker + 0.05). AA hufaulu kwa 4.5 : 1 kwa maandishi ya kawaida na 3 : 1 kwa maandishi makubwa (18 pt+ au 14 pt+ kwa herufi nzito). AAA hufaulu kwa 7 : 1 na 4.5 : 1 mtawalia.

Je, ninaweza kuchukua sampuli za rangi kutoka kwa picha au programu nyingine?

Ndiyo — bofya kitufe cha Eyedropper kuzindua EyeDropper API iliyojengwa ndani ya kivinjari. Unaweza kuchukua sampuli ya pikseli yoyote popote skrini: kichupo kingine cha kivinjari, ubunifu wa Figma, fremu ya video, hata picha ya skrini. Kwa sasa inatumika kwenye Chrome, Edge na Opera; Firefox na Safari hurudi nyuma kwa upole (kitufe huzimwa).

Je, kuna kitu chochote kinachotumwa kwa seva yako?

Hapana. Kichaguo, kila ubadilishaji, jenereta ya paleti na kikagua tofauti vyote huendeshwa kwenye kivinjari chako. Hakuna thamani za rangi, sampuli za picha, au maandishi yanayotumwa kamwe. Unaweza kufungua DevTools → Network na kuthibitisha kuwa hakuna maombi yanayotoka nje wakati wa matumizi.