Spalvos konversija tarp RGB, HSL ir šešioliktainės

Darbas su spalvomis žiniatinklyje apima nuolatinį žongliravimą tarp kelių užrašų. Spalvų keitiklis leidžia išvengti rankinių klaidų ir leidžia akimirksniu persijungti iš vieno formato į kitą, priklausomai nuo naudojimo konteksto. Kiekvienas formatas turi savo stipriąsias puses, o žinojimas, kurį iš jų naudoti, yra vienas iš priekinės dalies kūrėjo refleksų.

Štai tipiniai naudojimo būdai, skatinantys konvertuoti spalvas:

• RGB yra CSS ir JavaScript, kurį žmonės gali skaityti, kad suprastų dominuojančią reikšmę (raudoni, žali, mėlyni kanalai 0–255).
Dėl
• HSL atspalvio keitimas yra nereikšmingas: tiesiog sureguliuokite sodrumą arba ryškumą neperskaičiuodami kiekvieno kanalo.
• HEX yra kanoninis kopijavimo ir įklijavimo formatas: šeši simboliai, suderinami visur, puikiai tinka Figma, Sketch modeliams ar stiliaus vadovams.
• Konversijos HEX į RGB, RGB į HEX, HEX į HSL ir jų abipusės vertės yra dažniausiai naudojamos CSS ir JavaScript operacijos.

RGB ir RGBA (raudona, žalia, mėlyna, alfa)

Kiekvienas kanalas yra užkoduotas kaip sveikasis skaičius nuo 0 iki 255, kuris atitinka vieną baitą kiekvienam komponentui ir suteikia 16 777 216 galimų spalvų. RGBA alfa kanalas svyruoja nuo 0 (skaidrus) iki 1 (nepermatomas) ir kontroliuoja skaidrumą.

.button {
    fono spalva: rgb(20, 0, 182);
    kraštinės spalva: rgba(20, 0, 182, 0,5);
}

HEX ir HEX8 (šešioliktainis žymėjimas)

Labai populiarus kompaktiškas formatas: #RRGGBB su šešiais simboliais, kur kiekviena pora žymi RGB kanalą 16 bazėje. Variantas #RRGGBBAA su aštuoniais simboliais prideda alfa kanalą šešioliktaine tvarka (00 skaidrus, FF nepermatomas). Taip pat yra trumpas žymėjimas #RGB: #F53 yra #FF5533 atitikmuo.

