Renk Kodu Çevirici

HEX, RGB(A) ve HSL(A) renk formatlarını dönüştürün, alpha kanalını görün ve canlı renk önizleyin.

Renk Kodu Çevirici

HEX, RGB(A) ve HSL(A) renk kodlarını tek alanda dönüştürün ve canlı önizleme görün.

Örnek: `#1D4ED8`, `rgb(29, 78, 216)`, `hsl(221, 76%, 48%)`

Önizleme

Geçerli renk
Kırmızı
29
Yeşil
78
Mavi
216
Alfa
1

Dönüşümler

HEX
#1D4ED8
HEX + alpha
#1D4ED8FF
RGB
rgb(29, 78, 216)
RGBA
rgba(29, 78, 216, 1)
HSL
hsl(224.28, 76.33%, 48.04%)
HSLA
hsla(224.28, 76.33%, 48.04%, 1)

Bu hesaplamayi arkadasinla paylas

Link, paylasim kaynagi bilgisiyle kopyalanir.

Araç ne yapar?

Tek input ile HEX, RGB(A) ve HSL(A) gibi yaygın CSS renk formatlarını çözer ve eşdeğer çıktıları aynı ekranda gösterir.

Canlı önizleme, alpha değeri ve kopyalanabilir formatlar sayesinde tasarım ile frontend uygulaması arasındaki renk aktarımı hızlanır.

Ne zaman kullanılır?

Tasarım sistemi, komponent dokümantasyonu, tema değişkenleri ve hızlı CSS kontrolü akışlarında kullanışlıdır.

Bir marka renginin HEX olarak geldiği, fakat CSS değişkeninde RGB veya HSL gerektiği durumlarda manuel dönüşüm hatasını azaltır.

Formatlar nasıl ilişkilidir?

HEX ve RGB aynı sRGB kırmızı, yeşil ve mavi kanal değerlerini farklı yazım biçimleriyle ifade eder.

HSL ise tonu, doygunluğu ve açıklığı daha tasarım odaklı bir modelle gösterir; aynı rengin okunmasını kolaylaştırabilir.

Alpha kanalı ne anlama gelir?

Alpha değeri rengin opaklık bilgisidir ve arka planın ne kadar görüneceğini etkiler.

Yarı saydam renkler farklı zeminlerde farklı algılanabilir; bu nedenle önizleme sonucu gerçek arayüz zemininde de kontrol edilmelidir.

Uygulama kalitesi için ipuçları

Renk dönüşümü görsel erişilebilirlik kararı vermez; kontrast oranı ayrıca kontrol edilmelidir.

Tasarım token'larında tek bir kaynak format seçmek, aynı rengin farklı varyantlarının kontrolsüz çoğalmasını engeller.

Sınırlamalar

Araç yaygın CSS renk formatları için pratik dönüşüm sağlar; tüm geniş gamut, cihaz profili veya renk yönetimi senaryolarını garanti etmez.

Kritik marka, baskı veya erişilebilirlik kararlarında resmi CSS dokümantasyonu, tasarım sistemi ve gerçek cihaz testleri ayrıca kullanılmalıdır.

Resmi Kaynaklar