Rang O'giruvchi va Palette Generator
HEX, RGB, HSL, OKLCH formatlar orasida konvertatsiya, WCAG kontrast tekshiruvi va palette generatsiyasi
Rang Tanlash
Bu rang
#0D5A6B
darkslategrey
Bu rang ustida oq matn eng yaxshi o'qiladi: 7.80:1
Boshqa rang fazolari
Qurish
Oq matn 500 dan yuqorida AA o'tadi, qora matn 400 gacha.
#0d5a6b@theme {
--color-darkslategrey-50: #f3fafc;
--color-darkslategrey-100: #dbf0f5;
--color-darkslategrey-200: #aedfea;
--color-darkslategrey-300: #65d3ec;
--color-darkslategrey-400: #1ab3d5;
--color-darkslategrey-500: #0d5a6b;
--color-darkslategrey-600: #0c505f;
--color-darkslategrey-700: #0b4856;
--color-darkslategrey-800: #05404d;
--color-darkslategrey-900: #04343e;
--color-darkslategrey-950: #032830;
}Monoxromatik
5Analogik
5Komplementar
10background: linear-gradient(90deg, #0d5a6b 0%, #ffffff 100%);Hali tarix yo'q
Kontrast (WCAG)
Aa Namuna matn
Aa Namuna matn
- AA (4.5:1)
- AAA (7:1)
- AA katta (3:1)
- Ikonka/chegara (3:1)
Aa Namuna matn
Aa Namuna matn
- AA (4.5:1)
- AAA (7:1)
- AA katta (3:1)
- Ikonka/chegara (3:1)
Katta matn — 24px oddiy yoki 18.66px qalin va undan yuqori.
Boshqa fon bilan solishtirish
Aa Namuna matn
Aa Namuna matn
- AA (4.5:1)
- AAA (7:1)
- AA katta (3:1)
- Ikonka/chegara (3:1)
Rang formatlari — ma'lumotnoma
Har bir format bir xil rangni boshqacha yozadi. Quyidagi jadvalda bitta rang — #0d5a6b — yettala yozuvda ko'rsatilgan, shuning uchun qatorlarni bevosita solishtirish mumkin.
| Format | CSS sintaksisi | Misol | Qachon ishlatiladi |
|---|---|---|---|
| HEX | #RRGGBB[AA] | #0d5a6b | Web'da eng keng tarqalgan yozuv. Har bir kanal 16 lik sanoq tizimida ikki belgi bilan beriladi; sakkiz belgili shakl oxirgi juftlikda shaffoflikni tashiydi. Qisqa va nusxalash oson, lekin raqamlarga qarab rangni tasavvur qilish qiyin. |
| RGB | rgb(R G B [/ A]) | rgb(13 90 107) | Ekran fizikasiga eng yaqin yozuv: qizil, yashil va ko'k nurning miqdori 0–255 oralig'ida. JavaScript'da rang bilan hisob-kitob qilganda odatda shu shakl ishlatiladi. Zamonaviy sintaksisda kanallar probel bilan ajratiladi, shaffoflik esa qiya chiziqdan keyin keladi. |
| HSL | hsl(H S% L% [/ A]) | hsl(191 78% 24%) | Rang tovushi (0–360°), to'yinganlik va yorqinlik. Inson o'ylash tarzi bilan mos keladi, shuning uchun rangni qo'lda tuzatish uchun qulay: yorqinlikni oshirsangiz rang oqaradi, kamaytirsangiz to'qlashadi. Kamchiligi — bir xil yorqinlik turli rang tovushlarida turlicha ko'rinadi. |
| OKLCH | oklch(L C H [/ A]) | oklch(0.433 0.073 217) | 2026-yilda dizayn tizimlari uchun standart. HSL'dan farqi shundaki, yorqinlik idrok bo'yicha bir tekis: bir xil L qiymatidagi sariq va ko'k ko'zga ham bir xil yorqinlikda ko'rinadi. Tailwind v4 o'zining rang palitrasini aynan shu yozuvda yozgan, shuning uchun token eksporti uchun eng to'g'ri tanlov. |
| OKLab | oklab(L a b [/ A]) | oklab(0.433 -0.058 -0.045) | OKLCH ning to'g'ri burchakli koordinatalari: L — yorqinlik, a va b — yashil↔qizil va ko'k↔sariq o'qlari. Ikki rang orasidagi idrok masofasini o'lchash uchun ishlatiladi — masalan, shu asbob rangga eng yaqin nomni aynan shu fazoda topadi. |
| LCH | lch(L% C H [/ A]) | lch(35% 22 227) | CIE Lab ning silindrik shakli. OKLCH dan oldingi avlod: g'oyasi bir xil, ammo ba'zi rang tovushlarida yorqinlik bir tekis chiqmaydi. Eski dizayn tizimlari va bosmaxona ish oqimlarida hali uchraydi. |
| Lab | lab(L% a b [/ A]) | lab(35% -15 -16) | 1976-yilda qabul qilingan CIE Lab fazosi — qurilmadan mustaqil, ya'ni bir xil qiymat har qanday ekranda bir xil rangni bildiradi. Ranglarni qiyoslash va rang boshqaruvi tizimlarida asosiy ish fazosi bo'lib qoladi. |
HEX o'girish qo'lda ham bajariladi: #0d5a6b dagi 0d juftligi 0×16 + 13 = 13 ga, 5a → 5×16 + 10 = 90 ga, 6b → 6×16 + 11 = 107 ga teng. Natija — rgb(13 90 107).
Ko'p so'raladigan savollar
Qaysi rang formatlarini qo'llab-quvvatlaydi?
HEX (3, 4, 6 va 8 xonali), RGB, HSL, Lab, LCH, OKLab, OKLCH hamda CSS rang nomlari. Zamonaviy CSS Color 4 sintaksisi ham o'qiladi — masalan, rgb(255 0 0 / 50%) yoki hsl(200deg 50% 40%). CMYK qo'llab-quvvatlanmaydi: u bosmaxona profiliga bog'liq va brauzerda aniq hisoblab bo'lmaydi.
WCAG kontrast tekshiruvi nimani ko'rsatadi?
Tanlangan rangning oq va qora fonga nisbatan kontrast nisbatini hisoblaydi. WCAG 2.1 bo'yicha oddiy matn uchun AA — 4.5:1, AAA — 7:1, katta matn uchun 3:1, ikonka va chegaralar uchun ham 3:1 talab qilinadi. Rang shaffof bo'lsa, avval fon bilan aralashtirilib, keyin o'lchanadi. AA o'tmasa, asbob sizning o'z shkalangizdagi eng yaqin mos qadamni taklif qiladi.
Ranglarim serverga yuboriladimi?
Yo'q. Barcha konvertatsiya va hisob-kitob brauzeringizda bajariladi. Rang tarixi va sevimlilar faqat sizning qurilmangizdagi localStorage'da saqlanadi va uni istalgan vaqtda tozalashingiz mumkin.
Natijani loyihamga qanday ko'chiraman?
Shkalani CSS o'zgaruvchilari, Tailwind v4 @theme bloki yoki SCSS o'zgaruvchilari sifatida, HEX yoki OKLCH yozuvida eksport qilish mumkin. Token nomini o'zingiz belgilaysiz, natija nusxalashdan oldin ekranda to'liq ko'rinadi. Gradient uchun tayyor CSS va Tailwind klassi beriladi.