.title { spalva: #1400B6; }
.šešėlis { spalva: #1400B680; } /* alfa 50 % */
.accent { spalva: #F53; } /* trumpoji forma */

HSL ir HSLA (atspalvis, sodrumas, šviesumas, alfa)

HSL spalvas apibūdina suvokiant. Atspalvis yra spalvų rato kampas (nuo 0 iki 360°), Sotumas ir Šviesumas yra procentai. Tai yra pageidaujamas variantų generavimo formatas: užvedamo mygtuko pašviesinimas, išjungtos būsenos nusotinimas, nuoseklios paletės kūrimas keičiant tik atspalvį.

$pirminis: hsl(247, 100%, 36%);
$pirminis-hover: hsl(247, 100%, 46%);   /* aiškiau */
$pirminis nutildytas: hsl(247, 30%, 36%);    /* mažiau prisotintas */

Kiti esami formatai

CMYK (Cyan, Magenta, Yellow, Key) naudojamas spausdinant: jis apibūdina spalvą atimant rašalą ir nėra svarbus ekrane. OKLCH ir LAB yra suvokiamai vienodos erdvės, kurios atsirado 4 CSS spalvų lygyje; jie leidžia geriau valdyti jaučiamą ryškumą. Šis įrankis skirtas RGB, HEX ir HSL konversijoms, kurios patenkina didžiąją daugumą žiniatinklio poreikių.

HEX į RGB reiškia, kad eilutė analizuojama simbolių poromis ir kiekviena pora interpretuojama kaip 16 bazinių sveikųjų skaičių:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB į HEX yra atvirkštinė operacija: kiekvienas kanalas konvertuojamas į 16 bazę, užpildomas dviem simboliais, tada sujungiamas.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB į HSL yra labiau algoritminis. Normalizuojame kanalus nuo 0 iki 1, apskaičiuojame min ir max, kad išvestų ryškumą, tada sodrumą, tada atspalvį pagal dominuojantį kanalą. Visa formulė yra dokumentuota CSS spalvų modulio 3 lygio specifikacijoje.

Įrankis veikia abiem kryptimis tarp RGB, HEX ir HSL. Norėdami atlikti konversiją:

1. Pasirinkite įvesties formatą: RGB, HEX arba HSL.
2. Įveskite reikšmę (pvz., #1400B6, rgb(20, 0, 182) arba hsl(247, 100%, 36%)).
3. Pradėkite konvertavimą: iš karto rodomi dviejų kitų formatų atitikmenys.
4. Nukopijuokite norimą rezultatą naudodami tam skirtą mygtuką ir įklijuokite jį į stiliaus lapą arba maketą.

Skaičiavimas atliekamas naršyklės pusėje, duomenys į serverį nesiunčiami.

• Žiniatinklio dizainas ir CSS: gaukite HEX iš maketo ir gaukite lygiavertį HSL, kad sugeneruotumėte pelės žymeklį arba aktyvią būseną nenukrypstant nuo atspalvio.
• Vizualinė tapatybė ir paletė: atmeskite pagrindinę spalvą keliais variantais (šviesią, tamsią, nutildytą), žaisdami su šviesumu arba HSL sodrumu.
• Iliustracija ir grafika: perkelkite ekrano spalvą (RGB) į šešioliktainį kodą, kad būtų perduota programinei įrangai arba klientui.
• Prieinamumas: konvertuokite į RGB formatą, kad apskaičiuotumėte kontrasto santykį (įprastam tekstui WCAG AA reikia 4,5:1) su fono spalva.
• CSS kintamieji ir pirminiai procesoriai: į SASS failą arba „Tailwind“ temą pateikite sklaidos kanalo dizaino prieigos raktus iš vienos nuorodos spalvos.

Kai kurios baigtos konversijos iliustruoja trijų formatų atitiktį:

#1400B6 -> rgb(20, 0, 182) -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51) -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113) -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15) -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0) -> hsl(0, 0%, 0%)

Su alfa kanalu:

#1400B680 -> rgba(20, 0, 182, 0,50) -> hsla(247, 100%, 36%, 0,50)
#FF5733CC -> rgba(255, 87, 51, 0,80) -> hsla(11, 100%, 60%, 0,80)

Kuo skiriasi HEX ir HEX8?

Klasikinis HEX koduoja tris RGB kanalus per šešis simbolius (#RRGGBB). HEX8 prideda du alfa kanalo simbolius (#RRGGBBAA), kurie padeda valdyti skaidrumą vienoje eilutėje. #1400B6FF ir #1400B6 vizualiai suteikia tą pačią spalvą, nepermatomą.

Ar turėtume teikti pirmenybę HSL ar RGB naudojant CSS?

Jie du yra lygiaverčiai atvaizdavimo srityje. HSL yra išraiškingesnė kuriant nuoseklią paletę arba būsenos variantus (užvedimas, fokusavimas), nes modifikuojame vieną suvokimo parametrą. RGB išlieka praktiškas dirbant su duomenimis iš drobės ar jutiklio.

Kodėl mano HEX atspalvis skiriasi, nei tikėtasi?

Trys dažnos priežastys: trumpo #RGB ir ilgo #RRGGBB painiavos (simboliai dubliuojami, nesujungti), simbolio kopijavimo klaida arba rodymas nekalibruotame ekrane. Taip pat patikrinkite, ar jūsų CSS neuždengia pirminio neskaidrumo, kuris keičia galutinį atvaizdavimą.

Kam naudojamas RGBA ir HSLA alfa kanalas?

Alfa kanalas valdo spalvos neskaidrumą nuo 0 (visiškai skaidrus) iki 1 (visiškai nepermatomas). Tai naudinga perdangoms, šešėliams, išjungtoms būsenoms arba vaizdo perdangoms. Skirtingai nuo CSS ypatybės nepermatomumo, RGBA ir HSLA veikia tik tikslinę spalvą, o ne jos antrinius elementus.

Ar galime konvertuoti spalvą neprarasdami tikslumo?

Tarp RGB ir HEX konvertavimas yra tikslus, abu formatai koduoja tą pačią informaciją 24 bitais. Konvertavimas į HSL apima atspalvio, sodrumo ir ryškumo apvalinimą; Todėl kelionė pirmyn ir atgal RGB > HSL > RGB gali grąžinti reikšmę, pasislinkusią vienu vienetu tam tikruose kanaluose.

Kodėl naudoti internetinį keitiklį, o ne vidaus funkciją?

Jei norite atlikti vienkartinį testą, sukurkite paletės prototipą arba greitai patikrinkite HSL spalvos HEX atitikmenį, išgautą iš modelio, internetinis keitiklis yra nedelsiant. Pasikartojančiam programiniam poreikiui tinkamesnė biblioteka, pvz., color, chroma-js arba tinycolor2.