Hex renk kodları: #RRGGBB nasıl çalışır

Hex renk kodu nasıl çalışır

Ekrandaki her renk kırmızı, yeşil ve mavi ışığın karışımıdır. Hex kodu her ışığın gücünü # işaretinden sonra iki karakterle yazar: önce kırmızı, sonra yeşil, sonra mavi. #RRGGBB kalıbı budur.

Bu karakterler onaltılıktır, yani 16 rakamla sayma yöntemi: 0’dan 9’a, ardından a (10), b (11), c (12), d (13), e (14) ve f (15). Bir çift 00 (0) ile ff (255) arasında 256 değeri kapsar. Bu da tam olarak rgb() aralığıdır.

Bir çifti normal sayıya çevirmek için ilk basamağı 16 ile çarpıp ikinci basamağı ekleyin. Aşağıda CSS rengi dodgerblue olan #1e90ff önce dört formatta, ardından çift çift hesaplanmış olarak yer alıyor.

Yani #1e90ff, rgb(30, 144, 255) demektir: biraz kırmızı, epey yeşil ve tam mavi. Toplamda parlak bir gök mavisi çıkar. 256 değerli üç çift, 16.777.216 olası renk verir.

3 ve 4 basamaklı hex kısaltması

Her çiftin iki basamağı aynıysa her çifti tek basamakla yazabilirsiniz. #ffcc00, #fc0 olur ve tarayıcı her basamağı yeniden ikiler. #1e90ff için kısa biçim yoktur, çünkü 1e ve 90 tekrarlanan çiftler değildir.

Kısa biçim 16,7 milyon rengin yalnızca 4.096 tanesini kapsar. Dört basamaklı sürüm aynı yolla opaklık ekler, yani #f008, #ff000088 demektir.

Hex opaklık: alfalı 8 basamaklı hex

Sekiz basamaklı kod, alfa yani opaklık için dördüncü bir çift ekler: #RRGGBBAA. 00 tamamen şeffaf, ff tamamen opaktır. Tüm güncel tarayıcılar bunu CSS’te, dört basamaklı #RGBA kısaltmasıyla birlikte destekler.

Çifti bulmak için opaklığı 255 ile çarpın, tam sayıya yuvarlayın ve hex’e çevirin. %50, 127,5 eder. Bu değer 128’e yuvarlanır ve 80 olarak yazılır. İşte #1e90ff rengine uygulanmış tam tablo.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

İki incelik var. Birincisi, 80 değeri 255 üzerinden 128’dir. Bu da tam %50 değil, %50,2 eder: hex alfanın yalnızca 256 adımı vardır, bu yüzden yuvarlak yüzdelerin çoğu ancak yaklaşık olarak karşılanır. İkincisi, Android alfayı başa koyar. Bir Android renk kaynağında #801e90ff, CSS’teki #1e90ff80 ile aynı anlama gelir.

Hex kodu gözle nasıl okunur

Hiçbir şey dönüştürmeden bir rengi tahmin edebilirsiniz. Her çiftin ilk basamağına bakın, çünkü bilginin neredeyse tamamı ondadır.

• İlk basamağı en büyük olan kanal baskın ışıktır. #d2691e rengi kırmızıda d, yeşilde 6, mavide 1 taşır, yani turuncumsu bir kahverengidir.
• İki yüksek kanal birbirine karışır: kırmızı ve yeşil sarı, yeşil ve mavi camgöbeği, kırmızı ve mavi macenta ya da mor verir.
• Üç eşit çift gri verir. #333333 koyu gri, #999999 açık gridir. #708090 gibi neredeyse eşit çiftler soluk, grimsi bir renk verir.
• Genel olarak yüksek basamaklar açık, düşük basamaklar koyu bir renk demektir. Üç çiftin hepsi c0 veya üzerindeyse renk uçuktur. Üçü de 30 veya altındaysa renk çok koyudur.
• Aynı sayıda yeşil, maviden çok daha parlak görünür. #00ff00 için OKLCH açıklığı 0,866, #0000ff için ise yalnızca 0,452.

#808080 neden orta gri değildir

#808080 sayısal olarak tam ortadadır: her kanalda 255 üzerinden 128. Ama siyahla beyazın tam ortasında görünmez. OKLCH açıklığı 0,600’dür, yani beyaza giden yolun %60’ında gibi algılanır.

Hex değerleri zaten sRGB eğrisiyle kodlanmıştır. Bu eğri gözü kabaca izler, ama tam olarak değil. #808080 beyazın ışığının yaklaşık %21,6’sını yayar ve algısal modeller görsel orta noktayı daha aşağıya koyar: OKLCH’de #636363, CIELAB’da #777777.

Bu, metin için önemlidir. Beyaz üzerinde #808080 gri 3,95:1 verir ve gövde metni için WCAG AA’yı geçemez. #767676, 4,5:1’i geçen en açık gridir. Ondan bir adım açık olan #777777 ise 4,48:1 ile zaten kalır.

Büyük mü küçük harf mi, # ile mi # olmadan mı

Hex kodları büyük/küçük harfe duyarlı değildir. #1E90FF, #1e90ff ve #1E90ff CSS’te, SVG’de ve tasarım araçlarında aynı renktir. Bir stil seçin ve her yerde ona bağlı kalın ki kodunuzda yapacağınız bir arama her kullanımı bulsun. CSS’te yaygın tercih küçük harftir.

# işareti rengin değil, CSS sözdiziminin parçasıdır. Figma ve birçok tasarım aracı kodu işaretsiz gösterir. Programlama dilleri ise onu çoğu zaman 0x önekli bir sayı olarak yazar. Örneğin Flutter’da Color(0xFF1E90FF) alfa çiftiyle başlar.

Ekrandaki bir rengin hex kodu nasıl bulunur

Bir damlalık kullanın: imlecin altındaki rengi okuyup kodunu gösteren bir araç. Bu araçlar ücretsizdir ve çoğu zaten yüklüdür.

• Chrome ve Edge: F12 ile Geliştirici Araçları’nı (DevTools) açın, Stiller panelindeki herhangi bir renk karesine tıklayın ve sayfadan renk almak için damlalık simgesini kullanın.
• PickShade: ana sayfadaki renk seçicide, Chrome ve Edge’de ekranın herhangi bir yerinden renk alan bir damlalık düğmesi bulunur.
• Windows: Microsoft PowerToys’u yükleyin ve Renk Seçici’yi açmak için Win + Shift + C tuşlarına basın.
• macOS: Uygulamalar, İzlenceler içinden Digital Color Meter’ı açın. sRGB’ye geçin, ardından Görüntü, Değerleri Göster menüsünden Onaltılık seçeneğini seçin.
• Figma, Photoshop ve çoğu tasarım uygulaması: damlalık için I tuşuna basın.
• Bir fotoğrafta veya ekran görüntüsünde: görseli resimden renk seçme aracında açın ve herhangi bir piksele tıklayın. Görsel cihazınızdan çıkmaz.

Seçilen değer orijinalden birkaç birim sapabilir, çünkü ekranlar renk profilleri uygular ve görseller sıkıştırılır. Tam değere ihtiyacınız olduğunda onu ekran görüntüsünden değil, tasarım dosyasından ya da CSS’ten kopyalayın.

Sorular ve yanıtlar