Spalvų parinkiklis internetu

Pasirinkite spalvą rate, tiksliai ją sureguliuokite sodrumo ir ryškumo drobėje ir gaukite ją visais formatais, kuriuos naudoja jūsų projektas – nuo #RRGGBB iki oklch(). Šis parinkiklis apima ir tai, ką kiti įrankiai dažnai praleidžia: tris rato geometrijas, įskaitant tradicinį dailininko RYB ratą, harmonijų sluoksnius, kurie patys sukuria paletę, alfa kanalą ir vieno paspaudimo visos paletės eksportą kaip CSS kintamuosius, SCSS ar JSON. Viskas apskaičiuojama vietoje, jūsų naršyklėje.

RYB vs RGB: trys ratai, ne vienas

Selektorius Rato režimas keičia paties rato geometriją:

• HSV ir HSL yra skaitmeniniai ratai – atspalviai išdėstyti taip, kaip juos maišo RGB ekranai. Jie skiriasi tuo, kaip elgiasi kvadratinė drobė: HSV ryškiausias kampas yra grynas atspalvis, o HSL grynus atspalvius patalpina ties 50 % šviesumo, virš jų – balta.
• RYB (dailininko) išdėsto atspalvius taip, kaip jų mokėsi dailininkai: raudona, geltona ir mėlyna kaip pirminės spalvos, tarp jų – oranžinė, žalia ir violetinė. Jo praktinė nauda matoma harmonijose – RYB rate raudonos priešingybė yra žalia, o mėlynos – oranžinė, klasikinės pigmentų poros, tuo tarpu skaitmeninis ratas raudoną suporuoja su žydra. Jei „papildomos“ paletė iš įprasto parinkiklio kada nors atrodė jums neteisingai, štai kodėl.

Spalvų harmonijos, kurios sukuria paletę už jus

Pasirinkite taisyklę po Spalvų harmonija, ir ratas pažymės susijusias spalvas, kurios rodomos kaip parengta paletė:

• Papildoma – viena priešinga spalva. Stipriausias kontrastas; naudokite vienam akcentui prieš dominuojančią prekės ženklo spalvą.
• Skaidytoji papildoma – du gretimi papildomos spalvos atspalviai. Beveik toks pat kontrastas, tačiau lengviau subalansuojamas.
• Triadinė – trys tolygiai išdėstyti atspalviai. Gyva, bet stabili kombinacija; leiskite vienai spalvai dominuoti, o kitas dvi naudokite kukliai.
• Tetradinė (kvadratas) – keturi atspalviai. Turtingos schemos iliustracijoms ir duomenų vizualizacijai; sunkiai subalansuojamos naudotojo sąsajos darbe.
• Analogiška – artimiausi kaimyniniai atspalviai. Maža įtampa, tinka fonams ir gradientams.
• Monochromatinė – vienas atspalvis skirtingais šviesumo laipsniais. Saugiausias pasirinkimas sąsajos būsenoms (užvedimas, aktyvus, išjungtas).

Paletės skydelis vienu paspaudimu nukopijuoja visą rinkinį pasirinktu formatu: paprastas HEX, RGB, HSL, OKLCH, paruoštos įklijuoti CSS individualios savybės (--color-1: …), SCSS kintamieji arba JSON, skirtas perduoti kodui.

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

Įvesties laukai priima praktiškai bet kokį spalvos žymėjimą: #f80, #ff8800, 8 skaitmenų HEX su alfa kanalu, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 arba CSS spalvų pavadinimus, pvz., rebeccapurple. Kad ir kas būtų įvesta, gausite septynis sinchronizuotus rezultatus: HEX, RGB, HSL, HSV, LCH, OKLCH ir CMYK, kiekvieną su savo kopijavimo mygtuku.

Patempkite skaidrumo (alfa) slankiklį po peržiūra, ir rezultatai persijungs į skaidrias formas – #RRGGBBAA, rgba(), hsla() – o peržiūra bus rodoma ant šachmatinio fono, kad matytumėte skaidrumą.

Raskite artimiausią Tailwind CSS spalvos žymą

Du pagalbiniai ženkliukai po peržiūra pavadina spalvą už jus: artimiausią CSS pavadintą spalvą (naudinga greitiems prototipams ir kalbant apie spalvas) ir artimiausią „Tailwind“ žymą (pvz., orange-500), kad galėtumėte likti savo dizaino sistemoje, o ne kurti vienkartines reikšmes. Spustelėję bet kurį ženkliuką, jį nukopijuosite.

Tai atsako į klausimą, kylantį kiekvieną kartą perduodant projektą dizaineriams: dizaineris atsiuntė hex kodą – kuri Tailwind klasė jam artimiausia? Atitikmuo apskaičiuojamas pagal numatytąją Tailwind CSS 4 paletę, todėl gautą žymą galite tiesiog įklijuoti į klasės pavadinimą.

Kurį formatą naudoti?

