🎨 Color Picker — HEX RGB HSL Converter

Pick colors visually and instantly convert between HEX, RGB, and HSL formats. Copy CSS-ready values with one click. Free online color picker and converter for designers.

Pick Color
Click to open color picker

HEX

#

RGB

R
G
B

HSL

H
S%
L%
100%
Selected
Complementary
Tints (lighter)
Shades (darker)

CSS Output

How to Use

1

Pick a color

Click the color swatch to open the browser color picker, or type directly into HEX, RGB, or HSL fields.

2

All formats update

All input fields and the preview update in real-time as you change any value.

3

Copy CSS values

Click any copy button in the CSS Output section to copy your color in any CSS format.

Frequently Asked Questions

What is HEX color format? +
HEX (hexadecimal) color format represents colors as a 6-digit code prefixed with #, like #7c6af7. Each pair of digits (00–FF) represents Red, Green, and Blue channel intensity.
What is the difference between RGB and HSL? +
RGB defines colors by Red, Green, Blue channel values (0–255). HSL uses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) — more intuitive for human perception and easier to create color variations.
How do I convert HEX to RGB? +
Split the HEX code into three pairs, convert each from hexadecimal to decimal: #7c6af7 → R:124, G:106, B:247. This tool does it instantly as you type.
Which color format should I use in CSS? +
Use HEX for static colors in CSS (most common). Use HSL when you need to programmatically create lighter/darker variants. Use RGB when you need transparency (rgba()).
How do I pick accessible colors? +
Ensure sufficient contrast between text and background. WCAG AA requires a 4.5:1 contrast ratio for normal text. Tools like our color picker help you find complementary colors.


Tam Rehber: Renk Seçici — HEX, RGB ve HSL Dönüştürücü

Renk Formatları Ne Anlama Gelir ve Neden Önemlidir?

Dijital ekrandaki her renk, kırmızı, yeşil ve mavi kanal yoğunluklarını temsil eden üç sayıya indirgenir. HEX, RGB ve HSL — bu üç CSS gösterimi aynı sayıları farklı biçimlerde ifade eder ve her birinin pratik avantajları vardır.

HEX (#7c6af7) en kompakt gösterimdir. CSS, tasarım araçları ve renk kodlarının insanlar arasında paylaşıldığı her yerde evrensel standarttır. RGB (rgb(124, 106, 247)) şeffaflık için rgba() varyantını sunar. HSL (hsl(248, 89%, 69%)) — Ton, Doygunluk, Aydınlık — insan sezgisi için en uygun formattır; aynı tonun açık/koyu varyasyonlarını üretmek için idealdir.

Nasıl Kullanılır?

  1. Renk önizlemesine tıklayın veya herhangi bir alana (HEX, R/G/B veya H/S/L) doğrudan yazın.
  2. Tüm formatlar gerçek zamanlı güncellenir — birini değiştirin, diğerleri anında takip eder.
  3. CSS Çıktı bölümünü kullanın — hazır CSS değerini kopyalayın.

Kod Örnekleri

/* CSS: HSL ile renk skalası oluşturmak */
:root {
  --marka-h: 248;
  --marka-s: 89%;
  --marka:        hsl(var(--marka-h), var(--marka-s), 69%);
  --marka-koyu:   hsl(var(--marka-h), var(--marka-s), 45%);
  --marka-acik:   hsl(var(--marka-h), var(--marka-s), 88%);
}

/* JavaScript: HEX'i RGB'ye dönüştürme */
function hexRgb(hex) {
  return {
    r: parseInt(hex.slice(1,3), 16),
    g: parseInt(hex.slice(3,5), 16),
    b: parseInt(hex.slice(5,7), 16)
  };
}

Yaygın Hatalar

Alternatiflerle Karşılaştırma

DevTools renk seçici mevcut sayfalardan renk almak için mükemmeldir ancak tüm formatları aynı anda göstermez. Figma/Sketch entegre renk sistemleri sunar ama hızlı dönüşüm için fazla karmaşıktır. Tek bir temel renkten tam palet oluşturmak için Renk Paleti Üretici'yi, CSS gradyan arka planları için CSS Gradyan Üretici'yi kullanın.

İpuçları

Related Tools

🌈
CSS Gradient Generator
css
🎨
Color Palette Generator
generator
🪟
CSS Glassmorphism Generator
css
▣
CSS Border Radius Generator
css
🧰 50+ Tools