Renk Dönüştürücü (HEX/RGB/HSL)
Renkleri HEX, RGB ve HSL biçimleri arasında dönüştürün. Bir rengi görsel olarak seçin veya değerleri elle girin.
#535bebrgb(83, 91, 235)hsl(237, 79%, 62%)Bu araç nasıl kullanılır
- 1
Click the color swatch to open your operating system's color picker and choose a color visually.
- 2
Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.
- 3
Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.
- 4
Copy whichever format you need straight into your CSS or design file.
Renk Dönüştürücü (HEX/RGB/HSL) nedir?
HEX, RGB ve HSL, aynı rengi ifade etmenin üç yoludur. HEX (#RRGGBB), CSS'de ve tasarım araçlarında en yaygın olanıdır. RGB (rgb(R,G,B)), kanalları sayısal olarak ayırır. HSL (hsl(H,S%,L%)) ise insanlar için daha sezgiseldir: ton (hue) rengi, doygunluk yoğunluğu ve parlaklık (lightness) ise aydınlığı belirtir. Paletler tasarlarken HSL kullanın; uygulama için HEX'e dönüştürün.
Yaygın kullanım örnekleri
Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.
Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.
Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.
Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.
Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.
Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.
Sıkça sorulan sorular
HEX yerine ne zaman HSL kullanmalıyım?▼
Peki OKLCH ve modern renk uzayları?▼
İlgili araçlar
CSS Box Shadow Oluşturucu
CSS box-shadow değerlerini görsel olarak oluşturun. Gerçek zamanlı önizleyin ve oluşturulan CSS'i kopyalayın.
CSS Renk Geçişi Oluşturucu
Doğrusal ve radyal CSS renk geçişleri oluşturun. Renkleri görsel olarak seçin ve oluşturulan CSS'i kopyalayın.
Cubic Bezier Hızlanma Eğrisi Oluşturucu
CSS için cubic-bezier hızlanma (easing) eğrileri oluşturun. Standart hazır ayarları içerir.
Renk Paleti Üreteci
Herhangi bir temel renkten uyumlu renk paletleri üretin. Tamamlayıcı, analog, üçlü ve monokromatik şemaları destekler.
CSS Border Radius Oluşturucu
Karmaşık CSS border-radius değerlerini görsel olarak oluşturun. Her köşe için bağımsız kontrol.
CSS Clamp() Üreteci
clamp() ile akışkan ve duyarlı CSS değerleri üretin. Viewport aralıkları boyunca minimum ve maksimum boyutlar arasında düzgünce ölçeklenir.