Formatas	Pilnas pavadinimas	Kada naudoti?
HEX	Hexadecimal	Interneto standartas. Kompaktiškas, universaliai palaikomas, lengvai kopijuojamas. 8 skaitmenys prideda alfa kanalą.
RGB	Red, Green, Blue	Kaip mąsto ekranai. Trys šviesos kanalai, 0–255. Formatas, kurio tikisi dauguma API ir „canvas“ kodo.
HSL	Hue, Saturation, Lightness	Žmonėms, redaguojantiems rankiniu būdu. „Šiek tiek šviesesnė“ ar „mažiau sodri“ – tai tik vieno skaičiaus pakeitimas.
HSV	Hue, Saturation, Value	Grafikos programinė įranga. Modelis, kuriuo grįsti parinkikliai „Photoshop“ ir GIMP programose.
LCH	Lightness, Chroma, Hue	Suvokiamai vienoda. Vienodi skaitiniai žingsniai atrodo kaip vienodi vizualiniai žingsniai – tai, kuo HSL tik apsimeta esanti.
OKLCH	OK Lightness, Chroma, Hue	Modernus CSS pasirinkimas. Ištaiso LCH atspalvio poslinkius mėlynuose tonuose; palaikomas visose šiuolaikinėse naršyklėse ir idealiai tinka dizaino žymų sistemoms.
CMYK	Cyan, Magenta, Yellow, Key	Orientuotas į spaudą. Apytikslis konvertavimas kalbant su spaudos dizaineriais – galutinės vertės visada priklauso nuo spausdintuvo spalvų profilio.

Smulkmenos, kurios taupo laiką

• Istorija tvarkosi pati. Paskutinės 24 spalvos, su kuriomis dirbote, išlieka net atnaujinus puslapį – jos saugomos tik jūsų naršyklės vietinėje saugykloje ir niekur neįkeliamos.
• Pipetė. Naršyklėse, palaikančiose EyeDropper API (Chrome ir Edge), galite pasirinkti spalvą bet kur savo ekrane, net už naršyklės lango ribų.
• Valdymas klaviatūra. Ratas ir sodrumo bei ryškumo drobė reaguoja į rodyklių klavišus tiksliam reguliavimui pikselio tikslumu.
• Išankstiniai nustatymai apima dažniausiai naudojamas bazines spalvas, kai reikia tiesiog greito starto.

---

Dažniausiai užduodami klausimai (DUK)

Kaip konvertuoti OKLCH į HEX?

Įklijuokite oklch() reikšmę į OKLCH lauką, ir visi kiti rezultatai iškart atsinaujins, įskaitant HEX. Veikia ir priešinga kryptimi – įveskite HEX kodą ir gaukite atitinkamą oklch() reikšmę. Vienas niuansas: OKLCH gali apibūdinti spalvas už sRGB gamos ribų, ir tokios spalvos apkarpomos kanalas po kanalo iki to, ką sRGB gali parodyti, todėl labai sodrus oklch() ir jo HEX atitikmuo plačios gamos ekrane gali atrodyti nevienodai.

Ar oklch() saugu naudoti gamybinėje CSS?

Taip. Visos šiuolaikinės „Chrome“, „Edge“, „Firefox“ ir „Safari“ versijos palaiko oklch(), ir jis tapo pageidaujamu žymėjimu dizaino žymoms (Tailwind CSS 4 visą savo paletę apibrėžia būtent juo). Labai senoms naršyklėms pateikite HEX atsarginį variantą ankstesnėje eilutėje – šis įrankis pateikia abi vertes.

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

Todėl, kad „priešingybė“ priklauso nuo to, kaip atspalviai išdėstyti aplink apskritimą. RYB ratas tolygiai paskirsto pigmentų pirmines spalvas, todėl papildomos poros atitinka derinius, kurių tikisi dailininkai – raudona–žalia, mėlyna–oranžinė, geltona–violetinė. HSV/HSL ratai išdėsto atspalvius pagal RGB šviesos maišymą, suporuodami raudoną su žydra. Nei vienas nėra klaidingas – RYB atitinka tradicinį meno mokymą, HSV/HSL atitinka tai, ką daro ekranai.

Ar galiu pasitikėti CMYK vertėmis spaudai?

Vertinkite jas kaip orientacines, o ne kaip galutines. Tikras konvertavimas spaudai priklauso nuo spausdintuvo ICC profilio, popieriaus ir rašalo – ta pati RGB spalva skiriasi ant dengto ir nedengto popieriaus. Čia naudojama standartinė formulė priartina prie tikslo, tačiau galutinis tikrinimas priklauso spaustuvei.

Kur „Firefox“ ar „Safari“ dingo pipetės mygtukas?

Jis ten paslėptas sąmoningai: EyeDropper API, kuriuo remiasi mygtukas, šiuo metu įgyvendintas tik naršyklėse, pagrįstose „Chromium“ (Chrome, Edge, Opera). Kitose naršyklėse visos kitos parinkiklio funkcijos veikia įprastai – neveikia tik spalvos pasirinkimas iš ekrano.

Ar mano spalvų istorija yra privati?

Taip. Istorija saugoma jūsų naršyklės localStorage vietoje, jūsų įrenginyje. Niekas, ką pasirenkate, įklijuojate ar kopijuojate, niekur nesiunčiama – visas įrankis yra kliento pusės JavaScript, ką galite patikrinti stebėdami tinklo skirtuką kūrėjo įrankiuose.