Spalvų parinkiklis

Pasirinkite spalvą rate, tiksliai ją sureguliuokite sodrumo ir ryškumo drobėje ir gaukite ją bet kuriuo formatu, kurio reikia jūsų projektui, nuo #RRGGBB iki oklch(). Šis įrankis turi ir tai, ko dažnai trūksta kituose spalvų parinkikliuose: tris rato geometrijas, įskaitant tradicinį dailininko RYB ratą, harmonijų taisykles, kurios paletę sudaro už jus, alfa kanalą ir visos paletės eksportą vienu paspaudimu kaip CSS kintamuosius, SCSS ar JSON. Viskas apskaičiuojama jūsų naršyklėje.

RYB, ar RGB? Trys spalvų ratai vietoj vieno

Perjungiklis Rato režimas keičia atspalvių išdėstymą rate:

• HSV ir HSL yra skaitmeniniai ratai. Atspalviai išdėstyti taip, kaip juos maišo šviesa ekrane. Skiriasi kvadratine drobe: HSV ryškiausias kampas yra grynas atspalvis, o HSL grynus atspalvius sudeda per vidurį šviesumo, virš jų palikdamas baltą.
• RYB (dailininko) išdėsto atspalvius taip, kaip juos mokosi dailininkai: raudona, geltona ir mėlyna kaip pirminės spalvos, tarp jų oranžinė, žalia ir violetinė (žr. RYB spalvų modelis, anglų kalba). Skirtumą labiausiai pastebėsite harmonijose. RYB rate raudonos papildoma spalva yra žalia, o mėlynos oranžinė, klasikinės pigmentų poros iš dailės pamokų. Skaitmeninis ratas raudoną suporuoja su žydra. Jei „papildoma“ paletė iš įprasto spalvų parinkiklio kada nors atrodė ne taip, dabar žinote kodėl.

Spalvų harmonijos, kurios paletę sudaro už jus

Lauke Spalvų harmonija pasirinkite taisyklę. Ratas pažymės kompanionines spalvas, o po juo atsiras parengta paletė:

• Papildoma: viena priešinga spalva. Stipriausias kontrastas, tinka vienam akcentui šalia pagrindinės prekės ženklo spalvos.
• Skaidytoji papildoma: du papildomos spalvos kaimynai. Beveik toks pat kontrastas, bet lengviau subalansuojamas.
• Triadinė: trys tolygiai išdėstyti atspalviai. Gyva, bet stabili kombinacija, kai viena spalva dominuoja, o kitos dvi naudojamos saikingai.
• Tetradinė (kvadratas): keturi atspalviai. Turtingos schemos iliustracijoms ir grafikams, sunkiai subalansuojamos programos sąsajoje.
• Analogiška: artimiausi kaimynai. Rami kombinacija fonams ir perėjimams.
• Monochromatinė: vienas atspalvis keliais šviesumo lygiais. Saugiausias pasirinkimas mygtukų būsenoms (užvedimas, aktyvus, išjungtas).

Visą paletę nukopijuosite vienu paspaudimu jums reikiamu formatu: paprastas HEX, RGB, HSL, OKLCH, paruoštos įklijuoti CSS kintamosios savybės (--color-1: …), SCSS kintamieji arba JSON kodui. Jei norite patikrinti, ar paletės spalvos išlieka kontrastingos žmonėms, sunkiau atskiriantiems atspalvius, padarykite ekrano nuotrauką ir konvertuokite ją į pilkus tonus.

Konvertuokite HEX, RGB, HSL, OKLCH ir CMYK: įklijuokite bet ką, gaukite viską

Įvesties laukai priima beveik bet kokį spalvos žymėjimą: #f80, #ff8800, aštuonių skaitmenų hex su alfa kanalu, rgb() ir rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 ir vardines CSS spalvas, pvz., rebeccapurple. Kad ir ką įvestumėte, gausite septynis suderintus rezultatus: HEX, RGB, HSL, HSV, LCH, OKLCH ir CMYK, kiekvieną su savo kopijavimo mygtuku.

Slankiklis Nepermatomumas (alfa) po peržiūra perjungia rezultatus į skaidrias formas #RRGGBBAA, rgba() ir hsla(). Peržiūra tuo metu piešiama ant šachmatinio fono, todėl skaidrumą matote iš karto.

Artimiausia Tailwind CSS žyma bet kuriai spalvai

Du žymekliai po peržiūra spalvą pavadina: artimiausia vardinė CSS spalva (tinka greitiems prototipams) ir artimiausia Tailwind žyma, pavyzdžiui, orange-500. Taip liekate savo dizaino sistemoje ir nekuriate vienkartinių reikšmių. Spustelėję žymeklį, jį nukopijuosite.

Tai atsako į klausimą, kylantį per kiekvieną projekto perdavimą: dizaineris atsiuntė hex kodą, kuri Tailwind klasė jam artimiausia? Atitikmuo skaičiuojamas pagal numatytąją Tailwind CSS 4 paletę (žr. Tailwind dokumentaciją, anglų kalba), todėl žymą galite iškart naudoti klasės pavadinime.

Kurį spalvos formatą naudoti?

