RevealTheme logo

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.

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

Bu araç nasıl kullanılır

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 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?
Tasarım yaparken: HSL, parlaklığı veya doygunluğu bağımsız olarak ayarlamanıza olanak tanır. Ardından kod için HEX'e dönüştürün.
Peki OKLCH ve modern renk uzayları?
OKLCH algısal olarak tekdüzedir ve erişilebilirlik için daha iyidir. CSS Color Level 4'te desteklenir (tüm modern tarayıcılar).

İlgili araçlar