logo
GeekFormat

Renk Dönüştürücü

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA AAA
黑字
9.22:1
AA AAA

HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB ve OKLCH dahil 14 renk formatı arasında tek tıklamayla dönüşüm desteği sunan çevrimiçi renk dönüştürücü. Gerçek zamanlı ayarlamalar için yerleşik renk seçici, WCAG erişilebilirlik kontrast kontrolü, renk uyumu şemaları, gölge oluşturma, toplu dönüşüm ve görüntüden renk çıkarma özellikleri içerir. Tüm hesaplamalar tamamen tarayıcınızda yerel olarak çalışır; dosya yükleme gerekmez, tasarımcılar ve frontend geliştiricileri için idealdir.

İlgili Öneriler

Kullanım senaryoları

  • Frontend geliştirmede CSS stilleri için tasarım maketlerindeki HEX değerlerini RGB/HSL'ye veya saydamlık gerektiğinde RGBA'ya dönüştürme
  • UI/UX tasarımcıları için Figma, Sketch ve Photoshop gibi tasarım araçları arasında geçiş yaparken renk değeri formatlarını birleştirme
  • Erken baskı üretimi iletişimi sırasında referans için ekran RGB değerlerini CMYK'ye dönüştürme
  • Erişilebilir tasarımda WCAG AA/AAA uyumluluğu için metin ve arka plan renkleri arasındaki kontrast oranlarını kontrol etme
  • Gölge oluşturucuyu kullanarak tasarım sistemleri oluşturmak için eksiksiz açıktan koyuya aileyi hızla oluşturma
  • Renk uyumu kullanarak markalaşma veya afiş tasarımı için profesyonel renk şemaları (tamamlayıcı, benzer vb.) oluşturma
  • İlham için referans görüntülerden veya fotoğraflardan baskın renkleri çıkarma (görüntü renk seçici)
  • Tasarım maketlerinden birden fazla renk değerini toplu olarak işleme ve aynı anda gerekli formatlara dönüştürme
  • Hover gibi CSS durumları yazarken HSL veya OKLCH ile parlaklığı ve doygunluğu rahatça ayarlama
  • Modern CSS OKLCH renk uzayını kullanarak algısal olarak tek tip tasarım sistemi renkleri oluşturma
  • Farklı formatların aynı rengi nasıl temsil ettiğinin etkileşimli görsel karşılaştırmasıyla renk uzayı ilkelerini öğretme
  • Kolay başvuru ve iletişim için herhangi bir değerin İngilizce CSS adlandırılmış rengini hızla bulma

