Asosiy mazmunga o'tish

Bepul Rang Tanlash va Palitra Generator

Ranglarni tanlash, HEX/RGB/HSL o'rtasida o'zgartirish va uyg'un palitranglar yaratish.

Yuklangandan keyin oflayn ishlaydi
HEX
HSV
h217°
s76%
v96%
faqat ko'rish uchun

RGB

r
g
b

HSL

H
S
L

Ko'proq formatlar

HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)

WCAG kontrasti

Eng yaqin nomli rang: dodgerblue · Bu yerda qora matn yaxshiroq oʻqiladi (5,71:1)

Oq fonda matn3,68:1AA katta
Qora fonda matn5,71:1AA
#ffffff ustidagi matn3,68:1AA katta

Toʻqlik darajalari (50–950)

Rang palitasi

Qo'shimcha rang

#3b82f6
#f6af3c

Triadik

#3b82f6
#f63c83
#83f63c

Analog

#3ce0f6
#3b82f6
#523cf6

Monoxrom

#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd

Keng qo‘llanilishi

  • Color Picker for Web DesignPick and generate colours for your website — get HEX, RGB, and HSL values plus harmonious palettes.
  • Color Picker for BrandingBuild your brand colour palette — pick primary, secondary, and accent colours that work together.
  • Color Picker for Social MediaCreate eye-catching colour palettes for social media posts, stories, and profile designs.
  • Color Picker for Print DesignPick colours for printed materials — flyers, business cards, brochures — with accurate colour previews.
  • Color Picker for PresentationsDesign slide colour schemes — pick readable text colours, chart palettes, and consistent accent shades.

Qanday ishlaydi

Hammasi qo'lda yozilgan o'girish matematikasi yordamida to'g'ridan-to'g'ri brauzeringizda ishlaydi — rang kutubxonasi yo'q, serverga borib-kelish yo'q. Brauzerning mahalliy rang kirishi yoki EyeDropper API orqali rang tanlaysiz, asbob esa uni darhol olti formatga o'giradi, shu bilan birga WCAG kontrast nisbatlarini hisoblaydi va garmoniya palitralarini yaratadi.

  1. 1
    Mahalliy API orqali rang kirishi
    Siz rangni brauzerning o'rnatilgan <input type="color"> vidjeti orqali, yoki — Chromium asosidagi brauzerlarda — ekraningizdagi istalgan pikselni olishga imkon beradigan EyeDropper API orqali tanlaysiz. Ikkala yo'l ham yagona haqiqat manbaiga aylanadigan hex satrni qaytaradi.
  2. 2
    Qo'lda yozilgan format o'girishlari
    Asbob hex qiymatni o'z matematik funksiyalari (tashqi kutubxonasiz) yordamida RGB, HSL, HSV, CMYK va OKLCH ga o'giradi. OKLCH o'girish sRGB kanallarini chiziqlashtiradi, OKLab kub-ildiz matritsasini qo'llaydi, so'ng xroma va rang burchagini chiqaradi — zamonaviy CSS Color Level 4 chiqishiga mos keladi.
  3. 3
    WCAG kontrast nisbati hisobi
    Nisbiy yorug'lik chiziqlashtirilgan RGB kanallaridan WCAG 2.x formulasi yordamida hisoblanadi. So'ng asbob toza oq va toza qoraga qarshi kontrast nisbatlarini hisoblaydi va WCAG chegaralariga (3:1, 4.5:1, 7:1) muvofiq ularni AA-katta, AA, AAA yoki Muvaffaqiyatsiz deb belgilaydi.
  4. 4
    Garmoniya palitrasi yaratish va mahalliy saqlash
    To'ldiruvchi, uch tomonlama, o'xshash va monoxrom namunalar HSL rang va yorqinlik qiymatlarini matematik jihatdan aylantirish yoki qadamlab chiqariladi. Saqlangan palitralar brauzeringizdagi localStorage'ga yoziladi — hech narsa qurilmangizdan chiqmaydi.

Tegishli asboblar

Ko'p so'raladigan savollar