Kuidas teisendada HEX-värv RGB-ks ja HSL-iks?

Kirjuta või kleebi värv väljale Värvi sisend, näiteks #14b8a6, või kasuta värvivalijat. Tööriist näitab HEX-, rgb()-, hsl()-, hsv()- ja cmyk()-väärtusi ning lisaks oklch(), lab() ja lch(), igaühel nupp Kopeeri.

Milliseid värvivorminguid saan sisestada?

HEX 3, 4, 6 või 8 numbriga, rgb() või rgba(), hsl() või hsla() koma- või tühiksüntaksis ning pelgad arvukolmikud. Kui sisendit ei tuvastata, näitab tööriist parsimisviga.

Kas saan teisendada läbipaistvusega värve?

Jah. Kasuta juhtelementi Läbipaistmatus või sisesta sisendisse alfaväärtus. Väljundid sisaldavad siis alfakanalit, näiteks 8-kohaline HEX, rgba() või kaldkriipsuga alfa kaasaegses süntaksis.

Kas CMYK-väärtused on trüki jaoks täpsed?

Ei, need on standardne sRGB-st CMYK-ks lähendus, mida näidatakse jaotises Trüki jaoks. Täpse trükivärvi jaoks kasuta oma printeri värviprofiili või telli proovitõmmis, sest erksad ekraanivärvid trükitakse sageli tuhmimalt.

Kuidas kontrollida, kas mu värvil on tekstile piisavalt kontrasti?

Vaata jaotist WCAG kontrast. See näitab sinu värvi kontrastsuhet valgel ja mustal, hinnatuna AAA, AA, AA Suur või Ei vasta. Heleduse skaala pakub heledamaid või tumedamaid toone proovimiseks.

Kas see on tõesti tasuta?

Jah. Iga tööriist on tasuta kasutamiseks, ei nõua kontot ega krediitkaarti. Töö toimub sinu seadmes, mitte meie serverites, mis võimaldabki seda tasuta pakkuda.

Kas see töötab mobiilseadmetes?

Jah. See töötab tänapäevastes mobiilibrauserites iOS-is ja Androidis ning midagi pole vaja installida.

🎨

Värvikonverter tasuta

Teisenda värve HEX, RGB, HSL, HSV ja CMYK vormingute vahel koheselt. Sisaldab heleduse skaalat ja eelseadistatud värvilaike.

Töötab sinu brauserisRegistreerimist pole, hüpikaknaid poleSisselogimist ei nõutaIgavesti tasuta

Töötab võrguühenduseta pärast laadimist

Teisendage väri HEX, RGB, HSL, HSV ja CMYK vahel — otsevaatamisega ja üheosalise kopeerimisega. Kõik töötab teie brauseris.

Värvi sisend