Özellikler

  • 14 renk formatı dönüşümü: HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH ve CSS adlandırılmış renkler desteği
  • Akıllı giriş tanıma: Herhangi bir renk formatını yapıştırın, otomatik olarak algılar; kısaltılmış #rgb, alfa ile #rrggbbaa, rgb(), hsl() ve CSS renk adlarını destekler
  • Gerçek zamanlı kaydırıcı ayarlamaları: Anlık WYSIWYG renk ayarı için RGB kırmızı/yeşil/mavi, HSL ton/doygunluk/parlaklık, HSV kaydırıcıları
  • Alfa saydamlık desteği: Alfa kanallı RGBA ve HSLA dönüşümü, hem yüzde hem de ondalık opaklık formatlarını destekler
  • CSS renk adı eşleştirme: Hızlı başvuru için en yakın standart CSS adlandırılmış rengini (140'tan fazla seçenek) otomatik olarak bulur
  • WCAG erişilebilirlik kontrast denetleyici: Beyaz ve siyah metne karşı kontrast oranlarının gerçek zamanlı hesaplanması, otomatik AA (≥4.5:1) ve AAA (≥7:1) geçti/kaldı göstergeleri
  • Renk uyumu oluşturucu: Tek tıklamayla 5 klasik şema oluşturma — tamamlayıcı, benzer, üçlü, bölünmüş-tamamlayıcı ve dörtlü
  • Gölge oluşturma: Hem geleneksel RGB karışımlı gölgeler hem de algısal olarak tek tip OKLCH gölgeleri mevcuttur, anında 11 parlaklık adımı oluşturur
  • Toplu dönüşüm: Çok satırlı girişle aynı anda birden fazla renk değerini işleme — tasarım sistemi paletlerini işlemek için idealdir
  • Görüntü renk seçici: 16 baskın rengi otomatik olarak örneklemek ve çıkarmak için bir görüntü yükleyin, referanslardan veya fotoğraflardan palet çıkarmak için harikadır
  • Tek tıklamayla kopyalama: Standart gösterimde anında kopyalama için her renk formatının yanındaki kopyala düğmesi — doğrudan CSS'ye veya tasarım yazılımına yapıştırmaya hazır
  • Rastgele renk oluşturucu: Hızlı ilham için tek tıklamayla rastgele renkler oluşturun
  • Tamamen tarayıcı tabanlı işleme: Tüm renk hesaplamaları sunucuya yükleme olmadan tarayıcınızda yerel olarak çalışır — kayıt olmadan anında çalışır
  • Duyarlı tasarım: Masaüstü, mobil ve tablet cihazlarda sorunsuz çalışır — renkleri ayarlayın ve telefonlarda rahatça değerleri kopyalayın

Nasıl Kullanılır

  1. En üstteki giriş kutusuna herhangi bir renk formatı değeri girin, renk seçiciyi kullanmak için renk örneğine tıklayın veya ayarlamak için RGB/HSL/HSV kaydırıcılarını sürükleyin
  2. Araç, HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH dahil 14 formatın tümüne gerçek zamanlı olarak otomatik olarak dönüştürür
  3. Şemalar için «Renk Uyumu»na, açık/koyu ton serileri için «Gölgeler»e veya toplu dönüşüm ya da görüntüden renk çıkarma için «Toplu/Seçici»ye geçin
  4. Standart gösterimi doğrudan kullanım için kopyalamak üzere herhangi bir renk formatının yanındaki kopyala düğmesine tıklayın

Sık Sorulan Sorular

Renk dönüştürücü hangi renk formatlarını destekler?

14 yaygın renk formatı arasında dönüşümü destekler: HEX (3 basamaklı kısaltma ve alfa ile 8 basamaklı), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ (D65 aydınlatıcılı CIE 1931), CIE LAB, LCH, OKLAB, OKLCH ve ayrıca 140'tan fazla standart CSS adlandırılmış renk. Diğer tüm formatlara otomatik olarak dönüştürmek için herhangi bir formatı girin.

Bu renk dönüştürme aracını nasıl kullanırım?

Çok basit: 1) En üstteki giriş kutusuna herhangi bir renk değeri girin — örneğin #22c55e, rgb(34,197,94), hsl(142,71%,45%) veya hatta green gibi bir renk adı; 2) Veya renk seçiciyi kullanmak için renk örneğine tıklayın, ya da gerçek zamanlı ayarlama için RGB/HSL/HSV kaydırıcılarını sürükleyin; 3) 14 formatın tümüne dönüşümler anında aşağıda görünür — herhangi bir formatı panonuza kopyalamak için yanındaki kopyala düğmesine tıklayın.

HEX, RGB ve HSL arasındaki fark nedir? Her biri nerede kullanılır?

HEX, web için en yaygın onaltılık gösterimdir — kırmızı için #ff0000 — CSS'de ve tasarım teslim dosyalarında yaygın olarak kullanılır. RGB renkleri kırmızı, yeşil ve mavi için 0-255 değerleriyle temsil eder, ekran görüntüleyicilerinin temelidir. HSL, Ton (0-360°), Doygunluk ve Parlaklık kullanır; bu, insan renk algısına daha iyi uyar ve tasarımcıların renkleri ayarlaması için daha sezgiseldir. CMYK baskı için camgöbeği, macenta, sarı ve siyah mürekkep yüzdelerini kullanır. OKLCH, görsel olarak pürüzsüz gradyanlar ve gölge serileri üreten modern, algısal olarak tek tip bir renk uzayıdır.

