Renk Dönüştürücü – HEX'ten RGB, HSL, HSV ve CMYK'ya

Renk Dönüştürücü nasıl kullanılır

1Herhangi bir formatta bir renk yazın veya yapıştırın — örneğin #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) veya tomato gibi bir CSS adı — ya da renk seçiciyi kullanın.

2Aynı rengin HEX, RGB, HSL, HSV ve CMYK karşılıklarını görün ve ihtiyacınız olan formatı kopyalayın.

3Bu renkteki metnin okunabilir olup olmadığını görmek için siyah ve beyaza karşı kontrast oranını kontrol edin.

4Daha açık ve daha koyu versiyonları keşfetmek için renk tonları ve gölgeler skalasındaki bir renk örneğine tıklayın.

Renkleri tüm yaygın formatlar arasında dönüştürün

Tasarımcılar, geliştiriciler ve pazarlamacılar renkleri sürekli farklı diller konuşan araçlar arasında taşır: CSS HEX veya HSL ister, marka rehberleri RGB ve CMYK kullanır, tasarım uygulamaları ise HSB gösterir. Bu renk dönüştürücü, girdiğiniz rengi tüm bu formatlara anında çevirir ve tek tıkla kopyalamanızı sağlar. Ayrıca erişilebilirlik için metin kontrastını kontrol eder, rengin açık ve koyu tonlarından oluşan bir palet sunar.

Özellikler

Tüm girdi formatları: HEX (3, 4, 6 veya 8 haneli), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, düz sayı üçlüleri ve CSS renk isimleri.
Tüm çıktılar aynı anda: HEX, RGB, HSL, HSV ve CMYK; her biri için kopyalama butonuyla birlikte.
Şeffaflık desteği — alfa değerleri HEX8, RGBA ve HSLA formatlarında korunur.
Yerleşik renk seçici ile görsel olarak renk seçme imkanı.
WCAG kontrast denetleyici ile siyah ve beyaz arka planlarda normal ve büyük metinler için AA seviyesinde sonuçlar.
Açık ve koyu tonlar (%10'dan %90 parlaklığa kadar); yüklemek için herhangi bir renk örneğine tıklayın.

Renk formatları açıklamaları

HEX — Onaltılık (hexadecimal) sistemde #RRGGBB, web tasarımında en yaygın kullanılan formattır. İsteğe bağlı dördüncü çift şeffaflığı belirler.
RGB — 0'dan 255'e kadar kırmızı, yeşil ve mavi; ekranların renkleri gerçekte oluşturma biçimidir.
HSL — ton (renk çarkındaki konumu), doygunluk (yoğunluk) ve parlaklık. Elle ayarlaması kolaydır: aynı rengin daha açık veya daha koyu versiyonlarını elde etmek için sadece parlaklığı değiştirin.
HSV / HSB — tasarım araçlarındaki çoğu renk seçici tarafından kullanılan ton, doygunluk ve değer (parlaklık).
CMYK — baskıda kullanılan camgöbeği (cyan), macenta (magenta), sarı (yellow) ve anahtar (siyah) mürekkep yüzdeleri.

Örnek

Gök mavisi #0EA5E9 rengi rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) ve yaklaşık olarak cmyk(94%, 29%, 0%, 9%) değerindedir. Beyaz üzerindeki kontrast oranı yaklaşık 2.8:1'dir. Bu oran büyük başlıklar ve ikonlar için yeterliyken, 4.5:1 olması gereken gövde metinleri için çok düşüktür. Siyah üzerinde ise yaklaşık 7.6:1'e ulaşarak standartları rahatlıkla karşılar.

Renklerle çalışmak için ipuçları

Paletleri HSL ile oluşturun. Tutarlı buton durumları, arka planlar ve kenarlıklar elde etmek için ton ve doygunluğu sabit tutup parlaklığı değiştirin.
Kontrastı erkenden kontrol edin. Çoğu marka rengi beyaz arka planda metin olarak kullanmak için fazla açıktır; metinlerde paletin daha koyu bir tonunu, vurgularda ise orijinal rengi kullanın.
Sadece renklere güvenmeyin — anlamı ifade etmek için, renk körlüğü olan kullanıcılara yönelik ikonlar veya etiketler ekleyin.
Baskıda farklılık olabileceğini unutmayın. Parlak RGB renkleri, özellikle de canlı mavi ve yeşiller, CMYK baskıda genellikle daha soluk görünür.

Görsellerle de mi çalışıyorsunuz? Görsel Dönüştürücü ile JPG, PNG ve WebP formatları arasında dönüşüm yapabilirsiniz. Küçük bir görseli veya ikonu CSS için kodlamak isterseniz Base64 aracını kullanın.

Sıkça sorulan sorular

HEX'i RGB'ye nasıl dönüştürürüm?

Bir HEX rengi kırmızı, yeşil ve mavi için üç çift onaltılık rakam içerir. Her çifti 16'lık tabandan 10'luk tabana dönüştürün: #FF8800'da FF = 255, 88 = 136 ve 00 = 0'dır, yani renk rgb(255, 136, 0) olur. #F80 gibi üç basamaklı kısaltmalarda önce her rakam ikiye katlanır.

HSL ve HSV (HSB) arasındaki fark nedir?

Her ikisi de bir rengi ton (0–360°) ve doygunluk ile tanımlar, ancak üçüncü değerleri farklıdır. HSL'de %50 açıklık saf renk, %0 siyah ve %100 beyazdır. HSV/HSB'de %100 değer veya parlaklık tam doygunluktaki saf renk, %0 ise siyahtır. Photoshop ve Figma gibi tasarım uygulamaları renk seçicilerinde genellikle HSB kullanırken, CSS HSL kullanır.

CMYK dönüşümü baskı için doğru sonuç verir mi?

CMYK değerleri RGB'den matematiksel olarak dönüştürülür ve bir başlangıç noktası olarak faydalıdır. Gerçek baskı; ICC renk profilleri ile tanımlanan yazıcı, mürekkep ve kağıda bağlıdır. Profesyonel baskı işleri için, tasarım yazılımınızda yazıcınızın profilini kullanarak dönüştürme yapın.

Kontrast oranları ne anlama gelir?

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), metin ve arka plan arasındaki kontrastı 1:1 ile 21:1 arasında ölçer. AA seviyesini geçmek için normal metnin en az 4.5:1, büyük metnin (yaklaşık 24 px veya 18.7 px kalın) ise 3:1 oranına sahip olması gerekir. Kontrol aracı, rengin beyaz ve siyah arka planda testi geçip geçmediğini gösterir.

Hangi giriş formatları destekleniyor?

3, 4, 6 veya 8 haneli HEX (# işaretli veya işaretsiz), rgb() ve rgba(), hsl() ve hsla(), hsv() veya hsb(), cmyk(), 255 136 0 gibi üç düz sayı ve rebeccapurple gibi CSS renk adları. rgb(14 165 233 / 50%) gibi alfa değerleri dahil olmak üzere, hem virgülle ayrılmış hem de modern boşlukla ayrılmış sözdizimi desteklenir.