Damcı ilə rəng seçici

Müasir responsiv veb tərtibatında brauzer pəncərəsində göstərilən şəkil nadir hallarda öz yerli piksel ölçülərinə uyğun gəlir. Yüksək ölçülü fotolar (məsələn, 6000x4000 px) CSS düzüm mühərrikləri tərəfindən responsiv ekran konteynerlərinə (məsələn, 800x533 CSS piksel) sığmaq üçün kiçildilir. Bundan əlavə, yüksək DPI-lı ekranlar (Apple Retina və ya 4K masaüstü ekranları kimi) Cihaz Piksel Nisbəti (DPR) miqyas əmsalı gətirir və CSS düzüm koordinatlarını fiziki ekran piksellərindən ayırır.

Rəng seçici kursorun ekran mövqeyini sadəlövhcəsinə oxuyarsa, həqiqi şəkil məlumatı əvəzinə kiçildilmiş, bulanıq ekran təsvirindən nümunə götürür. Mühərrikimiz ciddi koordinat xəritələmə çevrilmələri tətbiq edir. Kursorunuz kətan üzərinə gəldikdə siçan hadisəsi koordinatları $(x_{\text{css}}, y_{\text{css}})$ şəklin daxili sıxılmamış raster buferinə proyeksiya olunur: $$X_{\text{native}} = \left\lfloor \frac{x_{\text{css}} - \text{rect.left}}{\text{rect.width}} \times \text{Width}_{\text{native}} \right\rfloor$$ $$Y_{\text{native}} = \left\lfloor \frac{y_{\text{css}} - \text{rect.top}}{\text{rect.height}} \times \text{Height}_{\text{native}} \right\rfloor$$ Yerli piksel massivində dəqiq tam ədəd koordinatını hesablamaqla damcımız ekran kiçiltməsini, CSS bulanıqlıq filtrlərini və brauzer interpolyasiyasını tamamilə keçərək miqyaslanmamış master fayldan həqiqi 8 bitlik kanal dəyərlərini çıxarır.

Yüksək ölçülü tipoqrafiyadan, incə ikon xətlərindən və ya vektor kənarlarından vizual böyütmə olmadan rəng nümunəsi götürmək məlum dərəcədə məyusedicidir. Kompüter monitorları əyri vektorları və diaqonal hərf formalarını subpiksel hamarlaşdırma ilə göstərdiyi üçün tünd hərf ilə ağ fon arasındakı sərhəd kəskin ikili kənar deyil; aralıq yarımşəffaf boz tonların tədrici çoxpiksellik keçididir.

Təcrübəsiz istifadəçi böyütmə olmadan qara hərfin kənarına yaxın klikləyəndə demək olar ki, həmişə həqiqi #000000 nüvə rəngi əvəzinə hamarlaşdırılmış keçid pikselindən (məsələn, #7A7A7A və ya #B4B4B4) nümunə götürür. İnteraktiv 10x böyüdücümüz bu təxmini tamamilə aradan qaldırır.

Kursorunuz şəkil üzərində sürüşərkən böyüdücü kursorunuzun mərkəzində ayrı-ayrı piksel şəbəkə xətləri və dəqiq nişangah hədəfi ilə 10x böyüdülmüş piksel matrisini göstərir. Hər diskret kvadrat pikseli vizual yoxlaya, kənar bulanıqlığından asanlıqla qaça və dəqiq bütöv nüvə rənginə kilidlənə bilərsiniz.

Müasir yaradıcı tərtibat hədəf mühitdən asılı olaraq bir neçə riyazi model üzrə rəng təriflərini tələb edir: 1. Onaltılıq (#RRGGBB): Veb tərtibatı üçün universal rəqəmsal standart; 8 bitlik kanal tam ədədlərini (0–255) 16-lıq sətirlərə çevirir. 2. Toplanan sRGB: Qırmızı, yaşıl və mavi ekran emitterlərinin intensivliyini ifadə edən tam ədəd üçlükləri $(R, G, B)$. 3. Silindrik HSL və HSV: Çalar, Doyğunluq və Açıqlıq (və ya Dəyər). Frontend mühəndisləri müasir CSS dizayn sistemlərində HSL-ə böyük üstünlük verir: Çaları və Doyğunluğu kilidləyib Açıqlığı ($L$) dəyişdirməklə tərtibatçılar CSS dəyişənləri vasitəsilə əlçatan hover vəziyyətlərini, aktiv düymə vəziyyətlərini və qaranlıq rejim tokenlərini dinamik yarada bilərlər. 4. Çıxılan CMYK: Dörd rəngli proses mürəkkəb çapını (Firuzəyi, Qırmızı-bənövşəyi, Sarı, Açar/Qara) təxmini ifadə edir. Alətimiz standart çıxılan çevirmələri hesablayır: $K = 1 - \max(R', G', B')$, $C = (1 - R' - K)/(1 - K)$ və s., çap istehsalına ötürmə üçün sürətli istinad körpüsü təmin edir.

Frontend tərtibatçıları arasında geniş yayılmış məyusluq ƏS damcı alətinin (macOS Digital Color Meter kimi) niyə orijinal dizayn maketindən fərqli hex kodları verməsidir. Səbəbkar ekran rəng idarəetməsidir.

Müasir noutbuklar (Apple MacBook-lar kimi) standart sRGB-dən 25% çox rəng göstərə bilən geniş qamutlu Display P3 ekranlarına malikdir. Əməliyyat sistemi sRGB şəklini P3 ekranında göstərdikdə ƏS pəncərə meneceri rəng dəyərlərini aktiv monitor ICC profili vasitəsilə çevirir. Ekrandan ƏS utiliti ilə nümunə götürsəniz, orijinal sRGB fayl baytı əvəzinə monitora uyğunlaşdırılmış P3 dəyərini tutursunuz!

Brauzerdaxili Damcı ilə rəng seçicimiz dekodlanmış şəkil buferini hər hansı ƏS monitor profili rəng xəritələnməsi baş verməzdən əvvəl birbaşa JavaScript yaddaşında oxuyur. Faylda kodlanmış dəqiq, riyazi olaraq təmiz rəng baytlarını alırsınız və bu, tərtibat, staging və istehsal mühitləri üzrə 100% uyğunluğu təmin edir.

Rəng çıxarılması ahəngdar vizual kimlik dizaynına ilk qapıdır. Damcı ilə rəng seçicini 2run.tools dəstindəki qonşu utilitlərlə birləşdirin: 1. Damcı ilə rəng seçici ilə dəqiq nümunələmə: İstinad təsvirinin üzərinə 10x böyüdücü ilə gəlin və əsas, ikinci dərəcəli və neytral HEX kodlarını kopyalamaq üçün klikləyin. 2. Əsas rəngləri çıxar və Rəng palitrası yarat ilə avtomatlaşdırılmış palitra yaradılması: Tam ahəngdar rəng sxemlərini, triad harmoniyalarını və tamamlayıcı keçidləri çıxarın. 3. Rəng tonu örtüyü ilə brend aktivlərinin bütövlüyü: Fon fotoqrafiyasını Rəng tonu örtüyü ilə eyni brend rəng atmosferinə bələyin. 4. Çərçivə əlavə et ilə çərçivələmə və vurğular: Əsas qrafikaları Çərçivə əlavə et alətində dəqiq nümunə götürülmüş brend rəngləri ilə çərçivələyin. 5. Məxfilik təmizlənməsi və paylanma: EXIF və GPS metadatasını sil ilə həssas kamera metadatasını silin, sonra veb aktivlərini Şəkli sıx və ya PNG-dən WebP-yə ilə sıxın.