Rəng çevirici

Rəng çevirici HEX, HEX alpha, RGB, RGBA, HSV, HSL və ya HSLA formatında verilmiş rəngi bir neçə ekvivalent rəng formatına çevirən pulsuz alətdir.

Hansı rəng formatlarını çevirə bilərəm?

HEX, HEX alpha, RGB, RGBA, HSV, HSL və ya HSLA formatında dəyər daxil edib dəstəklənən bütün formatlardakı qarşılığını görə bilərsən. Dizayn spesifikasiyası, üslub cədvəli və ya üçüncü tərəf API-si eyni rəngi fərqli formada göstərdikdə bu funksiya faydalıdır.

• HEX qırmızı, yaşıl və mavi kanalları onaltılıq say sistemində cüt simvollarla göstərir. Adətən #RRGGBB formasında yazılır.
• HEX Alfa şəffaflıq kanalı əlavə edir. Müasir CSS yazılışında buna çox vaxt #RRGGBBAA formasında rast gəlinir.
• RGB adətən 0-dan 255-dək dəyişən qırmızı, yaşıl və mavi kanal dəyərlərindən istifadə edir.
• RGBA RGB formatına alpha şəffaflığı əlavə edir.
• HSV rəng çalarını, doyma səviyyəsini və dəyəri təsvir edir. Rəng seçmə alətlərində geniş istifadə olunsa da, standart CSS rəng funksiyası deyil.
• HSL rəng çalarını, doyma səviyyəsini və açıqlığı təsvir edir. CSS HSL formatını birbaşa dəstəkləyir.
• HSLA alpha dəyəri əlavə edilmiş HSL formatıdır.

RGB və HSL fərqli rənglər deyil, eyni rəngin müxtəlif riyazi təsvirləridir. Çevirmə zamanı təqdimat forması dəyişir, nəzərdə tutulan rəng isə hədəf formatın imkan verdiyi qədər dəqiq saxlanılır.

Rəng çeviricidən necə istifadə edim?

Qəbul edilən formatlardan birində tam rəng dəyərini Color sahəsinə daxil et, sonra nəticə sahələrində yaradılmış dəyərlərə bax və ya onları köçür.

1. Başlanğıcdakı heş işarəsi, vergüllər, mötərizələr, faiz işarələri və ya alpha komponenti daxil olmaqla, ilkin dəyəri olduğu kimi köçür.
2. Onu Color sahəsinə yerləşdir.
3. HEX, HEX Alfa, RGB, RGBA, HSV, HSL və HSLA bölmələrində göstərilən ekvivalent dəyərlərə bax.
4. Hədəf sistemin qəbul etdiyi rəng formatını seç. CSS qaydaları üçün HEX, RGB, RGBA, HSL və HSLA geniş istifadə olunan seçimlərdir. HSV isə daha çox redaktə interfeyslərində və rəng hesablamalarında işlədilir.

Çevirmə serverdə həyata keçirilir. Daxil etdiyin dəyər HTTPS vasitəsilə serverə ötürülür və saxlanılmır. Ayrı-ayrı rənglər nadir hallarda məxfi məlumat sayılsa da, yayımlanmamış palitranı və ya dizayn tokenləri dəstini onlayn xidmətə göndərməzdən əvvəl onların məxfi olub-olmadığını nəzərə al.

Boşluqlar və durğu işarələri RGB, HSL və əlaqəli sintaksisin bir hissəsidir. Faiz işarələri isə faizlə göstərilən dəyərləri fərqləndirir. Tək ədəd, boş dəyər və ya təsadüfi mətn rəngi müəyyən etmir. Diakritik işarəli və latın qrafikasında olmayan mətnin də bu rəqəmsal formatlarda müəyyən edilmiş mənası yoxdur.

Çevrilmiş dəyərləri necə oxumalıyam?