WCAG erişilebilirlik kontrast oranı nedir? Hangi oran erişilebilirlik standartlarını karşılar?

WCAG kontrast oranı, görme engelli kullanıcılar için içeriğin okunabilirliğini sağlamak amacıyla metin rengi ile arka plan rengi arasındaki parlaklık farkını ölçer. Web İçeriği Erişilebilirlik Yönergeleri'ne göre: normal gövde metni AA seviyesi (geçti) için ≥4.5:1 ve AAA seviyesi (mükemmel) için ≥7:1 gerektirir; büyük metin (≥18pt kalın veya ≥24pt normal) AA için ≥3:1 gerektirir. Araç, AA ve AAA standartları için otomatik geçti/kaldı göstergeleriyle hem beyaz hem de siyah metne karşı kontrast oranlarını gerçek zamanlı olarak görüntüler.

RGBA'daki A ne anlama gelir? Saydamlığı nasıl ayarlarım?

RGBA'daki A, saydamlığı kontrol eden Alfa kanalını ifade eder — değerler 0 (tamamen saydam) ile 1 (tamamen opak) arasındadır. Örneğin, rgba(34,197,94,0.5) yarı saydam yeşildir. Saydamlığı Alfa kaydırıcısıyla ayarlayın; dönüşüm sonuçları alfalı hem RGBA hem de HSLA formatlarını gösterir. HEX ayrıca 6 basamaklı rengin ardına iki onaltılık basamak ekleyerek saydamlığı destekler — örneğin #22c55e80, %50 opaklığı temsil eder.

OKLCH ve LCH nedir? HSL'den nasıl farklıdırlar?

LCH ve OKLCH, L'nin Parlaklık, C'nin Kroma (doygunluk) ve H'nin Ton olduğu algısal olarak tek tip renk uzaylarıdır. HSL'ye göre en büyük avantajları: aynı L değerine sahip renkler görsel olarak gerçekten eşit parlak görünür; bu, tasarım sistemleri için kritik öneme sahiptir — HSL kullanarak farklı tonlarda ancak aynı parlaklıkta paletler oluşturursanız, bazıları diğerlerinden daha koyu görünür, ancak OKLCH tek tip algılanan parlaklığı garanti eder. OKLCH, LAB/LCH'den daha basit hesaplamalar ve daha doğru renk tahminiyle daha yenidir, modern CSS'de (CSS Color Level 4) önerilir.

Görüntü renk seçici özelliğini nasıl kullanırım?

«Toplu/Seçici» sekmesine geçin, bir görüntü seçmek için yükle'ye tıklayın — araç görüntüleri otomatik olarak 100×100 ızgaraya ölçekler ve eşit olarak dağıtılmış konumlardan 16 rengi çıkarır, renk örneklerini ve değerlerini gösterir. Daha fazla ayarlama ve dönüşüm için o rengi ana renk olarak ayarlamak üzere herhangi bir örneğe tıklayın. Referans görüntülerden, tasarım maketlerinden veya fotoğraflardan hızlıca palet çıkarmak için mükemmeldir.

Hangi renk uyumu şemaları mevcuttur ve bunları nasıl kullanırım?

Araç 5 klasik uyum şeması sunar: 1) Tamamlayıcı: Yüksek kontrast için birbirinden 180° uzaklıkta renkler; 2) Benzer: Doğal uyum için birbirinden 30° uzaklıkta renkler; 3) Üçlü: Canlı denge için birbirinden 120° uzaklıkta renkler; 4) Bölünmüş-tamamlayıcı: Yumuşaklıkla kontrast için taban rengi + tamamlayıcının her iki tarafında 30°; 5) Dörtlü (dikdörtgen): Zengin çeşitlilik için birbirinden 90° uzaklıkta dört renk. Oluşturulan şemaları görmek için «Renk Uyumu» sekmesine geçin — herhangi bir örneğe tıklayarak onu ana renk olarak ayarlayın.

CMYK dönüşüm sonuçları doğrudan baskı için kullanılabilir mi?