Aktsepteerib: HEX (#fff või #ffffff), RGB (255, 255, 255) või HSL (360, 100%, 50%)

Läbipaistvus100%

Eseaded:

HEX#14B8A6

rgb() · pärandrgb(20, 184, 166)

rgb() · kaasaegnergb(20 184 166)

hsl() · pärandhsl(173, 80%, 40%)

hsl() · kaasaegnehsl(173 80% 40%)

oklch()oklch(70.4% 0.123 182.5)

lab()lab(67.1% -42.9 -2.3)

lch()lch(67.1% 43.0 183.1)

hsv()hsv(173, 89%, 72%)

cmyk()cmyk(89%, 0%, 10%, 28%)

RGB väärtused20, 184, 166

WCAG kontrast

Valgele taustale

2,49:1

Ebaõnnestus

Mustale taustale

8,44:1

AAA

🖨️ Printimiseks: Need CMYK-väärtused (89%, 0%, 10%, 28%) on standardne sRGB→CMYK-lähendus teatmiseks. Täpsete prindivärvide jaoks kasutage oma printeri ICC-profiili või trükitud proovi – ekraani CMYK ei saa sobida iga tindiga/paberile.

Heleduse skaala

Klõpsa mis tahes värviprobil, et lülituda sellele toonile

Levinud kasutusviisid

Teisendage värvid veebidisainileHankige HEX, RGB ja HSL väärtused mis tahes värvile — valmis CSS või Tailwindisse kleepimiseks.
Teisendage värvid printimiseks (CMYK)Teisendage ekraanivärvid (HEX/RGB) CMYK-väärtusteks printimisdisainile ja professionaalsele printimisele.
Looge kujundussüsteemide värvidTeisendage kaubamärgi värvid kõigis vormingutes ja looge täieliku kujundussüsteemi jaoks järjepideva heleduse skaalad.
Kontrollige värvi kontrasti juurdepääsetavuse jaoksTeisake värvid RGB väärtuste saamiseks kasutamiseks kontrasti suhte tööriistades — WCAG vastavus juurdepääsetavale disainile.
Teisake värvid FigmaleSaate täpsed HEX ja RGB väärtused Figma värvivalijate ja disaini märgiste süsteemidesse.

Kuidas see töötab

Kogu teisendusloogika on käsitsi kirjutatud JavaScript, mis töötab täielikult sinu brauseris — teeki ega serverikutset pole. Tööriist parsib sinu sisendi, suunab selle läbi puhaste matemaatikafunktsioonide ahela ja toodab samaaegselt üksteist väljundvormingut, sealhulgas kaasaegsed CSS Color 4 ruumid oklch() ja lab().

1
Paindlik sisendi parsimine
Kohandatud parser aktsepteerib kuueteistkümnendarvu (3, 4, 6 või 8 numbrit), rgb()/rgba(), hsl()/hsla() nii vanas komasüntaksis kui kaasaegses tühikusüntaksis, ning paljaid numbrilisi kolmikuid. Alfaväärtused kümnendarvudena või protsentidena normaliseeritakse 0–1 vahemikku enne mis tahes teisenduse algust.
2
RGB kui teisendussõlm
Iga aktsepteeritud vorming lahendatakse esmalt kanoonliseks RGB kolmikuks. Sellest ühest esitusest tööriist hargneb: HSL ja HSV kasutavad standardseid min/max/kroma valemeid; CMYK tuletatakse võtmekanali leidmisega; ning sRGB lineariseerimine (IEC 61966-2-1 defineeritud tükikaupa gammakõver) rakendatakse enne pertseptuaalse ruumi arvutusi.
3
Pertseptuaalsed värviruumid arvutatud nullist
oklch() arvutatakse Björn Ottossoni referents 3×3 maatriksite abil (LMS kuupjuureruum). lab() ja lch() kasutavad Bradfordi kromaatilist adaptatsiooni, et teisendada D65 valgest punktist D50-ks, mis vastab sellele, kuidas CSS Color 4 defineerib lab()'i. Need on samad valemid, mida kasutatakse brauseri renderdusmootorites — siin implementeeritud ilma välise sõltuvuseta.
4
WCAG kontrast ja heleduse skaala
Suhteline heledus arvutatakse WCAG 2.1 valemi järgi (lineariseeritud R, G, B kaalutud 0,2126/0,7152/0,0722) ja kontrastsuhe valge ja musta suhtes hinnatakse AA-suur, AA, AAA või Ei läbi. Üheksa-astmeline heleduse riba genereeritakse astudes HSL heleduskanalit 10%-lt 90%-le, lastes sul klõpsata iga näidise peal selle toonimiseks.

Seotud tööriistad

🎨

Värvivalija ja paleti generaator

Vali värve, teisenda HEX/RGB/HSL vahel ja genereeri harmoonilisi palette.

Proovi järele

🎨

Juhuslike värvide generaator

Loo juhuslikke värve ükshaaval või viiest koosneva paletina, lukusta need, mis meeldivad, kopeeri HEX-, RGB- või HSL-väärtused ja ekspordi palett PNG- või CSS-failina.

Proovi järele

🎨

Värvipalleti generaator

Loo komplementaarseid, analoogseid, triaadilisi ja monohroomseid värvipallette mis tahes põhivärvist. Kopeeri hex-koodid ühe klõpsuga.

Proovi järele

Värvikonverter tasuta

Levinud kasutusviisid

Kuidas see töötab

Seotud tööriistad

Värvivalija ja paleti generaator

Juhuslike värvide generaator

Värvipalleti generaator

Korduma kippuvad küsimused