Formatas	Pilnas pavadinimas	Kada naudoti
HEX	Hexadecimal	Numatytasis pasirinkimas internetui. Trumpas, palaikomas visur, lengvai kopijuojamas. Aštuoni skaitmenys prideda alfa kanalą.
RGB	Red, Green, Blue	Taip mąsto ekranai. Trys šviesos kanalai nuo 0 iki 255. Formatas, kurio tikisi dauguma API ir canvas kodo.
HSL	Hue, Saturation, Lightness	Koregavimui iš akies. „Šiek tiek šviesiau“ arba „mažiau sodrumo“ reiškia vieno skaičiaus pakeitimą.
HSV	Hue, Saturation, Value	Grafinės programos. Modelis, kuriuo grįstas spalvų parinkimas Photoshop ir GIMP programose.
LCH	Lightness, Chroma, Hue	Suvokiama vienodai. Vienodi skaitiniai žingsniai atrodo kaip vienodi vizualiniai žingsniai, o tai HSL tik apsimeta darantis.
OKLCH	OK Lightness, Chroma, Hue	Modernus CSS pasirinkimas. Ištaiso atspalvio poslinkius mėlynuose tonuose, kurie kamuoja LCH. Palaikomas visų dabartinių naršyklių ir tinka dizaino žymoms.
CMYK	Cyan, Magenta, Yellow, Key	Orientyras spaudai. Apytikslis konvertavimas susitarti su spaustuve, galutines reikšmes lemia jos spalvų profilis.

Kodėl OKLCH yra suvokiamai vienodesnis nei senesni modeliai, paaiškina Oklab erdvės autorius Björnas Ottossonas savo originaliame straipsnyje (anglų kalba). Sintaksę ir naršyklių palaikymą apibendrina MDN (anglų kalba). Kaip veikia spaudos modelis, aprašo Vikipedijos straipsnis apie CMYK.

Smulkmenos, kurios taupo laiką

• Istorija saugoma pati. Paskutinės 24 spalvos išlieka po puslapio atnaujinimo. Jos lieka tik jūsų naršyklės saugykloje ir niekur nesiunčiamos.
• Pipetė. Naršyklėse su EyeDropper API (Chrome ir Edge) spalvą pasirinksite bet kur ekrane, net už naršyklės lango ribų. Reikia spalvos iš nuotraukos ar failo su logotipu? Naudokite internetinę spalvų pipetę.
• Valdymas klaviatūra. Ratas ir sodrumo bei ryškumo drobė reaguoja į rodyklių klavišus, todėl spalvą sureguliuosite mažais žingsniais.
• Išankstiniai nustatymai siūlo dažniausiai naudojamas bazines spalvas, kai reikia tik greito starto.

Dažniausiai užduodami klausimai

Kaip konvertuoti OKLCH į HEX?

Įklijuokite oklch() reikšmę į OKLCH lauką ir visi kiti rezultatai, įskaitant HEX, tuoj pat perskaičiuojami. Veikia ir priešingai: įveskite HEX ir perskaitykite atitinkamą oklch(). Viena išlyga: OKLCH gali apibūdinti spalvas už sRGB ribų, o tokios spalvos apkarpomos iki to, ką sRGB gali parodyti. Todėl labai sodrus oklch() plataus gamos ekrane neatrodys taip pat, kaip jo HEX atitikmuo.

Ar oklch() galima naudoti produkciniame CSS?

Taip. Visos dabartinės Chrome, Edge, Firefox ir Safari versijos palaiko oklch(), ir jis tapo populiariu žymėjimu dizaino žymoms (Tailwind CSS 4 juo apibrėžia visą paletę). Labai senoms naršyklėms virš jo pridėkite HEX atsarginį variantą. Šis įrankis pateikia abi reikšmes.

Kodėl harmonijos pasikeičia, kai perjungiu į RYB ratą?

Nes tai, kas yra „priešais“, priklauso nuo to, kaip atspalviai išdėstyti apskritime. RYB ratas tolygiai išdėsto pigmentų pirmines spalvas, todėl papildomos poros atitinka tai, ką žino dailininkai: raudona ir žalia, mėlyna ir oranžinė, geltona ir violetinė. HSV ir HSL ratai atspalvius išdėsto pagal šviesos maišymą, todėl suporuoja raudoną su žydra. Nei vienas nėra klaidingas: RYB atitinka meno mokymą, HSV ir HSL atitinka tai, ką daro ekranai.

Ar galiu pasitikėti CMYK reikšmėmis spaudai?

Laikykite jas orientacinėmis. Tikras konvertavimas spaudai priklauso nuo spausdintuvo, popieriaus ir rašalo spalvų profilio (anglų kalba). Ta pati RGB spalva ant kreidinio ir nekreidinio popieriaus atrodo skirtingai. Čia reikšmes skaičiuoja standartinė formulė, kuri priartina prie tikslo, bet galutinis atspaudas priklauso spaustuvei.

Kur Firefox ar Safari yra pipetės mygtukas?

Jis sąmoningai paslėptas. EyeDropper API (MDN, anglų kalba), kuriuo remiasi mygtukas, kol kas veikia tik naršyklėse, pagrįstose Chromium (Chrome, Edge, Opera). Visos kitos įrankio funkcijos veikia visur, trūksta tik spalvos pasirinkimo iš ekrano. Jei reikia spalvos iš paveikslėlio, naudokite internetinę spalvų pipetę, kuri veikia visose naršyklėse.

Ar mano spalvų istorija lieka privati?

Taip. Istorija saugoma jūsų naršyklės localStorage vietoje jūsų įrenginyje. Nieko, ką pasirenkate, įklijuojate ar kopijuojate, niekur nesiunčiama. Visas įrankis veikia kaip JavaScript naršyklėje, tai galite patikrinti kūrėjo įrankių skiltyje Network (Tinklas).