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