Rəng seçici

Rəng seçici brauzerdə rəng seçməyə və onun dəyərini lazım olan formatda əldə etməyə imkan verən pulsuz alətdir.

Rəng seçici hansı nəticəni qaytarır?

Rəng seçici dairədə seçdiyin rəngin ədədi ifadəsini qaytarır. Eyni görünən rəngi bir neçə formatda göstərmək olar. Ən çox onaltılıq, RGB, RGBA, HSL və ya HSLA formatlarından istifadə edilir.

Bu formatlar rəngi müxtəlif üsullarla təsvir edir. Onaltılıq format və RGB qırmızı, yaşıl və mavi kanalların dəyərlərini göstərir. HSL rəng çalarını, doyma səviyyəsini və açıqlığı ifadə edir, buna görə sistemli düzəlişlər etmək daha asan ola bilər. Alfa kanalı olan formatlar qeyri-şəffaflığı da göstərir.

• Onaltılıq dəyərlər əvvəlində heş işarəsi olan onaltılıq rəqəmlərdən ibarətdir, məsələn, #336699.
• RGB dəyərlərində hər kanal adətən 0-dan 255-dək rəqəmlə göstərilir, məsələn, rgb(51, 102, 153).
• HSL dəyərləri rəng çalarının bucağını, doyma səviyyəsini və açıqlığı faizlə göstərir, məsələn, hsl(210, 50%, 40%).
• RGBA və HSLA şəffaflıq əlavə edir. Alfa dəyəri 0 olduqda rəng tam şəffaf, 1 olduqda isə tam qeyri-şəffaf olur.

CSS adlandırılmış rəngləri də dəstəkləyir, lakin bu adlar yalnız sabit rəng dəstini əhatə edir və dəqiq dizayn tokenləri üçün o qədər də uyğun deyil. Yaradılan ədədi dəyərləri dizayn sistemləri, stil cədvəlləri və tətbiq kodu arasında ötürmək adətən daha asandır.

Rəng seçicidən necə istifadə edim?

Color sahəsini seç, rəng dairəsində lazım olan nöqtəyə toxun, sonra alınan dəyəri tətbiqinin tələb etdiyi formatda istifadə et. Bütün əməliyyat brauzerində aparılır və seçdiyin rəng heç vaxt serverə göndərilmir.

Mövcud interfeyslə işləyirsənsə, kod bazasında artıq istifadə olunan formatdan başla. Beləliklə, lazımsız rəng çevirmələrinin qarşısını alar və pull request-lərin yoxlanmasını asanlaşdırarsan. Üçüncü tərəf məlumatlarını nəzərdən keçirərkən dəyərlərdə qeyri-şəffaflıq parametrinin olub-olmadığını müəyyən et, yalnız bundan sonra onları zahirən eyni görünən rənglə əvəzlə.

Yayımlamazdan əvvəl nəzərdə tutulan rəngi seç və ya yenidən yarat, uyğun yazılış formasını köçür, sonra onu komponentin real vəziyyətində yoxla. Adi, üzərinə gətirmə, fokus və deaktiv vəziyyətlərini ayrı-ayrılıqda sına. Qeyri-şəffaflıq və miras alınan üslublar yekun görünüşü dəyişə bilər.

Nəticəni necə oxumaq olar?

Nəticəni istifadə olunan rəng modelinə uyğun oxu və koda köçürməzdən əvvəl alfa komponentini yoxla. RGB modelində hər kanalın dəyəri müvafiq qırmızı, yaşıl və ya mavi komponentin intensivliyini idarə edir. HSL modelində rəng çaları dairə boyunca dəyişir, doyma rəngin intensivliyini, açıqlıq isə qara ilə ağ arasındakı tarazlığı müəyyənləşdirir.

CSS və ya strukturlaşdırılmış məlumatlarda rəng sintaksisinə ciddi riayət olunmalıdır. Əl ilə redaktə zamanı tez-tez bu səhvlərə yol verilir:

