Ruka hadi maudhui makuu

Kichagua Rangi na Kitengenezaji Rangi bila malipo

Chagua rangi, badilisha kati ya HEX/RGB/HSL, na tengeneza rangi zinazooanana.

Inafanya kazi bila mtandao mara ikishapakia
HEX
HSV
h217Β°
s76%
v96%
onyesha tu

RGB

r
g
b

HSL

H
S
L

Muundo zaidi

HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)

WCAG kubading

Rangi iliyopewa jina iliyo karibu zaidi: dodgerblue Β· Maandishi meusi ni rahisi kusoma hapa (5.71:1)

Maandishi kwenye nyeupe3.68:1AA kubwa
Maandishi kwenye nyeusi5.71:1AA
Maandishi kwenye #ffffff3.68:1AA kubwa

Vivuli na toni (50–950)

Paleti ya rangi

Kamili

#3b82f6
#f6af3c

Triadi

#3b82f6
#f63c83
#83f63c

Sawa

#3ce0f6
#3b82f6
#523cf6

Monokromatiki

#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd

Matumizi ya kawaida

  • Chagua rangi kwa muundo wa wavutiChagua na zaa rangi kwa wavuti yako β€” pata HEX, RGB, na thamani za HSL pamoja na paleti zinazofaa.
  • Chagua rangi kwa ubaoJenga paleti ya rangi ya chapa yako β€” chagua rangi ya msingi, ya pili, na mkazo ambayo hufanya kazi pamoja.
  • Chagua rangi kwa hazina ya kijamiiUnda paleti za rangi za kutaka kwa machapisho ya hazina ya kijamii, hadithi, na muundo wa profaili.
  • Chagua rangi kwa muundo wa kuchapishaChagua rangi kwa nyenzo za kuchapisha β€” karatasi, kadi za biashara, mujamala β€” yenye muonekano wa rangi makubwa.
  • Chagua rangi kwa kuwasilishaMuundo wa rangi ya slaidi β€” chagua rangi za maandishi yanayoweza kusoma, pali za chati, na rangi za mkazo thabiti.

Jinsi Inavyofanya Kazi

Kila kitu kinafanya kazi moja kwa moja kwenye kivinjari chako kwa kutumia hesabu ya ubadilishaji iliyoandikwa mwenyewe β€” hakuna maktaba ya rangi, hakuna mzunguko wa seva. Unachagua rangi kupitia uingizaji wa rangi wa ndani wa kivinjari au EyeDropper API, na kifaa kinaibadilisha papo hapo kuwa miundo sita huku pia kikihesabu uwiano wa mkanganyiko wa WCAG na kuzalisha mchanganyiko wa rangi.

  1. 1
    Uingizaji wa rangi kupitia API ya asili
    Unachagua rangi kupitia kipengele cha ndani cha kivinjari cha <input type="color">, au β€” kwenye vivinjari vya msingi wa Chromium β€” EyeDropper API inakuruhusu kuchukua sampuli ya pikseli yoyote kwenye skrini yako. Njia zote mbili zinarudisha mfuatano wa hex unaokuwa chanzo kimoja cha ukweli.
  2. 2
    Ubadilishaji wa muundo ulioandikwa mwenyewe
    Kifaa kinabadilisha thamani ya hex kuwa RGB, HSL, HSV, CMYK, na OKLCH kwa kutumia kazi zake za hesabu (bila maktaba ya nje). Ubadilishaji wa OKLCH unasawazisha chaneli za sRGB, kutumia matriki ya mzizi wa mchemraba ya OKLab, kisha kutokana chroma na pembe ya hue β€” ikilingana na matokeo ya kisasa ya CSS Color Level 4.
  3. 3
    Hesabu ya uwiano wa mkanganyiko wa WCAG
    Mwangaza wa jamaa unahesabiwa kutoka chaneli za RGB zilizosawazishwa kwa kutumia fomula ya WCAG 2.x. Kifaa kisha kinahesabu uwiano wa mkanganyiko dhidi ya nyeupe kamili na nyeusi kamili na kuzipa lebo AA-kubwa, AA, AAA, au Kushindwa kulingana na vikomo vya WCAG (3:1, 4.5:1, 7:1).
  4. 4
    Uzalishaji wa mchanganyiko wa rangi na uhifadhi wa ndani
    Vivuli vya inayosaidiana, tatu, inayolingana, na monochromatic vinatokana na kuzungusha au kusogeza thamani za hue na mwanga za HSL kwa hesabu. Michanganyiko iliyohifadhiwa inaandikwa kwenye localStorage kwenye kivinjari chako β€” hakuna kinachoondoka kwenye kifaa chako.

Zana Zinazohusiana

Maswali Yanayoulizwa Mara Kwa Mara