Referans olarak iyi çalışırlar, ancak şunu unutmayın: ekranlar katkılı RGB rengi (ışık yayılımı) kullanırken baskı çıkarmalı CMYK'yi (mürekkep yansıması) kullanır. Farklı renk gamutlarına sahiptirler — bazı parlak RGB renkleri (canlı yeşiller ve maviler gibi) CMYK mürekkepleriyle doğru şekilde yeniden üretilemez, bu nedenle bir miktar renk kayması meydana gelir. Araç, erken iletişim ve hızlı başvuru için uygun standart RGB-CMYK dönüşüm formülleri kullanır. Nihai baskı üretimi için, uygun ICC renk profilleriyle soft proof yapmak üzere profesyonel tasarım yazılımı kullanmanızı öneririz.

Toplu dönüşüm nasıl çalışır? Aynı anda kaç rengi dönüştürebilirim?

«Toplu/Seçici» sekmesine geçin, metin kutusuna satır başına bir renk girin (HEX/RGB/HSL/CSS renk adlarını özgürce karıştırarak), ardından tüm renkleri aynı anda işlemek için toplu dönüştür'e tıklayın. Sonuçlar her biri için renk örneklerini ve HEX değerlerini gösterir. Teorik bir sınır yoktur, ancak yüzlerce renk için tarayıcı gecikmesini önlemek amacıyla partiler halinde işlem yapmanızı öneririz.

Renk dönüştürücüyü mobil cihazlarda kullanabilir miyim?

Evet. Araç duyarlı tasarım kullanır ve mobil cihazlarda, tabletlerde ve her boyuttaki masaüstü ekranlarda mükemmel çalışır. Mobilde hala renk değerleri girebilir, renkleri ayarlamak için kaydırıcıları sürükleyebilir, dönüşümleri görüntüleyebilir ve değerleri kopyalayabilirsiniz — tüm özellikler masaüstü deneyimiyle eşleşir. Ve tamamen yerel hesaplama olduğu için mobil verilerinizi kullanmaz.

Girişte 'tanınmayan renk formatı' yazıyorsa ne yapmalıyım?

Giriş formatını kontrol edin: 1) HEX, 3, 6 veya 8 onaltılık karakter (0-9/a-f) ile # ile başlamalıdır (isteğe bağlı) — #f00, #ff0000, #ff0000ff tümü geçerlidir; 2) RGB formatı virgülle ayrılmış 0-255 arası üç değerle rgb(r,g,b) olmalıdır; 3) HSL formatı 0-360° ton, %0-100 doygunluk ve parlaklık ile hsl(h,s%,l%) olmalıdır; 4) CSS renk adları red/blue/green gibi standart adlar olmalıdır — Çince renk adları desteklenmez.

Dönüştürülen renkler neden farklı yazılımlarda farklı görünüyor?

Bu normal renk yönetimi davranışıdır: farklı yazılımlar, monitörler ve işletim sistemleri farklı renk profilleri (sRGB, Display P3, Adobe RGB) kullanabilir, bu da aynı renk değeri için hafif görsel farklılıklara neden olur. Web sayfaları varsayılan olarak sRGB renk uzayını kullanır — Photoshop gibi yazılımlarda Adobe RGB veya Display P3 profilleri kullanıyorsanız, tutarlı web görüntüsü için dışa aktarırken sRGB'ye dönüştürmeniz gerekir.

Frontend geliştirmede hangi renk formatını kullanmalıyım?

