Ürün Ekipleri için HEX, RGB, HSL Dönüşüm Kılavuzu

HEX, RGB, HSL Dönüşüm Rehberi için Ürün Takımları

Dizaymcılar Figma'da HEX kodlarını elden verir. Mühendisler kodda RGB yazar. HSL, programatik renk manipülasyonu için ne istediğinizi gösterir. Üç formatın nasıl ilişkili olduğu ve hangi durumlarda kullanılması gerektiği burada gösterilmektedir.

Üç Format

HEX -- #FF5733

İki hex rakamı her kanal için: #RRGGBB. Her çift 00-FF (0-255'tir). 1990'larda web standardı. Kompakt, evrensel olarak desteklenir, ancak insan okumasına kapalıdır.

RGB -- rgb(255, 87, 51)

Üç ondalık değer, her kanal için 0-255. CSS rgb() kullanır. HEX'ten daha okunabilir, ancak hala zihinsel olarak ayarlanmaya zorlanır ("20% daha açık" RGB'de açık değildir).

HSL -- hsl(11, 100%, 60%)

Renk halkası üzerinde 0-360 derece, Renk Çıplaklığı (0-100%), Parlaklık (0-100%). İnsan için tasarlandı: renk ilişkilerini doğrudan akıl yürütebilirsiniz.

Hangi Durumda Hangi Format Kullanılır

Neden HSL Tema Sistemleri için Kazanır

HSL ile renk manipülasyonu aritmetiktir:

:root {
  --renk: 11;
  --primary:    hsl(var(--renk), 100%, 60%);
  --primary-light: hsl(var(--renk), 100%, 80%); /* +20% parlaklık */
  --primary-dark:  hsl(var(--renk), 100%, 40%); /* -20% parlaklık */
  --primary-muted: hsl(var(--renk), 40%, 60%);  /* desatüre */
}

--renki 210a değiştirin ve tüm paletiniz maviye kayacaktır. Bunu HEX ile yapın.

Açıkla: L'yi artırı. 60% → 80% = açık.

Karanla: L'yi azalt. 60% → 40% = karanlık.

Desatüre: S'yi azalt. 100% → 40% = daha mute.

Karsı Renk: H'ye 180 ekleyin. 11 → 191.

Dönüşüm Hesap Makinesi

HEX → RGB: Çiftlere ayırın, hex'i ondalık'a dönüştürün.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (sadeleştirilmiş):

Formülleri belleğe kaydetmeyin. Renk Seçici aracı ile tüm üç format arasında anında dönüştürün.

Modern CSS: oklch()

CSS Renk Seviyesi 4, oklch() -- algılama odaklı parlaklık tanıttı. HSL'den farklı olarak, eşit L değerleri gerçekten eşit parlaklık gösterir. 2025'ten sonra yeni bir tasarım sistemi başlatıyorsanız, HSL ile birlikte oklch()ı düşünün.

İlgili

Sonraki adim

Akisi Color Picker icinde calistirin ve trafik buyutmeden once baseline kaydedin.