Spalvų keitiklis HEX ↔ RGB ↔ HSL
Akimirksniu konvertuokite spalvas tarp HEX, RGB ir HSL formatų — su vizualiniu spalvų parinkikliu.
Įveskite spalvą HEX, RGB arba HSL formatu — keitiklis iš karto atnaujina visus tris formatus vienu metu. HEX skirtuke naudokite naršyklės spalvų parinkiklį vizualiam spalvos pasirinkimui. Mygtukas „Kopijuoti" nukopijuoja reikšmę į iškarpinę. Palaiko tiek 3 skaitmenų (#ABC), tiek 6 skaitmenų (#AABBCC) HEX kodus.
Šis įrankis naudojamas žiniatinklio kūrėjų, UI/UX dizainerių ir visų, dirbančių su CSS, HTML, Figma ar dizaino sistemomis. HEX, RGB ir HSL konvertavimas yra kasdienis poreikis kuriant svetaines. Visi skaičiavimai atliekami naršyklėje — jokie duomenys nesiunčiami.
Dažniausiai užduodami klausimai
Kas yra HEX spalvos kodas?
HEX spalva — šešiaženklis šešioliktainis kodas (pvz., #1565C0), vaizduojantis raudoną, žalią ir mėlyną komponentus. Kiekviena pora nuo 00 iki FF atitinka 0–255 dešimtainėje. HEX yra dažniausiai naudojamas spalvų formatas CSS, HTML ir dizaino įrankiuose.
Koks skirtumas tarp RGB ir HSL?
RGB aprašo spalvą per raudonos, žalios ir mėlynos šviesos intensyvumą (0–255). HSL (atspalvis, sodrumas, šviesumas) intuityvesnis dizaineriams: atspalvis — kampas 0–360°, sodrumas — intensyvumas 0–100%, šviesumas — ryškumas 0–100%. HSL patogus norint padaryti spalvą šviesesnę, tamsesnę ar pakeisti jos sodrumo lygį.
Kaip konvertuoti HEX į RGB?
Padalinkite 6 simbolių HEX į tris poras: pirma — raudona, antra — žalia, trečia — mėlyna. Konvertuokite kiekvieną porą iš šešioliktainės į dešimtainę. Pavyzdžiui: #1565C0 → 15=21, 65=101, C0=192 → RGB(21, 101, 192). Šis keitiklis tai daro automatiškai.
Ar galima naudoti 3 skaitmenų HEX kodą?
Taip. #1AC yra sutrumpintas #11AACC variantas, kur kiekvienas skaitmuo padvigubinamas. Šis keitiklis priima abu formatus. Maksimaliam suderinamumui rekomenduojama naudoti 6 skaitmenų formatą.
Kur naudojamos HEX spalvos?
HEX naudojamas CSS (color: #1565C0), HTML, SVG ir daugelyje dizaino įrankių (Figma, Adobe XD, Sketch, Photoshop). HEX glaustas ir lengvai skaitomas. RGB tinkamesnis RGBA (su skaidrumu) ir programiniam spalvų valdymui.
Kaip rasti HEX kodą Figma?
Figma: pasirinkite elementą, atidarykite Fill skydelį dešinėje, spustelėkite spalvos kvadratą — HEX kodas bus parodytas ir galėsite jį nukopijuoti. Pipetė leidžia paimti spalvą iš bet kurios ekrano vietos. VS Code: įdiekite "Color Highlight" plėtinį, kad matytumėte spalvų peržiūras šalia HEX/RGB kodų CSS failuose.
Kas yra RGBA?
RGBA prideda alpha (skaidrumo) kanalą prie RGB: RGBA(21, 101, 192, 0.8) — ta pati spalva 80 % neskaidrumu. Alpha reikšmė nuo 0 (visiškai skaidri) iki 1 (visiškai neskaidri). Šis keitiklis apdoroja RGB be alpha — RGBA naudokite čia pateiktas RGB reikšmes ir pridėkite norimą alpha CSS: rgba(R, G, B, alpha).
Kaip konvertuoti HSL į HEX?
HSL → HEX konvertavimas vyksta per tarpinį RGB žingsnį. Pirmiausia HSL konvertuojamas į RGB pagal standartinę formulę, tada kiekvienas RGB komponentas paverčiamas dviženkle šešioliktaine verte. Šis keitiklis automatiškai atlieka visą konvertavimo grandinę.
Kas yra saugios žiniatinklio spalvos?
Saugios žiniatinklio spalvos — 216 spalvų rinkinys (6 vertės kiekvienam kanalui: 00, 33, 66, 99, CC, FF), vienodai atrodančios senuose monitoriuose. Modernūs ekranai palaiko daugiau nei 16 mln spalvų, todėl ši paletė iš esmės nebeaktuali. Galite naudoti bet kokias HEX/RGB/HSL vertes be apribojimų.
Kaip CSS apibrėžia spalvas?
CSS palaiko: HEX (#1565C0), RGB (rgb(21, 101, 192)), RGBA, HSL (hsl(213, 80%, 42%)), HSLA, pavadintas spalvas (blue, red) ir naujus formatus oklch(). HEX ir RGB labiausiai palaikomi. HSL patogus programiškai koreguojant šviesumą ar sodrumo lygį per CSS kintamuosius.