• CSS-dəki onaltılıq dəyərin əvvəlində heş işarəsinin yazılmaması;
• standart onaltılıq uzunluqlara uyğun olmayan beş və ya yeddi rəqəmdən istifadə edilməsi;
• RGB tətbiqinin kanal rəqəmləri gözlədiyi yerdə faizlərin yazılması;
• köhnə RGB sintaksisində vergüllərin unudulması və ya bir-birinə uyğun gəlməyən köhnə və müasir sintaksislərin qarışdırılması;
• alfa kanallı dəyərin yalnız altırəqəmli onaltılıq formatı qəbul edən proqrama köçürülməsi;
• CSS-də 0.5 kimi onluq nöqtə tələb olunduğu halda 0,5 kimi onluq vergüldən istifadə edilməsi.

Rəng seçici ümumi CSS yoxlayıcısı deyil, yalnız rəng dəyərləri yaradır. O, ətrafdakı deklarasiyanın, JSON sənədinin və ya mövzu faylının düzgünlüyünü təsdiqləmir. Buna görə rəng dəyərindən kənardakı sintaksis xətalarını uyğun parser və ya proqramlaşdırma aləti ilə ayrıca yoxlamaq lazımdır.

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

Altırəqəmli onaltılıq rəngdə hər rəqəm cütü qırmızı, yaşıl və mavi kanala uyğun gəlir. Məsələn, aşağıdakı yazılışların hamısı eyni qeyri-şəffaf rəngi təsvir edir.

Onaltılıq dəyər #336699

RGB ekvivalenti rgb(51, 102, 153)

HSL ekvivalenti hsl(210, 50%, 40%)

Üçrəqəmli onaltılıq format qısa yazılışdır. Altırəqəmli dəyər yaratmaq üçün hər rəqəm təkrarlanır.

Qısa onaltılıq dəyər #fff

Genişləndirilmiş onaltılıq dəyər #ffffff

RGB ekvivalenti rgb(255, 255, 255)

Səkkizrəqəmli onaltılıq formatda alfa dəyəri qırmızı, yaşıl və mavi cütlərdən sonra gəlir. Kanal sırasını fərqli qaydada qəbul edən və ya səkkizrəqəmli yazılışı dəstəkləməyən sistemlərdə diqqətli ol. Zahiri baxımdan eyni olan bütöv rəng başqa fonun üzərində qeyri-şəffaflıq tətbiq edildikdə fərqli nəticə də verə bilər.

Hansı rəng formatını seçim?

Dəyişmək üçün aydın səbəb yoxdursa, təyinat yerinin artıq gözlədiyi rəng yazılışını seç. Altırəqəmli onaltılıq format yığcamdır və CSS dəyişənlərində, eləcə də dizayn tokeni fayllarında geniş istifadə olunur. Proqram kanal dəyərlərini birbaşa göstərirsə, RGB əlverişlidir. Açıqlığı və ya doyma səviyyəsini dəyişərək əlaqəli rənglər yaratmaq üçün isə HSL faydalıdır.

• Yığcamlıq və geniş oxunaqlılıq vacibdirsə, qeyri-şəffaf veb rəngi üçün altırəqəmli onaltılıq formatdan istifadə et.
• Səkkizrəqəmli onaltılıq formatdan yalnız hədəf mühit həmin yazılışda alfa kanalını açıq şəkildə dəstəkləyirsə istifadə et.
• Qırmızı, yaşıl və mavi kanallarla ayrı-ayrılıqda işləyərkən RGB və ya RGBA seç.
• Rəng çaları, doyma səviyyəsi və ya açıqlıq əsasında proqramla mövzu variantları yaratmaq üçün HSL və ya HSLA istifadə et.
• Artıq mövcud dəyəri vizual olaraq yeni rəng seçmək əvəzinə başqa formata çevirmək istəyirsənsə, Rəng çeviricidən istifadə et.

Ekrandakı RGB dəyərini çap spesifikasiyası kimi qəbul etmə. Kommersiya çapı üçün CMYK dəyərləri, ICC rəng profili, sınaq çapı və mətbəə ilə razılaşdırma tələb oluna bilər. Təkcə riyazi çevirmə çap rənginin işıqlanan ekranla eyni görünəcəyinə zəmanət vermir.

Rəng seçmək və ya çevirmək nə vaxt lazım deyil?

Mövcud dəyər təyinat yerinin tələb etdiyi formatdadırsa, rəngi seçməyə və ya çevirməyə ehtiyac yoxdur. Təkrar çevirmə yuvarlaqlaşdırma fərqlərinə, hərf registrində uyğunsuzluğa və ya mənbə fayllarında lazımsız dəyişikliklərə səbəb ola bilər.