Hər nəticəni eyni rəngin başqa yazılış forması kimi oxu. Kanal diapazonlarına, faizlərə və alpha şəffaflığına xüsusi diqqət yetir. Hansı sahəni köçürəcəyin qəbul edən sistemin dəstəklədiyi rəng yazılışından asılıdır.

Altırəqəmli HEX formatında ilk cüt qırmızını, ikinci cüt yaşılı, üçüncü cüt isə mavini göstərir. Məsələn, #336699 daxilində 33, 66 və 99 onaltılıq kanal dəyərləridir. Bunların onluq RGB qarşılıqları müvafiq olaraq 51, 102 və 153-dür.

Rəng çaları adətən rəng dairəsi üzərində bucaqla ifadə olunur. Doyma səviyyəsi, açıqlıq və ya dəyər isə çox vaxt faizlə göstərilir. HSL açıqlığı ilə HSV dəyəri fərqli üsullarla hesablanır. Buna görə onların faizlərini eyni xüsusiyyəti ölçürmüş kimi müqayisə etmək olmaz.

Alpha qeyri-şəffaflıq səviyyəsini göstərir. Tam qeyri-şəffaf rəng üçün alpha dəstəkləyən formata ehtiyac yoxdur, yarımşəffaf rəng üçün isə var. RGBA və ya HSLA rəngini adi RGB, HSL və ya altırəqəmli HEX formatına köçürsən, hədəf yazılışda alpha kanalını qeyd etmək mümkün olmayacaq.

Bu çevirici ətraflı diaqnostik mesajlar verən sintaksis yoxlayıcısı kimi sənədləşdirilməyib. Səhv yazılmış dəyərdə problemin dəqiq hansı simvoldan qaynaqlandığını müəyyən etmək üçün ona güvənmə. Geniş yayılmış rəng sintaksisi səhvlərinə HEX dəyərində heş işarəsinin olmaması, bağlanmamış mötərizələr, buraxılmış faiz işarələri, gözlənilən diapazondan kənar alpha dəyəri və HSL ilə RGB kanal qaydalarının qarışdırılması daxildir.

Rəng çevirmə nümunələri

Kiçik bir nümunə HEX, RGB, HSL və HSV formatlarının bir-biri ilə əlaqəsini göstərir. Saf qırmızı aşağıdakı ekvivalent formalarda yazıla bilər.

• HEX giriş dəyəri #ff0000
• RGB qarşılığı rgb(255, 0, 0)
• HSL qarşılığı hsl(0, 100%, 50%)
• HSV qarşılığı hsv(0, 100%, 100%)

Doyma səviyyəsi daha aşağı olan rəng nümunəsində #336699 dəyərinin qarşılığı rgb(51, 102, 153) olur. Onun HSL yazılışı hsl(210, 50%, 40%), HSV yazılışında isə rəng çaları 210 dərəcə, doyma səviyyəsi təxminən 66,7%, dəyəri isə 60%-dir. İnterfeys onluq dəyərləri yuvarlaqlaşdıra və ya boşluqları fərqli yerləşdirə bilər. Bu, praktik mənanı dəyişmir.

Şəffaflıq başqa bir sadə nümunədir. rgba(255, 0, 0, 0.5) və hsla(0, 100%, 50%, 0.5) hər ikisi 50% qeyri-şəffaflığa malik qırmızı rəngi təsvir edir. CSS-də geniş istifadə olunan səkkizrəqəmli HEX qaydasına əsasən uyğun dəyər #ff000080 olur. Buradakı 80 kvantlaşdırılmış alpha baytıdır.

Rəngi çevirmək nə vaxt faydalıdır?

Qəbul edən tətbiq başqa yazılış tələb etdikdə və ya fərqli təqdimat xətaları aşkarlamağı asanlaşdırdıqda rəngi çevirmək faydalıdır. Məsələn, Figma dəyərini CSS fərdi xüsusiyyətinə çevirmək, Chrome DevTools-da tapılmış RGBA dəyərini yoxlamaq, API sorğusunun məlumatları üçün rəng sahələri hazırlamaq və ya üçüncü tərəf mövzu məlumatlarını istifadəyə verməzdən əvvəl nəzərdən keçirmək lazım ola bilər.