Modern CSS tüm renk formatlarını destekler: HEX en yaygın olanıdır, en iyi uyumluluğa sahiptir ve tasarım teslimi için standarttır; RGB/RGBA, dinamik opaklık ayarlamaları veya kanal düzeyinde manipülasyon gerektiğinde iyi çalışır; HSL, doğrudan kodda renk varyantları yazmak için en sezgiseldir (örneğin, L'yi artırarak bir hover durumunu aydınlatmak gibi); OKLCH gelecektir, CSS Color Level 4'te yerel olarak desteklenir, gölgeler ve gradyanlar oluşturmak için mükemmel olan algısal tekdüzelik ile — projenizin uyumluluk ihtiyaçlarına göre seçim yapın.

Gölge oluşturma özelliği ne işe yarar? Geleneksel gölgeler ile OKLCH gölgeleri arasındaki fark nedir?

Gölge oluşturma, bir renk ailesi için anında 11 adımda (50-900) açıktan koyuya tonlar oluşturur; tasarım sistemi paletleri (Tailwind'in renk sistemi gibi) oluşturmak için idealdir. Geleneksel gölgeler RGB uzayında basitçe beyaza doğru karıştırılır — sayısal olarak tek tip olsalar da, orta tonlar düzensiz görünebilir. OKLCH gölgeleri, yalnızca parlaklık L'yi ayarlarken ton ve kromayı koruyarak açıktan koyuya görsel olarak pürüzsüz geçişler üretir — daha profesyonel ve cilalı.

Renk Uzayları ve Renk Formatı Dönüşümü Hakkında

Renk dönüştürücüler, tasarımcılar ve frontend geliştiricileri için en sık kullanılan araçlar arasındadır ve farklı renk temsilleri arasında doğru dönüşüm sağlar. Rengin kendisi görsel bir algıdır; onu bilgisayarlarda ve baskıda temsil etmek için insanlar, aynı rengi farklı sayısal sistemler kullanarak tanımlayan, her biri farklı senaryolara ve cihazlara uygun birden fazla renk modeli (renk uzayı) geliştirmiştir.

Yaygın renk formatları şunları içerir: HEX (onaltılık RGB, standart web gösterimi), RGB (Kırmızı/Yeşil/Mavi 0-255 değerleri, ekran görüntüleyicilerinin temeli), HSL (Ton/Doygunluk/Parlaklık, insan renk ayarlaması için en sezgisel olanı), CMYK (baskı için Camgöbeği/Macenta/Sarı/Anahtar Siyah yüzdeleri). Son yıllarda OKLCH gibi algısal olarak tek tip renk uzayları popülerlik kazanmıştır çünkü aynı parlaklık değerine sahip renklerin görsel olarak gerçekten eşit parlak göründüğünü matematiksel olarak garanti ederler — tasarım sistemleri oluşturmak ve gradyanlar oluşturmak için kritik öneme sahiptir.

Renk formatları arasında neden dönüşüm yapılır? Farklı araçlar, platformlar ve çıktı ortamları farklı renk formatları kullanır: web CSS HEX/RGB/HSL/OKLCH ve daha fazlasını destekler; Figma/Sketch gibi tasarım yazılımları varsayılan olarak HEX kullanır; baskı CMYK gerektirir; ve kodda renkleri dinamik olarak ayarlarken (hover durumları veya opaklık değişiklikleri gibi) HSL ve OKLCH HEX'ten çok daha kullanışlıdır. Doğru renk dönüşümü, tasarım maketleri ile nihai uygulama arasında renk tutarlılığı sağlar.

WCAG erişilebilirlik kontrastı, görme engelli kullanıcılar için okunabilirliği sağlamak amacıyla ön plan metin ile arka plan renkleri arasındaki parlaklık farkını ölçen önemli bir web erişilebilirlik standardıdır. Normal gövde metni 4.5:1 kontrast oranı gerektirir (AA seviyesi), önemli içerik için 7:1 önerilir (AAA seviyesi). Aracımız bunu gerçek zamanlı olarak hesaplar ve tasarımcıların renk seçimi sırasında erişilebilirliği daha sonra düzeltmek yerine düşünmelerine yardımcı olur.

Renk uyumu, renk çarkı etrafındaki tonların geometrik konumlarını kullanarak görsel olarak uyumlu kombinasyonlar üreten, renk çarkına dayalı klasik bir renk teorisidir. Tamamlayıcı renkler, düğmeler ve vurgular için ideal olan güçlü kontrast yaratır; benzer renkler büyük arka plan alanları için uyumlu ve doğaldır; üçlü ve dörtlü şemalar marka kimliği için denge ve zenginlik sunar. Araç, tek tıklamayla paletler oluşturan en yaygın kullanılan 5 uyum şemasını içerir.

Renk gölgeleri/açıkları, aynı tonun açıktan koyuya varyasyonlarıdır; tasarım sistemleri oluşturmanın temelidir (Tailwind CSS'in 50-900 paletleri gibi). Geleneksel RGB gölgeleri basitçe beyaza doğru karıştırılır ancak görsel olarak düzensiz görünür; OKLCH tabanlı gölgeler, yalnızca parlaklığı ayarlarken ton ve kromayı koruyarak açıktan koyuya görsel olarak pürüzsüz geçişler üretir — modern tasarım sistemleri için önerilen yaklaşım. Aracımız karşılaştırma için her iki gölge stilini de sunar.

Yerel işleme neden önemlidir? Renk dönüşümü tamamen matematikseldir ve sunuculara veri yüklemeyi kesinlikle gerektirmez. Aracımızdaki tüm hesaplamalar tamamen tarayıcınızda yerel olarak çalışır — sayfayı açın ve kayıt veya giriş olmadan anında kullanın, görüntüler ve renk verileri yüklenmez. Hızlıdır ve gizliliği korur — henüz yayınlanmamış, gizli tasarım maket renkleri için bile güvenle kullanabilirsiniz.

Önemli not: Renk formatı dönüşümü matematiksel olarak hassastır, ancak ekran renk gamutları, monitör kalibrasyonu ve baskı süreçleri nedeniyle aynı renk değeri farklı cihazlarda ve ortamlarda biraz farklı görünebilir. Ekranlar katkılı RGB kullanır (daha fazla ışık = daha parlak), baskı ise çıkarmalı CMYK kullanır (daha fazla mürekkep = daha koyu). İkisinin farklı renk gamutları vardır — bazı yüksek doygunluğa sahip RGB renkleri CMYK mürekkepleriyle doğru şekilde yeniden üretilemez. Dönüşüm sonuçları dijital tasarım ve web geliştirme için idealdir; nihai baskı üretimi için, proof yapmak üzere profesyonel renk yönetimi yazılımı öneririz.

术语表

HEX
RGB'yi temsil eden 6 onaltılık basamağın (kanal başına iki basamak, 00–FF) önünde # kullanan onaltılık renk gösterimi — kırmızı için #FF0000, web ve tasarım yazılımı için en yaygın formattır. 3 basamaklı kısaltmaları (örneğin #f00) ve alfayı içeren 8 basamaklı gösterimi destekler.
RGB/RGBA
Rengi Kırmızı, Yeşil ve Mavi için 0-255 arası üç değerle temsil eder; rgba() saydamlık için bir Alfa kanalı ekler (0-1). Ekran görüntüleyicileri için temel renk modeli.
HSL/HSLA
Rengi Ton (0-360°), Doygunluk (%0-100) ve Parlaklık (%0-100) ile temsil eder; insan renk algısına daha iyi uyar — tasarımcıların renkleri ayarlaması için daha sezgiseldir.
HSV/HSB
Ton, Doygunluk, Değer/Parlaklık — HSL'ye benzer ancak farklı parlaklık hesaplamasıyla, Photoshop gibi tasarım yazılımlarındaki renk seçicilerde yaygın olarak bulunur.
HWB
Ton, Beyazlık, Siyahlık — HSL'den daha sezgisel olan bir CSS Color Level 4 ekidir: tonu ayarlamak için basitçe beyaz veya siyah ekleyin.
CMYK
Baskı endüstrisinde mürekkep karışım oranlarını temsil etmek için kullanılan Camgöbeği, Macenta, Sarı ve Anahtar (Siyah) mürekkeplerinin yüzdeleri.
CIE LAB/LAB
Uluslararası Aydınlatma Komisyonu (CIE) tarafından tanımlanan algısal olarak tek tip bir renk uzayı: L, Parlaklık (0-100) için, a yeşil-kırmızı ekseni için, b mavi-sarı ekseni için — sayısal mesafelerin algılanan renk farklılıklarına karşılık gelmesi için tasarlanmıştır.
LCH
LAB'den dönüştürülen kutupsal koordinat gösterimi: L Parlaklık, C Kroma (doygunluk), H Ton — HSL'den daha algısal olarak tek tiptir, hassas algısal kontrol gerektiren profesyonel tasarım için uygundur.
OKLAB/OKLCH
2020'de tanıtılan yeni nesil algısal olarak tek tip renk uzayları — LAB/LCH'den daha basit hesaplamalar ve daha doğru ton tahmini. OKLCH onun kutupsal formudur, modern CSS'de yerel olarak desteklenir ve tasarım sistemleri oluşturmak için önerilir.
WCAG Kontrast
Web İçeriği Erişilebilirlik Yönergeleri tarafından belirtilen ön plan metni ile arka plan arasındaki parlaklık oranı: AA, gövde metni için ≥4.5:1 gerektirir, AAA ≥7:1 gerektirir — görme engelli kullanıcılar için okunabilirliği sağlar.
Renk Uyumu
Görsel olarak uyumlu ve estetik açıdan hoş kombinasyonlar oluşturmak için geometrik ilişkileri (tamamlayıcı 180°, benzer 30° aralık, üçlü 120° aralık vb.) kullanan, renk çarkı etrafındaki konumlara dayalı renk teorisi.
Gölgeler/Açık tonlar
Aynı tonun açıktan koyuya bir dizi varyasyonu, genellikle 50'den 900'e kadar 11 adım olarak oluşturulur, tek bir rengin farklı uygulamaları (arka planlar, kenarlıklar, metin, vurgular) için tasarım sistemlerinde kullanılır.

14 Renk Formatı Karşılaştırma Hızlı Başvuru

Aşağıda her renk formatı için değer aralıkları, saf kırmızı örnekleri ve birincil kullanım durumları yer almaktadır:

FormatDeğer AralığıSaf Kırmızı ÖrneğiBirincil Kullanım Durumları
HEX#RRGGBB 00-FF#ff0000Web CSS, tasarım teslimi — en evrensel format
RGBR/G/B: 0-255rgb(255,0,0)Ekran görüntüleme temeli, Canvas/WebGL programlama
RGBAArtı A: 0-1rgba(255,0,0,1)Saydamlık gerektiren CSS, kaplama efektleri
HSLH:0-360°, S/L:0-100%hsl(0,100%,50%)Tasarımcı renk ayarlaması, kodda dinamik renk manipülasyonu
HSVH:0-360°, S/V:0-100%hsv(0,100%,100%)Photoshop gibi tasarım yazılımı renk seçicileri
HWBH:0-360°, W/B:0-100%hwb(0,0%,0%)CSS Color 4 — beyaz/siyah ekleyerek sezgisel ayarlama
CMYKC/M/Y/K: 0-100%cmyk(0%,100%,100%,0%)Baskı ve yayıncılık endüstrisi
OKLCHL:0-1, C:0-0.4, H:0-360°oklch(0.63,0.24,29)Modern CSS, tasarım sistemi paletleri, algısal olarak tek tip gradyanlar

WCAG Erişilebilirlik Kontrast Standartları Başvuru Tablosu

Web İçeriği Erişilebilirlik Yönergeleri'nden (WCAG 2.1) minimum kontrast gereksinimleri:

SeviyeKontrast Oranı GereksinimiUygulanabilir Metin TürüNotlar
AA≥ 4.5:1Normal gövde metni (<18pt normal veya <14pt kalın)Minimum geçme standardı, yasal uyumluluk gereksinimi
AA≥ 3:1Büyük metin (≥18pt normal veya ≥14pt kalın)Büyük başlıklar için azaltılmış gereksinimler olabilir
AAA≥ 7:1Normal gövde metni (geliştirilmiş)Önemli içerik, uzun süreli okuma için önerilir
AAA≥ 4.5:1Büyük metin (geliştirilmiş)Mükemmel erişilebilir tasarım

5 Renk Uyumu Şeması Hızlı Başvuru

Ton çarkı açılarına dayalı klasik renk kombinasyonları — anında oluşturmak için tıklayın:

Şema TürüTon AralığıRenk SayısıGörsel Etki ve Kullanım Durumları
Tamamlayıcı180° uzaklıkta2 renkGüçlü kontrast — düğmeler, vurgular, CTA'lar için ideal
Benzer±30° bitişik3 renkUyumlu ve doğal — büyük arka planlar, birincil paletler için harika
Üçlü120° aralıkla3 renkCanlı ve dengeli — markalaşma, illüstrasyon için ideal
Bölünmüş-tamamlayıcıTaban + tamamlayıcının ±30°'si3 renkYumuşaklıkla kontrast — tamamlayıcıdan daha zarif
Dörtlü90° aralıkla4 renkZengin ve çeşitli — karmaşık tasarımlar, çocuk ürünleri için ideal

Privacy & Security

Bu renk dönüştürücü, tüm renk hesaplamalarını, görüntü renk seçimini ve toplu işlemeyi tarayıcı belleğinde saf JavaScript kullanarak tamamen tarayıcınızda yerel olarak gerçekleştirir. Girdiğiniz renk değerleri ve yüklediğiniz görüntüler hiçbir şekilde ağ üzerinden herhangi bir sunucuya iletilmez, günlüğe kaydedilmez, önbelleğe alınmaz veya depolanmaz. İşlemden sonra sayfayı kapatmak veya yenilemek, geçici verileri tarayıcı belleğinden otomatik olarak temizler. Henüz yayınlanmamış tasarım maket renkleri ve marka renkleri gibi hassas içerikler, sızıntı riski olmadan güvenle kullanılabilir.

Authoritative References

Troubleshooting

Girişte 'tanınmayan renk formatı' yazıyorsa ne yapmalıyım?

Kontrol edin: 1) HEX formatı 3, 6 veya 8 basamakla geçerli onaltılık karakterler (0-9, a-f, A-F) kullanır; # isteğe bağlıdır; 2) RGB/RGBA formatı parantez içinde üç veya dört değer gerektirir — R/G/B 0-255, Alfa 0-1, virgülle ayrılmış; 3) HSL/HSLA formatı H 0-360, S ve L için %0-100 yüzde değerleri gerektirir; 4) CSS renk adları standart İngilizce adlar olmalıdır — Çince renk adları desteklenmez.

CMYK dönüşümü neden gerçek baskıdan farklı görünüyor?

Bu beklenen bir durumdur: RGB ve CMYK farklı renk gamutlarına sahiptir — birçok parlak RGB rengi CMYK mürekkepleriyle yeniden üretilemez. Araç, erken başvuru için uygun standart dönüşüm formülleri kullanır. Profesyonel baskı için: 1) Tasarım yazılımında CMYK moduna dönüştürün; 2) Doğru ICC renk profillerini kullanın; 3) Dijital proof yapın.

Aynı renk neden telefonumda ve bilgisayarımda farklı görünüyor?

Farklı ekranlar farklı renk gamutu kapsamına, renk sıcaklığına, parlaklığa ve kalibrasyona sahiptir: Mac varsayılan olarak Display P3 geniş gamutunu kullanır, çoğu Windows bilgisayarı sRGB kullanır ve mobil ekranlar değişiklik gösterir. Web tasarımında çoğu cihazda tutarlı görünüm için temel olarak sRGB'yi standartlaştırmanız önerilir.

Renk seçici için görüntü yükleme yanıt vermiyor?

Lütfen onaylayın: 1) Standart bir görüntü formatı (JPG/PNG/GIF/WebP) yüklüyorsunuz; 2) Görüntü dosyası bozuk değil; 3) Dosya boyutu çok büyük değil (5MB altında önerilir). Görüntüden renk seçme işlemi canvas'ta yerel olarak gerçekleşir ve asla sunuculara yüklenmez — sayfayı yenilemek ve yeniden yüklemek genellikle sorunları çözer.