Literal dəyərlə əvəzləməkdənsə, mövzu dəyişəni kimi adlandırılmış dizayn tokenini saxlamaq da daha düzgün ola bilər. Tokenlər komponentlər arasındakı əlaqəni qoruyur və rəngi mərkəzləşdirilmiş qaydada dəyişməyə imkan verir. Eyni şəkildə, yalnız maşın tərəfindən istifadə edilən rəngi kimsə yoxlamalı və ya idarə etməli deyilsə, onu insanlar üçün daha rahat oxunan formada göstərməyə ehtiyac yoxdur.

Heç bir rəng seçici seçimin kifayət qədər kontrastlı olduğunu, brend spesifikasiyasına uyğun gəldiyini və ya rəng görmə çatışmazlığı olan insanlar tərəfindən seçilə bildiyini təkbaşına müəyyən edə bilməz. Ön plan və fon kombinasiyalarını xüsusi kontrast aləti ilə yoxla, interfeysə də istifadə olunduğu kontekstdə bax.

Tez-tez verilən suallar

Nəticəni CSS dəyişənlərində istifadə edə bilərəm?

Bəli, seçilən yazılış dəstəklədiyin brauzerlər və yığım alətləri üçün etibarlı CSS sintaksisidirsə, istifadə edə bilərsən. Tam dəyəri xüsusi xassədə saxla, sonra ona var() funksiyası ilə müraciət et. Layihə ayrı-ayrı kanalları emal edirsə, həmin kanalları layihədə artıq qəbul olunmuş qaydaya uyğun saxlamaq daha rahat ola bilər.

Eyni rəng başqa ekranda niyə fərqli görünür?

Ekranların kalibrlənməsi, parlaqlığı, panel texnologiyası və rəng qammasını dəstəkləmə səviyyəsi fərqlənir. Brauzerin rəng idarəetməsi və əməliyyat sisteminin ekran profili də görüntüyə təsir edə bilər. Buna görə ədədi dəyərlərin eyni olması rəngin bütün cihazlarda fiziki baxımdan eyni görünəcəyinə zəmanət vermir.

Onaltılıq dəyərdə böyük və kiçik hərflər rəngi dəyişir?

Xeyr. Onaltılıq sistemdə A-dan F-dək hərflər registrdən asılı deyil. Buna görə #AABBCC və #aabbcc eyni rəngi ifadə edir. Yalnız formatlama ilə bağlı dəyişikliklər yaranmasın deyə repozitoriyada qəbul edilmiş hərf registrinə əməl et.

Rəng dəyərində aksentli və ya latın əlifbasına aid olmayan simvollar ola bilər?

Standart onaltılıq, RGB və HSL yazılışlarında ASCII rəqəmləri, hərfləri və durğu işarələri istifadə olunur. Aksentli və ya latın əlifbasına aid olmayan simvollar bu ədədi rəng sintaksislərinin bir hissəsi deyil. Müvafiq proqramlaşdırma dili və fayl kodlaşdırması icazə verirsə, belə simvollar ətrafdakı dəyişən adlarında və ya metadata daxilində işlənə bilər.

Şəffaf rəng rəngin olmaması deməkdir?

Xeyr. Tam şəffaf rəng özü görünməsə də, kanal dəyərlərini saxlayır. Bu gizli kanallar animasiya, interpolyasiya, kompozisiya və ya qeyri-şəffaflığın sonradan dəyişdirilməsi zamanı əhəmiyyət daşıya bilər. Tətbiq belə davranışdan istifadə edirsə, həmin dəyərləri qoru.

Kanalların onluq dəyərlərini yuvarlaqlaşdırmalıyam?

Rəng kanallarının və alfa parametrinin onluq dəyərlərini yalnız təyinat yerinin qəbul etdiyi və ardıcıl nəticə üçün lazım olan dəqiqliyə qədər yuvarlaqlaşdır. Həddindən artıq dəqiqlik dəyərlərin yoxlanmasını çətinləşdirir, sərt yuvarlaqlaşdırma isə rəngdə kiçik fərq yarada bilər. Yuvarlaqlaşdırdıqdan sonra komponentin görünüşünü nəzərdə tutulan fon və qarşılıqlı əlaqə vəziyyətləri ilə birlikdə yoxla.