ImageColorPicker.com

HEX to HSL converter

Herhangi bir HEX rengini anında ve ücretsiz olarak HSL formatına çevir

#2ECC71

Herhangi bir renk değeri yapıştır — formatı senin için algılarız.

HSL result
Ton
145°
Doygunluk
63%
Açıklık
49%

Bu rengin tüm formatları

CMYK profili: Coated FOGRA39 (Photoshop'un Avrupa için varsayılan ayarı)

HSL bir rengi insanların konuştuğu şekilde tanımlar: hangi ton, ne kadar doygun, ne kadar parlak. HEX kodunu HSL'ye çevirmek, rengi gerçekten ayarlayabileceğin—açmak, soldurmak veya ondan bir ölçek oluşturmak—en hızlı yoldur.

How HEX to HSL conversion works

  1. HEX kodunu RGB'ye çevir ve her kanalı 255'e böl, böylece üçü de 0 ile 1 arasında olur.
  2. Üç değerin en büyüğünü ve en küçüğünü bul. Bunların ortalaması ışıklılık L'dir.
  3. Aradaki fark doygunluk S'i belirler: açık renkler için bunu (2 − max − min)'e, koyu renkler için (max + min)'e böl.
  4. En yüksek değeri taşıyan kanal tonu H'yi belirler — kırmızı 0°, yeşil 120°, mavi 240° — ve diğer iki kanal tonu o segment içinde konumlandırır.

Çalışan örnek

HEX #2ECC71=HSL hsl(145, 63%, 49%)

Hesaplama teknik olarak kesin, ama HSL değerleri genelde derece ve yüzde olarak yuvarlanır. Geri çevirirken orijinale bir iki RGB adımı uzaklıkta sonuç çıkabilir — pratikte görünmez ama renkleri tekrar tekrar yuvarlıyorsan bilmeye değer.

HEX and HSL explained

HEX nedir?

HEX kodu, bir rengin kırmızı, yeşil ve mavi kanallarını başında # olan altı haneli on altılık bir sayı ile saklar. Her iki hane bir kanalı temsil eder, 00 (yok) ile FF (tam) arasındadır; bu da RGB ile aynı 16.7 milyon rengi çok daha kısa bir gösterimde verir. HEX, CSS, tasarım araçları ve marka kılavuzlarında varsayılandır.

Sözdizimi:
#RRGGBB
Aralık:
00–FF her kanal için
En uygun:
CSS, tasarım teslimi, marka yönergeleri

HSL nedir?

HSL, bir rengi ton (renk çemberinde 0–360°), doygunluk (ne kadar renkli, 0–100%) ve açıklık (ne kadar parlak, 0–100%) olarak ayırır. Her parça insanların rengi tanımlama biçimine uyduğu için HSL, tonlar, gölgeler ve tutarlı paletler oluşturmayı — elle veya kodla — en kolay hale getirir.

Sözdizimi:
hsl(H, S%, L%)
Aralık:
0–360°, 0–100%, 0–100%
En uygun:
paletler, tonlar ve gölgeler, temalandırma

HEX to HSL reference table

En yaygın CSS renkleri, HEX formatından HSL formatına dönüştürülmüş.

RenkHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

Daha fazla renk dönüştürücü

Sıkça sorulan sorular

HEX kodunu RGB'ye çevir ve her kanalı 255'e böl, böylece üçü de 0 ile 1 arasında olur. Üç değerin en büyüğünü ve en küçüğünü bul. Bunların ortalaması ışıklılık L'dir. Aradaki fark doygunluk S'i belirler: açık renkler için bunu (2 − max − min)'e, koyu renkler için (max + min)'e böl. En yüksek değeri taşıyan kanal tonu H'yi belirler — kırmızı 0°, yeşil 120°, mavi 240° — ve diğer iki kanal tonu o segment içinde konumlandırır.

Hesaplama teknik olarak kesin, ama HSL değerleri genelde derece ve yüzde olarak yuvarlanır. Geri çevirirken orijinale bir iki RGB adımı uzaklıkta sonuç çıkabilir — pratikte görünmez ama renkleri tekrar tekrar yuvarlıyorsan bilmeye değer.

HSL, bir rengi ton (renk çemberinde 0–360°), doygunluk (ne kadar renkli, 0–100%) ve açıklık (ne kadar parlak, 0–100%) olarak ayırır. Her parça insanların rengi tanımlama biçimine uyduğu için HSL, tonlar, gölgeler ve tutarlı paletler oluşturmayı — elle veya kodla — en kolay hale getirir.

Evet. Girişin yanındaki takas butonu seni HSL → HEX dönüştürücüsüne götürür; çalışma şekli tamamen aynı. Her iki yön de aynı formülü kullanır, sadece tersine uygulanır.

Rengin varyasyonlarına ihtiyaç duyduğun anda HSL'ye geç. H ve S sabit tutup sadece L'yi değiştirerek tutarlı bir ton ve gölge ölçeği elde edersin; HEX'te bunu elle yapmak çok daha zordur.