Mövcud rəng yazılışı hədəf sistem tərəfindən artıq dəstəklənirsə, çevirməyə adətən ehtiyac yoxdur. Yalnız maşın tərəfindən oxunan CSS üçün altırəqəmli HEX dəyərini RGB-yə çevirməyin ciddi üstünlüyü yoxdur. Təkrar çevirmələr HSL və ya HSV dəyərlərində yuvarlaqlaşdırmaya səbəb ola bilər. Eyni qaydada, bütün rənglərin tam qeyri-şəffaf olduğu məlumdursa, alpha kanalı əlavə etmə.

Məlum dəyəri çevirmək əvəzinə rəngi vizual olaraq seçmək istəyirsənsə, Rəng seçici daha birbaşa seçimdir. Rəng çevirmə kontrast yoxlamasını, rəng korluğu simulyasiyasını və ya rəng profillərinin idarə olunmasını da əvəz etmir. Ekvivalent rəqəmsal dəyərlər ön plandakı mətnin WCAG kontrast tələblərinə cavab verdiyini sübut etmir.

Tez-tez verilən suallar

Çevirici CSS rəng adlarını qəbul edir?

Xeyr. Sənədləşdirilmiş giriş formatları HEX, HEX alpha, RGB, RGBA, HSV, HSL və HSLA-dır. Buna görə red, rebeccapurple və ya transparent kimi adlar dəstəklənən girişlər arasında göstərilmir. Rəng adını daxil etməzdən əvvəl onu rəqəmsal CSS dəyərinə çevir.

Üçrəqəmli HEX dəyəri daxil edə bilərəm?

Qəbul edilən girişlərə HEX daxildir, lakin dəstəklənən HEX uzunluqları sənədləşdirilməyib. Nəticənin proqnozlaşdırıla bilməsi üçün #369 kimi qısa yazılışı #336699 formasına genişləndir. Eyni qayda alpha ehtiva edən dördrəqəmli qısa yazılışa da aiddir.

Rəng dəyəri əvəzinə bütöv CSS deklarasiyasını yerləşdirə bilərəm?

Bütöv deklarasiyanı deyil, yalnız rəng dəyərini daxil et. Məsələn, color: #336699; əvəzinə #336699 istifadə et, çünki xüsusiyyət adı və nöqtəli vergül rəngin özünə daxil deyil. Dəyəri JSON və ya konfiqurasiya faylından köçürürsənsə, ətrafındakı dırnaq işarələrini sil.

Nəticədə geniş rəng qamutu və ya rəng profili məlumatları saxlanılacaq?

Xeyr. Geniş rəng qamutu formatları və ya daxil edilmiş rəng profilləri dəstəklənən formatlar arasında göstərilmir. Display P3, Lab, LCH və ICC profil məlumatlarında mövcud HEX, RGB, HSL və HSV sahələrinin ifadə edə bilmədiyi məlumatlar var. Rəng profilini nəzərə alan çevirmə tələb olunursa, rəng idarəetməsini dəstəkləyən tətbiqdən istifadə et.

Çevrilmiş dəyərlərdə niyə bəzən onluq kəsrlər olur?

İlkin RGB kanalları tam ədədlər olsa belə, HSL və HSV hesablamaları kəsr faizləri yarada bilər. Bu rəqəmlərin yuvarlaqlaşdırılması sonradan RGB-yə geri çevirmə zamanı rəngi cüzi dəyişə bilər. Dizayn tokenlərini saxlayarkən mövcud dəqiqliyi qoru. Yalnız hədəf format və ya kodlaşdırma standartı tələb etdikdə yuvarlaqlaşdır.