Renk Dönüştürücü

Renk Dönüştürücü

HEX, RGB, HSL formatları arasında renkleri dönüştürün. Renk seçin ve renk önizlemesi ile anında dönüşümler alın.

Renk Önizleme:
#FF5733
rgb(255, 87, 51)
hsl(9, 100%, 60%)

Renk Dönüştürücü Kullanmanın Avantajları

Çoklu Format

Renkleri HEX, RGB ve HSL formatları arasında gerçek zamanlı güncellemelerle anında dönüştürün.

Görsel Önizleme

Değişiklik yaparken canlı renk önizlemesi ile renginizi gerçek zamanlı olarak görün.

Renk Seçici

Yerleşik renk seçiciyi kullanarak görsel olarak renk seçin ve anında dönüşümler alın.

Gizlilik Önceliği

Tüm renk dönüşümleri tarayıcınızda yerel olarak gerçekleşir. Renkleriniz cihazınızdan hiç ayrılmaz.

Temel Özellikler

HEX'ten RGB'ye dönüşüm
RGB'den HEX'e dönüşüm
HSL'den RGB'ye dönüşüm
RGB'den HSL'ye dönüşüm
Yerleşik renk seçici
Gerçek zamanlı renk önizleme
Tüm formatlar için panoya kopyalama
Tamamen çevrimdışı çalışır
Sınırsız ücretsiz kullanım

Nasıl Kullanılır

1

Giriş Yöntemini Seçin

Dönüştürmeye başlamak için renk seçiciyi kullanın, HEX kodu girin veya RGB/HSL değerlerini girin.

2

Gerçek Zamanlı Dönüşümü Görün

Herhangi bir değeri değiştirdiğinizde, diğer tüm formatlar (HEX, RGB, HSL) canlı renk önizlemesi ile otomatik olarak güncellenir.

3

Renginizi Kopyalayın

Herhangi bir formatın yanındaki kopyala butonuna tıklayarak renk değerini panonuza kopyalayın.

Renk Formatlarını ve Dönüşümü Anlama

Renk dönüşümü, web geliştirme ve tasarımda çok önemlidir. Farklı renk formatları farklı amaçlara hizmet eder: CSS ve web tasarımı için HEX, ekran görüntüleri için RGB, sezgisel renk manipülasyonu için HSL. Bu formatlar arasında dönüşüm yapmak, tutarlı ve güzel tasarımlar oluşturmak için çok önemlidir.

Ücretsiz renk dönüştürücü aracımız, tasarımcıların ve geliştiricilerin renkleri HEX, RGB ve HSL formatları arasında anında dönüştürmesine yardımcı olur. CSS stilleri üzerinde çalışıyor, renk paletleri oluşturuyor veya farklı araçlar arasında renkleri eşleştiriyor olsanız da, renk dönüşümü temel bir beceridir.

Renk Dönüşümünün Önemi

  • Format Uyumluluğu: Farklı araçlar ve platformlar farklı renk formatları kullanır. Formatlar arasında dönüşüm uyumluluğu sağlar.
  • Tasarım Tutarlılığı: Farklı formatlar arasında tutarlı renkleri korumak uyumlu tasarımlar oluşturmaya yardımcı olur.
  • Renk Manipülasyonu: HSL formatı, açıklık, doygunluk ve tonu programatik olarak ayarlamayı kolaylaştırır.
  • Erişilebilirlik: Renkleri dönüştürmek, erişilebilirlik uyumluluğu için uygun kontrast oranlarını sağlamaya yardımcı olur.

Renk Formatı Genel Bakış

  • HEX: Onaltılık renk kodları (örn., #FF5733) - web geliştirme ve CSS'te en yaygın kullanılan.
  • RGB: Kırmızı, Yeşil, Mavi değerleri (örn., rgb(255, 87, 51)) - renkleri ışık yoğunlukları olarak temsil eder.
  • HSL: Ton, Doygunluk, Açıklık (örn., hsl(9, 100%, 60%)) - insan algısına dayalı sezgisel renk temsili.

Yaygın Kullanım Alanları

  • CSS renk değerlerini formatlar arasında dönüştürme
  • Renk paletleri ve gradyanlar oluşturma
  • Tasarım araçlarından koda renk eşleştirme
  • Renk parlaklığı ve doygunluğunu ayarlama
  • Renk erişilebilirlik uyumluluğunu sağlama
  • Farklı platformlar için renkleri dönüştürme

Aracımız tüm renk dönüşümlerini tarayıcınızda yerel olarak işler, tam gizlilik sağlar. Hiçbir veri sunucuya gönderilmez, bu da herhangi bir proje için güvenli hale getirir.

Kod Örnekleri

CSS - Renk Formatlarını Kullanma

/* HEX rengi */
.primary {
  color: #FF5733;
  background-color: #3498db;
}

/* RGB rengi */
.secondary {
  color: rgb(255, 87, 51);
  background-color: rgb(52, 152, 219);
}

/* HSL rengi */
.accent {
  color: hsl(9, 100%, 60%);
  background-color: hsl(204, 70%, 53%);
}

/* Şeffaflık ile RGBA */
.overlay {
  background-color: rgba(255, 87, 51, 0.5);
}

/* Şeffaflık ile HSLA */
.glass {
  background-color: hsla(9, 100%, 60%, 0.5);
}

JavaScript - Renk Dönüşümü

// HEX'ten RGB'ye
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// RGB'den HEX'e
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  }).join('').toUpperCase();
}

// Kullanım
const rgb = hexToRgb('#FF5733');
console.log(rgb); // { r: 255, g: 87, b: 51 }

const hex = rgbToHex(255, 87, 51);
console.log(hex); // "#FF5733"

JavaScript - RGB'den HSL'ye

// RGB'den HSL'ye dönüşüm
function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s;
  const l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // akromatik
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }

  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

// Kullanım
const hsl = rgbToHsl(255, 87, 51);
console.log(hsl); // { h: 9, s: 100, l: 60 }

Daha Fazla Araç Keşfet